如何动态更改网页的标题？

我有一个网页,实现了一组标签,每个标签显示不同的内容.选项卡单击不刷新页面,但隐藏/取消隐藏客户端的内容.

现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因).这可能吗？有人可以建议一个解决方案,通过javascript动态改变页面标题,而无需重新加载页面？

1> Alex Fort..：

---

更新:根据SearchEngineL上的评论和参考, 大多数网络抓取工具将索引更新的标题.以下答案已过时,但代码仍然适用.

你可以做一些像,document.title = "This is the new page title.";但这完全会破坏SEO的目的.大多数抓取工具首先不会支持javascript,所以他们会将元素中的任何内容作为页面标题.

如果您希望它与大多数重要的抓取工具兼容,那么您将需要实际更改标题标签本身,这将涉及重新加载页面(PHP等).如果您想以爬虫可以看到的方式更改页面标题,那么您将无法解决这个问题.

---

所以这意味着这个答案已经过时了.StackOverflow现在应该为答案添加"过时"功能:D

---

如果您在更新页面时使用html5的pushState来更改历史记录,为什么不更新标题呢？如果设置正确,爬虫仍会获得正确的结果,您仍然希望用户看到与他所在视图相匹配的标题.对于大多数网络应用程序等,使用它似乎是一个很好的解决方案.我可能忽略了一个不同的功能呢？

---

这不是真的.谷歌确实将javascript更改索引到document.title.见http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

---

@CpnCrunch是正确的.这是2016年.搜索引擎优化已经发生了很大变化,谷歌和其他搜索引擎正在适应单页应用和javascript.

---

@CpnCrunch是对的!谷歌将索引由JavaScript更改的标题.我没有在其他搜索机器人上测试过.不要总是假设机器人不执行JavaScript.我在下面创建了一个新的答案,然后意识到只是显示和隐藏选项卡而不更改URL会使这更复杂.

---

刚刚发现如果文档是空的,例如`document.write('')`,那么`document.title ='foo'`将不起作用,因为该文档不包含title元素.在上面的例子中,这对我有用:`document.write(' )中,然后在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);
});

---

@AndreyTarantsov没有多少免责声明会提到它吗？如何提及它让人们知道什么不该做？我们从错误中吸取教训,告诉别人不要提出错误的东西,这是一个糟糕的建议.此外,这是一个非常古老的答案(字面上我在这个网站上写的第一个答案之一),所以"认真？" 没必要.你不可能知道过去三年我的知识和经验发生了什么变化.

7> TheTXI..：

---

使用document.title是如何在JavaScript中完成它,但是这应该如何帮助SEO？机器人通常不会在遍历页面时执行javascript代码.

8> dimanyc..：

---

现代爬虫能够解析 DOM中动态生成的内容,因此使用document.title = ...完全正常.