如何动态更改网页标题？

我有一个网页，该网页实现了一组标签，每个标签显示不同的内容。选项卡单击不会刷新页面，而是在客户端隐藏/取消隐藏内容。

现在，需要根据页面上选择的选项卡更改页面标题（出于SEO的原因）。这可能吗？有人可以建议一种解决方案，以通过javascript动态更改页面标题而不重新加载页面吗？

更新：根据SearchEngineL上的注释和参考， 大多数网络爬虫将为更新的标题编制索引。下面的答案已过时，但代码仍然适用。

您可以做类似的事情document.title = "This is the new page title.";，但这完全会违背SEO的目的。大多数抓取工具一开始就不会支持javascript，因此它们将使用元素中的任何内容作为页面标题。

如果您希望它与大多数重要的搜寻器兼容，则需要实际更改title标记本身，这将涉及重新加载页面（PHP等）。如果要以爬虫可以看到的方式更改页面标题，则将无法解决该问题。

我想向未来打个招呼:)最近发生的事情：

1. Google现在运行您网站上的javascript ¹
2. 人们现在使用React.js，Ember和Angular之类的东西在页面上运行复杂的javascript任务，并且仍在被Google ¹编制索引
3. 您可以使用html5历史记录api（pushState，react-router，ember，angular）来进行操作，例如为要打开的每个标签设置单独的url，Google会为该索引编制索引¹

因此，要回答您的问题，您可以安全地从javascript更改标题和其他元标记（如果要支持非Google搜索引擎，也可以添加类似https://prerender.io的名称），只需将它们作为单独的url进行访问即可（否则Google怎么知道这些页面是要显示在搜索结果中的不同页面？）。更改SEO相关标签（在用户通过单击某些内容更改页面之后）很简单：

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

只要确保robots.txt中未阻止css和javascript，您就可以在Google网站站长工具中使用Google抓取方式服务。

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

我看不到通过Javascript更改页面标题将如何帮助SEO。大多数（或所有）搜索bot不运行Java脚本，而只会读取最初加载的标题（即标记）。

如果您想帮助SEO，则需要在后端更改页面标题并提供不同版本的页面。

使用document.title。

另请参阅此页面以获取基本教程。

该代码是
document.title = 'test'

您可以通过多种方式更改标题，主要的两种方法如下：

有问题的方法

将标题标签放入HTML（例如<title>Hello</title>），然后放入javascript：

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

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

显然正确的方法

最简单的方法是实际使用文档对象模型（DOM）提供的方法

document.title = "Hello World";

通常，前一种方法是您要更改在文档正文中找到的标签的方法。使用这种方法来修改元数据标签（例如在头部（如title）中发现的标签），这充其量是有问题的做法，不是惯用语言，开头的样式不是很好，甚至可能不便于移植。但是，您可以确定的一件事是，如果其他开发人员title.innerHTML = ...在所维护的代码中看到它们，则会使其他开发人员感到烦恼。

您想要使用的是后一种方法。DOM规范中提供了此属性。顾名思义，专门用于更改标题。

还请注意，如果您使用的是XUL，则可能要在尝试设置或获取标题之前检查文档是否已加载，否则您正在调用 undefined behavior（这里是龙），这本身就是一个可怕的概念。这可能通过JavaScript发生，也可能不会发生，因为DOM上的文档不一定与JavaScript有关。但是XUL完全是“另一只野兽”，所以我离题了。

说起 .innerHTML

要记住的一些好建议是，使用.innerHTML通常是草率的。采用appendChild代替。

虽然我仍然觉得.innerHTML有用的两种情况包括将纯文本插入一个小元素中...

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;
}());

...并清理一个容器...

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

使用document.title是您在JavaScript中的实现方式，但这应如何帮助SEO？漫游器在遍历页面时通常不会执行javascript代码。

现代的搜寻器能够解析 DOM中动态生成的内容，因此使用document.title = ...非常好。

您必须重新为页面提供新标题，以便所有抓取工具都能注意到更改。通过javascript进行操作只会使人类读者受益，爬虫不会执行该代码。

对于那些寻找它的npm版本的人，这里有一个完整的库：

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

也许您可以将所有选项卡的标题加载到一个字符串中，然后再加载其中一个选项卡，即可通过javascript更改标题

例如：首先将标题设置为

my app | description | contact | about us | 

加载选项卡之一后，运行：

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

想到的一种可能有助于SEO并仍保留标签页的方法是使用与每个标签相对应的命名锚，如下所示：

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

您将需要服务器端处理来解析URL并在浏览器呈现页面时设置初始页面标题。我也将继续使该选项卡成为“活动”选项卡。页面加载完成后，实际用户切换了标签，您将使用javascript来更改document.title其他用户所说的内容。

采用 document.title。它对大多数事情都很有用，但会破坏您网站上的SEO。

例：

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>

您可以使用JavaScript。包括Google在内的某些机器人将为了SEO的利益执行JavaScript（在SERP中显示正确的标题）。

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

但是，这更加复杂，因为您在不刷新页面或更改URL的情况下显示和隐藏选项卡。如其他人所述，也许添加锚点会有所帮助。我可能需要收回答案。

显示积极结果的文章：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

不要总是假设机器人不会执行JavaScript。 http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google和其他搜索引擎知道，要编制索引的最佳结果是实际最终用户将在浏览器中看到的结果，包括JavaScript。

由于搜索引擎会忽略大多数javascript，因此您需要制作它，以便搜索引擎可以使用选项卡进行爬网而无需使用Ajax。使每个选项卡都具有一个带有href的链接，该链接将加载选中该选项卡的整个页面。然后页面可以在标签中具有该标题。

onclick事件处理程序仍可以通过ajax为人类查看者加载页面。

要在大多数搜索引擎看到的页面中查看它们，请在浏览器中关闭Javascript，然后尝试制作它，以便单击选项卡将加载选择了该选项卡和正确标题的页面。

如果您是通过ajax加载的，并且只想使用Javascript动态更改页面标题，请执行以下操作：

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

但是，搜索引擎不会看到javascript中所做的更改。

但是为了获得SEO的好处

当页面更改时，您需要重新加载页面，以便搜索引擎看到不同的标题等。

因此，请确保先进行页面重新加载，然后再添加document.title更改

我只想在这里添加一些内容：如果您要通过AJAX更新数据库，那么通过JavaScript更改标题实际上很有用，因此无需更改页面即可更改标题。标题实际上是通过服务器端脚本语言更改的，但是通过JavaScript更改标题只是一种可用性和UI事情，它使用户体验更加愉悦和流畅。

现在，如果仅通过JavaScript来更改标题，那您就不应该这样做。

谷歌提到所有渲染的js文件，但实际上，我已经失去了我的标题以及Reactact在此网站上提供的另一个meta标签，实际上失去了我在Google上的职位！我搜索了很多东西，但似乎所有页面都必须预先渲染或使用SSR（服务器端渲染）才能拥有SEO友好协议！
它将扩展为Reactjs，Angularjs等
。简而言之，所有在浏览器上具有查看页面源代码的页面都将由所有机器人索引，如果不是Google可以索引但其他机器人则可以跳过索引！

最简单的方法是<title>从index.html 删除标记，并包含

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

在网络上的每个页面中。蜘蛛会找到并在搜索结果中显示:)