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

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

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

当前回答

我想从未来向你问好:)最近发生的事情:

谷歌现在运行javascript，是在你的网站1 人们现在使用React.js、Ember和Angular在页面上运行复杂的javascript任务，而且它仍然被Google1索引你可以使用html5历史api (pushState, react-router, ember, angular)，它允许你做一些事情，比如为你想打开的每个选项卡设置单独的url，谷歌将索引that1

所以为了回答你的问题，你可以安全地从javascript中更改标题和其他元标签(如果你想支持非谷歌搜索引擎，你也可以添加一些像https://prerender.io这样的东西)，只是让它们作为单独的url访问(否则谷歌如何知道这些是要在搜索结果中显示的不同页面?)更改SEO相关标签(在用户通过点击更改页面后)很简单:

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

只要确保css和javascript没有在robots.txt中被阻止，你可以在谷歌网站管理员工具中使用Fetch作为谷歌服务。

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

2016-02-04 08:26:32

其他回答

想到的一种方法，可能有助于搜索引擎优化，仍然有你的标签页，因为他们将使用命名锚对应于每个标签，如:

http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2等。

您需要服务器端处理来解析url，并在浏览器呈现页面时设置初始页面标题。我还会把这个标签设置为“活动”标签。一旦页面被加载，一个实际的用户正在切换标签，你将使用javascript来改变文档。标题如其他用户所述。

2009-01-05 17:28:55

有很多方法可以改变标题，主要有两种:

可疑的方法

在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);
});

2012-03-26 18:41:56

使用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>

2018-04-15 08:23:24

现代爬虫程序能够解析DOM中动态生成的内容，因此使用document。标题=…完全没问题。

2016-06-04 19:18:40

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

如果你想帮助SEO，那么你将需要在后端改变页面标题，并服务于不同版本的页面。

2009-01-05 15:29:06

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

推荐文章

最新文章

标签