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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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的内容),只需将它们作为单独的网址进行访问(否则Google会如何知道这些是在搜索结果中显示的不同页面？).更改SEO相关标签(用户通过点击某些内容更改页面后)很简单:

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

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

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

Answer 3

我看不出如何通过Javascript更改页面标题将有助于SEO.大多数(或所有)搜索机器人不运行Javascript,只会读取最初加载的标记,即标记.

如果您想帮助SEO,那么您需要更改后端的页面标题并提供不同版本的页面.

Answer 4

使用document.title.

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

Answer 5

代码是
document.title = 'test'

Answer 6

您可以通过多种方式更改标题,主要有两种,如下所示:

可疑方法

将标题标记放在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);
});

Answer 7

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

Answer 8

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