Como alterar dinamicamente o título de uma página da web?

Eu tenho uma página da Web que implementa um conjunto de guias, cada uma mostrando um conteúdo diferente. Os cliques da guia não atualizam a página, mas ocultam / mostram o conteúdo no lado do cliente.

Agora, é necessário alterar o título da página de acordo com a guia selecionada na página (por motivos de SEO). Isso é possível? Alguém pode sugerir uma solução para alterar dinamicamente o título da página via javascript sem recarregar a página?

Atualização : conforme os comentários e a referência no SearchEngineLand, a maioria dos rastreadores da Web indexará o título atualizado. A resposta abaixo é obsoleta, mas o código ainda é aplicável.

Você pode simplesmente fazer algo como,, document.title = "This is the new page title.";mas isso derrotaria totalmente o objetivo do SEO. A maioria dos rastreadores não suporta javascript em primeiro lugar; portanto, eles usarão o que estiver no elemento como título da página.

Se você deseja que isso seja compatível com a maioria dos rastreadores importantes, será necessário alterar a própria tag title, o que envolveria recarregar a página (PHP ou algo semelhante). Você não será capaz de contornar isso, se quiser alterar o título da página de uma maneira que um rastreador possa ver.

Quero dizer olá do futuro :) Coisas que aconteceram recentemente:

1. O Google agora executa javascript que está no seu site ¹
2. As pessoas agora usam coisas como React.js, Ember e Angular para executar tarefas complexas de javascript na página e ainda está sendo indexado pelo Google ¹
3. você pode usar a API do histórico html5 (pushState, react-router, brasa, angular) que permite fazer coisas como ter URLs separados para cada guia que você deseja abrir e o Google indexará esse ¹

