Come modificare dinamicamente il titolo di una pagina Web?


510

Ho una pagina web che implementa una serie di schede ognuna con contenuti diversi. I clic sulla scheda non aggiornano la pagina ma nascondono / scoprono i contenuti sul lato client.

Ora è necessario modificare il titolo della pagina in base alla scheda selezionata sulla pagina (per motivi SEO). È possibile? Qualcuno può suggerire una soluzione per modificare dinamicamente il titolo della pagina tramite javascript senza ricaricare la pagina?

Risposte:


709

Aggiornamento : come da commenti e riferimenti su SearchEngineLand la maggior parte dei crawler web indicizzerà il titolo aggiornato. La risposta di seguito è obsoleta, ma il codice è ancora applicabile.

Puoi semplicemente fare qualcosa del genere, document.title = "This is the new page title.";ma questo annullerebbe totalmente lo scopo del SEO. La maggior parte dei crawler non supporterà javascript in primo luogo, quindi prenderanno tutto ciò che è presente nell'elemento come titolo della pagina.

Se vuoi che sia compatibile con la maggior parte dei crawler importanti, dovrai effettivamente cambiare il tag del titolo stesso, il che implicherebbe il ricaricamento della pagina (PHP o simili). Non sarai in grado di aggirare questo, se vuoi cambiare il titolo della pagina in modo che un crawler possa vedere.


29
Se stai usando il pushState di html5 per cambiare la cronologia quando aggiorni già la tua pagina, perché non aggiornare anche il titolo. Se impostato correttamente i crawler otterrebbero comunque i risultati giusti e vorrai comunque che l'utente veda il titolo corrispondente alla vista in cui si trova. Per la maggior parte delle app web, ecc., Sembra un buon solletico continuare a usarlo. Potrei aver trascurato una funzione diversa però?
Mathijs Segers,

31
Questo non è del tutto vero. Google indicizza le modifiche javascript a document.title. Vedere searchengineland.com/...
CpnCrunch

7
@CpnCrunch è corretto! Google indicizzerà il titolo che è stato modificato da JavaScript. Non ho ancora testato su altri robot di ricerca. Non sempre presumo che un bot non esegua JavaScript. Ho creato una nuova risposta di seguito, e poi ho capito che semplicemente mostrare e nascondere le schede senza cambiare l'URL rende questo più complesso.
yazzer,

10
@CpnCrunch è corretto. Questo è il 2016. SEO è cambiato molto e Google e altri motori di ricerca si stanno adattando alle app a pagina singola e javascript in generale.
pilau,

34
Quindi significa che questa risposta è piuttosto obsoleta. StackOverflow dovrebbe ora aggiungere la funzione "Obsoleto" per le risposte: D
Allen Linatoc

167

Voglio salutare dal futuro :) Cose che sono successe di recente:

  1. Google ora esegue javascript sul tuo sito Web 1
  2. Le persone ora usano cose come React.js, Ember e Angular per eseguire complesse attività javascript sulla pagina e viene ancora indicizzato da Google 1
  3. puoi usare la cronologia html5 api (pushState, reazioni-router, brace, angolare) che ti consente di fare cose come avere URL separati per ogni scheda che vuoi aprire e Google indicizzerà che 1

Quindi, per rispondere alla tua domanda, puoi tranquillamente cambiare titolo e altri meta tag da javascript (puoi anche aggiungere qualcosa come https://prerender.io se vuoi supportare motori di ricerca non Google), rendili accessibili come URL separati ( altrimenti come Google saprebbe che quelle sono pagine diverse da mostrare nei risultati di ricerca?). Modificare i tag relativi a SEO (dopo che l'utente ha cambiato pagina facendo clic su qualcosa) è semplice:

if (document.title != newTitle) {
    document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);

Assicurati solo che css e javascript non siano bloccati in robots.txt, puoi utilizzare Fetch come servizio Google in Strumenti per i Webmaster di Google.

1: http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157


47

Non riesco a vedere come la modifica del titolo della pagina tramite Javascript possa aiutare SEO. La maggior parte (o tutti) i robot di ricerca non eseguono Javascript e leggono solo il titolo caricato inizialmente che è il mark-up.

Se vuoi aiutare il SEO, dovrai cambiare il titolo della pagina nel back-end e pubblicare diverse versioni della pagina.


3
d'accordo - questo non aiuterà affatto la SEO, poiché i crawler non faranno nulla con il tuo JS
annakata

Forse vogliono solo un titolo ma tutto il contenuto della SE, ma quindi un'organizzazione più amichevole dei dati una volta che sei sulla pagina?
Kev

beh, allora vanno molto contro l'intero concetto di SEO
annakata,

4
Sì, non è molto utile per la SEO, ma è utile per l'utente finale durante il bookmarking ecc., Ad esempio l'aggiornamento di un titolo di pagina quando cambia l'hash nell'URL o quando si utilizza HTML5 / JS è window.historyutile aggiornare il titolo della pagina e l'URL
acSlater

Consulta la documentazione di Google su applicazioni per la scansione di javascript developers.google.com/webmasters/ajax-crawling
codewizard,

43

Usa document.title.

Vedi questa pagina anche per un tutorial rudimentale.


10
amo il link, ha schermate di netscape navigator :)
Aran Mulholland

