我有一个网页,实现了一组选项卡每个显示不同的内容。单击选项卡不会刷新页面,而是隐藏/取消隐藏客户端的内容。
现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。这可能吗?有人能建议一个解决方案,通过javascript动态改变页面标题,而不重新加载页面?
我有一个网页,实现了一组选项卡每个显示不同的内容。单击选项卡不会刷新页面,而是隐藏/取消隐藏客户端的内容。
现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。这可能吗?有人能建议一个解决方案,通过javascript动态改变页面标题,而不重新加载页面?
当前回答
有很多方法可以改变标题,主要有两种:
可疑的方法
在HTML中放入title标签(例如<title>Hello</title>),然后在javascript中:
let title_el = document.querySelector("title");
if(title_el)
title_el.innerHTML = "World";
明显正确的方法
最简单的方法是实际使用文档对象模型(DOM)提供的方法
document.title = "Hello World";
前一种方法通常用于更改文档正文中的标记。使用这种方法来修改元数据标签,就像在头部(如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);
});
其他回答
更新:根据SearchEngineLand上的评论和参考 大多数网络爬虫将索引更新的标题。下面的答案是过时的,但代码仍然适用。
You can just do something like, document.title = "This is the new page title.";, but that would totally defeat the purpose of SEO. Most crawlers aren't going to support javascript in the first place, so they will take whatever is in the element as the page title. If you want this to be compatible with most of the important crawlers, you're going to need to actually change the title tag itself, which would involve reloading the page (PHP, or the like). You're not going to be able to get around that, if you want to change the page title in a way that a crawler can see.
但是为了得到SEO的配合
当页面发生变化时,你需要重新加载页面,这样搜索引擎才能看到不同的标题等等。
因此,确保页面重新加载工作,然后再添加文档。标题修改
我只是想在这里添加一些东西:如果您通过AJAX更新数据库,通过JavaScript更改标题实际上是有用的,因此标题更改而无需刷新页面。标题实际上是通过你的服务器端脚本语言改变的,但通过JavaScript改变它只是一个可用性和UI方面的事情,让用户体验更加愉快和流畅。
现在,如果你只是为了好玩而通过JavaScript更改标题,那么你不应该这样做。
有很多方法可以改变标题,主要有两种:
可疑的方法
在HTML中放入title标签(例如<title>Hello</title>),然后在javascript中:
let title_el = document.querySelector("title");
if(title_el)
title_el.innerHTML = "World";
明显正确的方法
最简单的方法是实际使用文档对象模型(DOM)提供的方法
document.title = "Hello World";
前一种方法通常用于更改文档正文中的标记。使用这种方法来修改元数据标签,就像在头部(如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);
});
为了让任何爬虫程序注意到这个变化,您必须用一个新的标题重新提供页面。通过javascript这样做只会让人类读者受益,爬虫不会执行这些代码。