Portanto, para responder à sua pergunta, você pode alterar com segurança o título e outras metatags do javascript (você também pode adicionar algo como https://prerender.io se desejar oferecer suporte a mecanismos de pesquisa que não sejam do Google), basta torná-los acessíveis como URLs separados ( caso contrário, como o Google saberia que são páginas diferentes para mostrar nos resultados de pesquisa?). Alterar as tags relacionadas ao SEO (depois que o usuário altera a página clicando em algo) é simples:

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

Apenas certifique-se de que css e javascript não estejam bloqueados no robots.txt, você pode usar Buscar como serviço do Google nas Ferramentas do Google para webmasters.

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

Não vejo como a alteração do título da página via Javascript ajudará o SEO. A maioria (ou todos) os robôs de pesquisa não executam Javascript e só lê o título carregado inicialmente que é a marcação.

Se você quiser ajudar o SEO, precisará alterar o título da página no back-end e atender a diferentes versões da página.

Use document.title.

Veja esta página para um tutorial rudimentar também.

O código é
document.title = 'test'

Existem várias maneiras de alterar o título, as duas principais, são assim:

O método questionável

Coloque uma tag de título no HTML (por exemplo <title>Hello</title>) e depois em javascript:

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

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

O método obviamente correto

O mais simples de tudo é realmente usar o método fornecido pelo DOM (Document Object Model)

document.title = "Hello World";

O método anterior é geralmente o que você faria para alterar as tags encontradas no corpo do documento. Usar esse método para modificar tags de metadados, como os encontrados na cabeça (como title), é uma prática questionável, na melhor das hipóteses, não é idiomático, não é um estilo muito bom para começar e pode até não ser portátil. Uma coisa que você pode ter certeza, porém, é que isso incomodará outros desenvolvedores se eles virem o title.innerHTML = ...código que estão mantendo.

O que você quer seguir é o último método. Esta propriedade é fornecida na Especificação do DOM especificamente com a finalidade, como o nome sugere, de alterar o título.

Observe também que, se você estiver trabalhando com o XUL, verifique se o documento foi carregado antes de tentar definir ou obter o título, caso contrário, você está invocando undefined behavior(aqui estão dragões), que é um conceito assustador por si só. Isso pode ou não ocorrer via JavaScript, pois os documentos no DOM não pertencem necessariamente ao JavaScript. Mas XUL é um animal totalmente diferente, então eu discordo.

Falando de .innerHTML

Um bom conselho a ter em mente seria que o uso .innerHTMLgeralmente é desleixado. Use em appendChildvez disso.

Embora dois casos em que eu ainda ache .innerHTMLútil sejam: inserir texto sem formatação em um pequeno 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 limpando um recipiente ...

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

Usando o document.title, é como você o faria em JavaScript, mas como isso deve ajudar no SEO? Os bots geralmente não executam código javascript à medida que percorrem as páginas.

Os rastreadores modernos são capazes de analisar conteúdo gerado dinamicamente no DOM, portanto, o uso document.title = ...é perfeitamente adequado.

Você precisará reenviar a página com um novo título para que qualquer rastreador observe a alteração. Se o fizer via javascript, beneficiará apenas um leitor humano, os rastreadores não executarão esse código.

para quem procura a versão npm, há uma biblioteca inteira para isso:

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'));

Talvez você possa carregar no título todos os títulos das guias em uma sequência e, depois de carregar uma das guias, altere o título via javascript

ex: em primeiro lugar, defina seu título para

my app | description | contact | about us | 

Depois de carregar uma das guias, execute:

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

Uma maneira de lembrar que pode ajudar no SEO e ainda ter suas páginas de guias como seria seria usar âncoras nomeadas que correspondam a cada guia, como em:

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

Você precisaria ter um processamento no servidor para analisar o URL e definir o título da página inicial quando o navegador renderizar a página. Eu também iria em frente e tornaria a guia "ativa". Depois que a página for carregada e um usuário real estiver trocando de guia, você usaria o javascript para alterar document.titlecomo outros usuários declararam.

Use document.title. Será útil para a maioria das coisas, mas destruirá o SEO no seu site.

Exemplo:

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>

Você pode usar JavaScript. Alguns bots, incluindo o Google, executam o JavaScript em benefício do SEO (mostrando o título correto no SERP).

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

No entanto, isso é mais complexo, pois você está mostrando e ocultando guias sem atualizar a página ou alterar o URL. Talvez adicionar uma âncora ajude conforme declarado por outros. Talvez eu precise retirar minha resposta.

Artigos que mostram resultados positivos: 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

Nem sempre assuma que um bot não executa JavaScript. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 O Google e outros mecanismos de pesquisa sabem que os melhores resultados para indexar são os resultados que o usuário final real verá em seu navegador, incluindo JavaScript.

Como os mecanismos de pesquisa ignoram a maioria dos javascript, você precisará fazer isso para que os mecanismos de pesquisa possam rastrear usando as guias sem usar o Ajax. Faça de cada guia um link com um href que carregue a página inteira com essa guia selecionada. Em seguida, a página pode ter esse título na tag.

O manipulador de eventos onclick ainda pode carregar as páginas via ajax para visualizadores humanos.

Para ver as páginas como a maioria dos mecanismos de pesquisa as vê, desative o Javascript no navegador e tente fazê-lo para que, ao clicar nas guias, a página seja carregada com a guia selecionada e o título correto.

Se você está carregando via ajax e deseja alterar dinamicamente o título da página apenas com Javascript, faça:

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

No entanto, os mecanismos de pesquisa não verão essa alteração feita em javascript.

Mas, para obter os benefícios de SEO

Você precisa recarregar a página quando ela mudar, para que o mecanismo de pesquisa veja os diferentes títulos etc.

Portanto, verifique se a atualização da página funciona primeiro e depois adicione document.title changes

Eu só quero adicionar algo aqui: alterar o título via JavaScript é realmente útil se você estiver atualizando um banco de dados via AJAX; portanto, o título muda sem que você precise atualizar a página. O título realmente muda por meio da linguagem de script do servidor, mas alterá-lo por JavaScript é apenas uma questão de usabilidade e interface do usuário que torna a experiência do usuário mais agradável e fluida.

Agora, se você estiver alterando o título via JavaScript apenas para o inferno, não deve fazer isso.

O Google mencionou que todos os arquivos js renderizados, mas, na realidade, perdi meu título e outras metatags fornecidas pelo Reactjs neste site e perdi minha posição no Google! Pesquisei bastante, mas parece que todas as páginas devem ter sido renderizadas previamente ou usando o SSR (Server Side Rendering) para ter seu protocolo amigável ao SEO!
Ele se expande para Reactjs, Angularjs, etc.
Em resumo, todas as páginas que exibem a fonte da página no navegador são indexadas por todos os robôs, se não for provável que o Google possa indexar, mas outras ignoram a indexação!

A maneira mais simples é excluir a <title>tag do index.html e incluir

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

em todas as páginas da web. As aranhas encontrarão isso e serão mostradas nos resultados da pesquisa :)