Spero che i ragni non usino JavaScript. Un buon modo per inviare codice dannoso a Google?
Lee Louviere,

@AdrianoVaroliPiazza Potrebbe essere inutile, ma funziona e aiuterà le persone provenienti dai motori di ricerca. Non c'è bisogno di votare se è la risposta corretta!
its_notjack il

@its_notjack Non lo è. Potrebbe essere la risposta corretta per un'altra domanda.
Adriano Varoli Piazza

1
Bene, questo argomento è venuto prima di me quando ho digitato "javascript change title" in Google. Sto sviluppando un'app Web quindi non mi interessa il SEO.
Maciej Krawczyk,

36

Il codice è
document.title = 'test'


3
Uso top.document.title per fare riferimento alla finestra stessa (ho i set di frame ...)
Dror

2
@AdrianoVaroliPiazza non ha bisogno di andare -1, che dire delle applicazioni che non richiedono SEO o dei siti Web che utilizzano effettivamente alcune funzioni HTML5. Voglio dire, se hai impostato correttamente il tuo sito web e fai uso di Ajax e hai un fallback per i non-js / crawler questo accelererà solo l'esperienza dell'utente e manterrà visibile anche il titolo corrispondente. Mi sembra una buona idea.
Mathijs Segers,

Non è necessario aggiungere un ;alla fine?
MineCMD

1
@MineCMD, un punto e virgola (;) è richiesto solo se si hanno più comandi su una sola riga. Supponendo che non si abbia qualcosa che tenga aperto il comando (un punto, una virgoletta, una virgoletta doppia, una parentesi graffa sinistra, ecc.), Allora una nuova riga è considerata la fine del comando. Non sono sicuro di quanto sia vero nel caso dei vecchi browser, ma si è dimostrato vero nelle ultime versioni di Chrome e Firefox. (Non utilizzo IE o Edge, quindi non posso dirlo)
Wayne,

@Wayne Un po 'corretto; ci sono alcuni casi limite in cui ASI porta a comportamenti imprevisti (per la maggior parte), in particolare se si restituisce un oggetto anonimo.
Dave Newton,

18

Ci sono molti modi in cui puoi cambiare il titolo, i due principali sono così:

Il metodo discutibile

Inserisci un tag title nell'HTML (ad es. <title>Hello</title>), Quindi in JavaScript:

let title_el = document.querySelector("title");

if(title_el)
    title_el.innerHTML = "World";

Il metodo ovviamente corretto

Il più semplice di tutti è effettivamente utilizzare il metodo fornito dal Document Object Model (DOM)

document.title = "Hello World";

Il primo metodo è generalmente quello che faresti per modificare i tag trovati nel corpo del documento. L'uso di questo metodo per modificare i tag dei metadati come quelli presenti nella testa (come title) è una pratica discutibile nella migliore delle ipotesi, non è idiomatico, non è uno stile molto buono all'inizio e potrebbe non essere portatile. Una cosa di cui puoi essere certo è che infastidirà gli altri sviluppatori se vedono title.innerHTML = ...nel codice che stanno mantenendo.

Quello che vuoi seguire è l'ultimo metodo. Questa proprietà è fornita nelle specifiche DOM in modo specifico allo scopo di, come suggerisce il nome, cambiare il titolo.

