logo标签列表

如何动态更改网页标题？

javascripthtml
673

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

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

10
document.title = "new title"; 但如果页面有iframe，则可以使用：window.top.document.title。 - S.Serpooshan
你如何使你的选项卡集合个性化和独特？ - Sunil Shah
21个回答
899

更新：根据SearchEngineLand上的评论和参考，大多数网络爬虫将索引更新后的标题。下面的答案已过时，但代码仍然适用。

你可以像这样做：document.title = "这是新的页面标题。";，但这完全违背了SEO的初衷。大多数爬虫本来就不支持javascript，因此它们会把在<title>元素中的任何内容作为页面标题。

如果您希望兼容大多数重要的网络爬虫，您需要实际更改标题标签本身，这需要重新加载页面（使用PHP或类似工具）。如果您想以一种爬虫可以看到的方式更改页面标题，则无法避免这一点。

34
如果您已经使用html5的pushState来更新页面历史记录，为什么不同时更新标题呢？如果正确设置，网络爬虫仍将获得正确的结果，并且您希望用户看到与其视图匹配的标题。对于大多数网络应用程序等，似乎这是一个不错的解决方案。我可能忽略了其他不同的功能？ - Mathijs Segers
37
这不完全正确。Google确实会索引JavaScript更改的document.title。请参见http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157。 - CpnCrunch
8
@CpnCrunch是正确的！Google会索引被JavaScript更改的标题。我没有在其他搜索机器人上进行测试。不要总是假设机器人不执行JavaScript。我在下面创建了一个新答案，然后意识到仅仅显示和隐藏标签而不更改URL会使情况更加复杂。 - yazzer
10
@CpnCrunch是正确的。这是2016年。SEO已经发生了很大的变化，Google和其他搜索引擎正在适应单页应用程序和JavaScript等技术。 - pilau
44
这意味着这个答案相当过时了。StackOverflow 应该现在为答案添加“过时”功能 :D - Allen Linatoc
显示剩余8条评论
214

我想向你们来自未来的问候 :) 最近发生的事情如下：

  1. 谷歌现在运行您网站上的JavaScript代码1
  2. 人们现在使用React.js、Ember和Angular等工具来运行页面上复杂的JavaScript任务，而且仍然被Google索引1
  3. 您可以使用HTML5 history API（pushState、react-router、Ember、Angular）来实现诸如为每个要打开的选项卡设置单独的URL，并且Google会对其进行索引1

因此，回答您的问题，您可以安全地通过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网站管理员工具中的Fetch as Google服务。

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

3
你好，未来！想问一下为什么你们还在使用jQuery，以及这个比较(document.title != newTitle)有什么用处？ - Volod
2
这是2016年的未来，你知道的:) 比较只是为了防止在页面之间导航时标题没有更改，我想描述可能可以保持不变，但它只是作为简短演示而打算的。 - JLarky
70

使用document.title。

另外，可以参考这个页面的基础教程。

18
我很喜欢这个链接，它有Netscape Navigator的屏幕截图 :) - Aran Mulholland
我希望蜘蛛不要使用JavaScript。这是向谷歌发送恶意代码的好方法吗？ - Lee Louviere
@AdrianoVaroliPiazza 这可能没有什么用，但它能够正常工作并且会帮助那些通过搜索引擎来寻找答案的人们。如果这是正确的答案，就不需要给它点踩！ - its_notjack
@its_notjack 不是的。这可能是另一个问题的正确答案。 - Adriano Varoli Piazza
1
当我在谷歌上输入“javascript更改标题”时，这个话题首先引起了我的注意。我正在开发一个Web应用程序，所以我不关心SEO。 - Maciej Krawczyk
你可以制作你的SPA，如果你关心SEO，你需要制作服务器渲染版本的页面。 - Kalnode
54

代码如下
document.title = '测试'

3
我使用top.document.title引用窗口本身（我有框架集...） - Dror
2
@AdrianoVaroliPiazza 不需要降低权重，那么对于不需要SEO的应用程序呢？或者对于实际使用一些HTML5功能的网站呢？我的意思是，如果您正确设置您的网站并利用ajax，并为非js /爬虫提供备用方案，这将仅加快用户体验并保持匹配标题可见。对我来说，这似乎是个好主意。 - Mathijs Segers
你不需要在结尾加上 ; 吗？ - MineCMD
1
@MineCMD，只有在单行上有多个命令时才需要分号（;）。假设您没有任何东西保持命令打开状态（点、引号、双引号、左括号等），那么换行符被视为命令的结束。我不确定在旧浏览器中是否如此，但在最近版本的Chrome和Firefox中已经被证明是正确的。（我不使用IE或Edge，所以无法对它们进行评估） - Wayne
@Wayne 有一定的正确性；在某些边缘情况下，ASI会导致意外（大多数人都没有预料到）的行为，特别是当你返回一个匿名对象时。 - Dave Newton
47

我不明白通过Javascript更改页面标题如何有助于SEO。大多数（或全部）搜索机器人不会运行Javascript，仅会读取最初加载的标记的标题。

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

3
同意 - 这对SEO毫无帮助，因为网络爬虫不会对您的JS做任何事情。 - annakata
也许他们只想要一个标题，但希望在 Stack Exchange 上获得所有内容，然后在页面上有更友好的数据组织方式？ - Kev
那么，他们就非常违背整个SEO的概念。 - annakata
4
虽然这不利于SEO，但对于用户的书签等来说很好，例如在URL中哈希值发生变化时更新页面标题，或者在使用HTML5/JSwindow.history时，除了URL之外，更新页面标题也是很好的。 - rmorse
请参阅谷歌官方文档，了解如何爬取JavaScript应用程序：https://developers.google.com/webmasters/ajax-crawling/ - codewizard
显示剩余2条评论
22

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

可疑的方法

在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，请在尝试设置或获取标题之前检查文档是否已加载，否则你将会引发未定义行为（这里有龙），这本身就是一个可怕的概念。这可能会通过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);
});
1
我找到了描述方法1警告的完美词语：“未定义行为”。 - Braden Best
1
这篇文章绝对应该被踩。方法1是未定义行为，就像上面提到的那样（无论多少免责声明都不能证明它的合理性）；另外，document.querySelector.apply，你认真的吗？ - Andrey Tarantsov
4
@AndreyTarantsov无论如何都不能通过免责声明来证明提及它是合理的吗？那提一下它让人们知道不该做什么呢？我们从错误中学习，所以告诉别人不要提及某些错误的东西是错误的建议。此外，这是一个非常旧的答案（实际上是我在这个网站上写的最初的答案之一），所以“认真吗？”这句话是不必要的。你不可能知道我在过去三年里的知识和经验有哪些变化。 - Braden Best
13
11

在JavaScript中，使用document.title可以实现此功能，但是这如何有助于SEO呢？搜索引擎爬虫通常不会在遍历页面时执行JavaScript代码。

4

您需要使用新标题重新提供页面，以便任何网络爬虫注意到更改。通过JavaScript执行此操作只有对人类读者有益处，网络爬虫不会执行该代码。

3
也许你可以将所有选项卡的标题都加载到一个字符串中，然后一旦加载其中一个选项卡，就通过JavaScript更改标题。
例如：首先将您的标题设置为
my app | description | contact | about us |

一旦您加载选项卡之一，请运行：

document.title = "my app | tab title";
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接