我有一个网页，它实现了一组选项卡，每个选项卡都显示不同的内容。标签点击不会刷新页面，而是在客户端隐藏/取消隐藏内容。
现在需要根据页面上选择的选项卡更改页面标题（出于 SEO 原因）。这可能吗？有人可以提出一个解决方案，通过 javascript 动态更改页面标题而不重新加载页面？
【问题讨论】：
document.title = "new title"; 但如果页面有 iframe，您可以使用：window.top.document.title
标签： javascript html
更新：根据 cmets 和 SearchEngineLand 上的参考 大多数网络爬虫都会索引更新的标题。以下答案已过时，但代码仍然适用。
您可以执行类似
document.title = "This is the new page title.";的操作，但这会完全违背 SEO 的目的。最多 爬虫首先不会支持 javascript，所以 他们会将元素中的任何内容作为页面标题。如果您希望它与大多数重要的爬虫兼容， 您将需要实际更改标题标签本身，即 将涉及重新加载页面（PHP 等）。你不去 能够解决这个问题，如果你想改变页面标题 一种爬虫可以看到的方式。
【讨论】：
我想和未来打个招呼 :) 最近发生的事情：
所以要回答您的问题，您可以安全地从 javascript 更改标题和其他元标记（如果您想支持非 Google 搜索引擎，您还可以添加类似 https://prerender.io 的内容），只需将它们作为单独的 url 访问（否则Google 如何知道这些是要在搜索结果中显示的不同页面？）。更改 SEO 相关标签（在用户通过点击某物更改页面后）很简单：
if (document.title != newTitle) {
document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);
只要确保css和javascript在robots.txt中没有被屏蔽，你就可以在谷歌站长工具中使用Fetch as Google服务。
1：http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
【讨论】：
document.title != newTitle)
使用document.title。
有关基本教程，请参阅 this page。
【讨论】：
我看不出通过 Javascript 更改页面标题对 SEO 有何帮助。大多数（或全部）搜索机器人不运行 Javascript，只会读取最初加载的标记标题。
如果您想帮助 SEO，那么您需要在后端更改页面标题并提供不同版本的页面。
【讨论】：
window.history 时更新页面标题和 URL
代码是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 = ...，这会惹恼他们。
您想要采用的是后一种方法。该属性是provided in the DOM Specification，顾名思义，专门用于更改标题。
还请注意，如果您正在使用 XUL，您可能需要在尝试设置或获取标题之前检查文档是否已加载，否则您将调用 undefined behavior（这里是 dragons），这很可怕概念本身。这可能会也可能不会通过 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);
});
【讨论】：
undefined behavior。
document.querySelector.apply，认真的吗？
使用 document.title 是您在 JavaScript 中实现它的方式，但这应该如何帮助 SEO？漫游器通常不会在遍历页面时执行 javascript 代码。
【讨论】：
DOM 中的现代爬虫are able to parse dynamically-generated content，因此使用document.title = ... 非常好。
【讨论】：
您必须重新提供具有新标题的页面，以便任何抓取工具注意到更改。通过 javascript 执行此操作只会使人类读者受益，爬虫不会执行该代码。
【讨论】：
也许您可以在一个字符串中加载所有标签标题，然后在加载其中一个标签后通过 javascript 更改标题
例如：首先将您的标题设置为
my app | description | contact | about us |
一旦你加载了一个标签运行：
document.title = "my app | tab title";
【讨论】：
对于那些寻找它的 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'));
【讨论】：
使用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>【讨论】：
想到的一种可能对 SEO 有所帮助并且仍然保留标签页的方法是使用与每个标签相对应的命名锚点，例如：
http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.
当浏览器呈现页面时，您需要进行服务器端处理来解析 url 并设置初始页面标题。我还将继续将该选项卡设为“活动”选项卡。加载页面并且实际用户正在切换选项卡后，您将使用 javascript 更改 document.title，正如其他用户所说的那样。
【讨论】：
您可以使用 JavaScript。包括 Google 在内的一些机器人将执行 JavaScript 以促进 SEO（在 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 更改标题，那么您不应该这样做。
【讨论】：
Google 提到所有 js 文件都渲染了，但实际上，我丢失了我的标题和另一个由 Reactjs 在this website 上提供的元标记，实际上我在 Google 上的位置也丢失了！我搜索了很多，但似乎所有页面都必须预先渲染或使用 SSR（服务器端渲染）才能拥有对 SEO 友好的协议！
它扩展到 Reactjs、Angularjs 等。
简而言之，在浏览器上查看页面源代码的每个页面都被所有机器人索引，如果不是谷歌可以索引但其他人跳过索引！
【讨论】：
最简单的方法是从index.html中删除<title>标签，并包含
<head>
<title> Website - The page </title></head>
在网络的每个页面中。蜘蛛会找到这个并显示在搜索结果中:)
【讨论】：
我使用单独的标头并使用 php 将其包含在我使用的标头中：
<?php
if (!isset($title)){
$title = "Your Title";
}
else {
$title = $title;
}
?>
<head>
<title><?php echo $title; ?></title>
然后在我使用的每个页面中：
<?php
$title = "Your Title - Page";
include( "./header.php" );
?>
【讨论】：