Nota anche che se stai lavorando con XUL, potresti voler controllare che il documento sia stato caricato prima di tentare di impostare o ottenere il titolo, poiché altrimenti stai invocando undefined behavior(qui si tratta di draghi), che è un concetto spaventoso a sé stante. Ciò può accadere o meno tramite JavaScript, poiché i documenti sul DOM non si riferiscono necessariamente a JavaScript. Ma XUL è un'altra bestia, quindi sto divagando.

Parlando di .innerHTML

Un buon consiglio da tenere a mente sarebbe che l'uso .innerHTMLè generalmente sciatto. Usa appendChildinvece.

Anche se due casi in cui trovo ancora .innerHTMLutile includere l'inserimento di testo semplice in un piccolo elemento ...

label.innerHTML = "Hello World";
// as opposed to... 
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
    let el = document.createElement("span");
    el.className = "label";
    el.innerHTML = label_text;
    return el;
}());

... e svuotare un contenitore ...

container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
    container.removeChild(child);
});

1
Ho trovato la parola perfetta per l'avvertenza con il metodo 1: undefined behavior.
Braden Best

1
Questo dovrebbe assolutamente essere sottoposto a downgrade. Il metodo 1 è un comportamento indefinito, come notato sopra (e nessuna quantità di dichiarazioni di non responsabilità giustifica menzionarlo); inoltre document.querySelector.apply, sul serio?
Andrey Tarantsov,

3
@AndreyTarantsov nessun ammonimento di responsabilità giustificherà la sua menzione? Che ne dici di menzionarlo in modo che le persone sappiano cosa NON fare? Impariamo dai nostri errori, quindi dire a qualcuno di non menzionare qualcosa che è un errore, è un cattivo consiglio. Inoltre, questa è una risposta molto vecchia (letteralmente una delle prime risposte che ho scritto su questo sito), quindi "sul serio?" era inutile. Non puoi assolutamente sapere cosa è cambiato nelle mie conoscenze ed esperienze negli ultimi tre anni.
Braden Best

11

L'utilizzo di document.title è il modo in cui lo realizzeresti in JavaScript, ma come dovrebbe essere d'aiuto il SEO? I robot generalmente non eseguono il codice javascript mentre attraversano le pagine.



4

Dovrai ri-servire la pagina con un nuovo titolo affinché tutti i crawler notino la modifica. Farlo tramite javascript gioverà solo a un lettore umano, i crawler non eseguiranno quel codice.


4

per coloro che cercano la versione di npm, esiste un'intera libreria per questo:

npm install --save react-document-meta


import React from 'react';
import DocumentMeta from 'react-document-meta';

class Example extends React.Component {
  render() {
    const meta = {
      title: 'Some Meta Title',
      description: 'I am a description, and I can create multiple tags',
      canonical: 'http://example.com/path/to/page',
      meta: {
        charset: 'utf-8',
        name: {
          keywords: 'react,meta,document,html,tags'
        }
      }
    };

    return (
      <div>
        <DocumentMeta {...meta} />
        <h1>Hello World!</h1>
      </div>
    );
  }
}

React.render(<Example />, document.getElementById('root'));

3

Forse puoi caricare sul tuo titolo tutti i titoli delle schede in una stringa, quindi una volta caricata una delle schede puoi cambiare il titolo tramite javascript

es: inizialmente imposta il tuo titolo su

my app | description | contact | about us | 

una volta caricata una delle schede eseguire:

document.title = "my app | tab title";

2

Un modo che viene in mente che può aiutare con SEO e avere ancora le tue schede come sono sarebbe usare ancore con nome che corrispondono a ciascuna scheda, come in:

http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.

Dovresti avere l'elaborazione lato server per analizzare l'URL e impostare il titolo della pagina iniziale quando il browser esegue il rendering della pagina. Vorrei anche andare avanti e rendere quella scheda "attiva". Una volta caricata la pagina e un utente reale sta cambiando scheda, useresti JavaScript per cambiare document.titlecome hanno affermato altri utenti.


2

Puoi usare JavaScript. Alcuni bot, incluso Google, eseguiranno il JavaScript a beneficio della SEO (mostrando il titolo corretto nella SERP).

document.title = "Google will run this JS and show the title in the search results!";

Tuttavia, questo è più complesso poiché stai mostrando e nascondendo le schede senza aggiornare la pagina o modificare l'URL. Forse l'aggiunta di un'ancora aiuterà come affermato da altri. Potrei aver bisogno di ritirare la mia risposta.

Articoli che mostrano risultati positivi: http://www.aukseo.co.uk/use-javascript-to-generate-seo-friendly-title-tags-1275/ http://www.ifinity.com.au/2012/10 / 04 / Changing_a_Page_Title_with_Javascript_to_update_a_Google_SERP_Entry

Non dare sempre per scontato che un bot non esegua JavaScript. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google e altri motori di ricerca sanno che i migliori risultati da indicizzare sono i risultati che l'utente finale vedrà nel proprio browser, incluso JavaScript.


2

Usa document.title. Sarà utile per la maggior parte delle cose, ma distruggerà la SEO sul tuo sito web.

Esempio:

document.write("title - " + document.title + "<br>");
document.title = "New title here!";
// Notice: this will defeat purpose of SEO. Not useful for SEO-friendly sites.
document.write("title - " + document.title + "<br>");
body {
  font-family: Consolas, 'Courier New', monospace;
}
<!DOCTYPE html>
<html>
  <head><title>Old title</title></head>
  <body><p>
    Lorem ipsum dolor sit amet, at movet detraxit mediocritatem eam, nam iusto abhorreant ne. Ei pro          debet adolescens voluptaria, eu minim scaevola conceptam vel. Vim ea torquatos constituto                complectitur, usu eu civibus insolens eleifend. Ex ubique quaerendum his.

  </p></body>
</html>


1

Poiché i motori di ricerca ignorano la maggior parte dei javascript, dovrai farlo in modo che i motori di ricerca possano eseguire la scansione utilizzando le schede senza utilizzare Ajax. Rendi ogni scheda un collegamento con un href che carica l'intera pagina con quella scheda selezionata. Quindi la pagina può avere quel titolo nel tag.

Il gestore di eventi onclick può comunque caricare le pagine tramite Ajax per i visualizzatori umani.

Per vedere le pagine come la maggior parte dei motori di ricerca le vede, disattiva Javascript nel tuo browser e prova a farlo in modo che facendo clic sulle schede si carichi la pagina con quella scheda selezionata e il titolo corretto.

Se stai caricando tramite ajax e vuoi cambiare dinamicamente il titolo della pagina con solo Javascript, allora fai:

document.title = 'Put the new title here';

Tuttavia, i motori di ricerca non vedranno questa modifica apportata in JavaScript.


2
"Per vedere le pagine come vengono visualizzate da Google, disattiva Javascript nel tuo browser e prova a fare in modo che facendo clic sulle schede si carichi la pagina con quella scheda selezionata e il titolo corretto." - questo è un molto buon approccio nello sviluppo SEO friendly siti web AJAX-pesante.
John Weisz,

0

Ma al fine di ottenere il SEO si addice

Devi ricaricare una pagina quando la pagina cambia in modo che i motori di ricerca vedano i diversi titoli ecc.

Quindi assicurati che il ricaricamento della pagina funzioni prima, quindi aggiungi le modifiche document.title


0

Voglio solo aggiungere qualcosa qui: cambiare il titolo tramite JavaScript è effettivamente utile se stai aggiornando un database tramite AJAX, quindi il titolo cambia senza che tu debba aggiornare la pagina. Il titolo in realtà cambia tramite il linguaggio di scripting lato server, ma modificarlo tramite JavaScript è solo una usabilità e un'interfaccia utente che rende l'esperienza dell'utente più piacevole e fluida.

Ora, se stai cambiando il titolo tramite JavaScript solo per il gusto di farlo, allora non dovresti farlo.


0

Google ha affermato che tutti i file js sono stati renderizzati, ma in realtà ho perso il mio titolo e altri meta tag forniti da Reactjs su questo sito Web e in realtà ho perso la mia posizione su Google! Ho cercato molto ma sembra che tutte le pagine debbano essere pre-renderizzate o usando SSR (Server Side Rendering) per avere il loro protocollo SEO-friendly!
Si espande in Reactjs, Angularjs, ecc.
In breve, ogni pagina che ha la visualizzazione della sorgente della pagina sul browser è indicizzata da tutti i robot, se non è probabile che Google possa indicizzare ma altri ignorano l'indicizzazione!


-1

Il modo più semplice è eliminare il <title>tag da index.html e includerlo

<head>
<title> Website - The page </title></head>

in ogni pagina del web. Gli spider lo troveranno e verranno mostrati nei risultati di ricerca :)

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.