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

IT技术 javascript html
2021-02-05 00:14:19

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

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

6个回答

更新:根据SearchEngineLand上的评论和参考, 大多数网络爬虫都会索引更新的标题。以下答案已过时,但代码仍然适用。

你可以做类似的事情document.title = "This is the new page title.";,但这会完全违背搜索引擎优化的目的。大多数爬虫一开始就不会支持 javascript,因此它们会将元素中的任何内容作为页面标题。

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

这并不完全正确。Google 确实将 javascript 更改索引到 document.title。searchengineland.com/...
2021-03-17 00:14:19
@CpnCrunch 是正确的。这是 2016 年。 SEO 发生了很大变化,谷歌和其他搜索引擎正在适应单页应用程序和 javascript。
2021-03-18 00:14:19
@CpnCrunch 是正确的!Google 会将 JavaScript 更改的标题编入索引。我没有在其他搜索机器人上测试过。不要总是假设机器人不执行 JavaScript。我在下面创建了一个新答案,然后意识到在不更改 URL 的情况下简单地显示和隐藏选项卡会使这变得更加复杂。
2021-03-25 00:14:19
如果您已经在更新页面时使用 html5 的 pushState 来更改历史记录,为什么不同时更新标题。如果设置正确,爬虫仍然会得到正确的结果,并且您仍然希望用户看到与他所在的视图相匹配的标题。对于大多数网络应用程序等,继续使用它似乎是一个很好的解决方案。我可能忽略了一个不同的功能?
2021-04-03 00:14:19
所以这意味着这个答案已经过时了。StackOverflow 现在应该为答案添加“过时”功能:D
2021-04-04 00:14:19

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

  1. Google 现在运行您网站上的 javascript 1
  2. 人们现在使用 React.js、Ember 和 Angular 之类的东西在页面上运行复杂的 JavaScript 任务,但它仍然被 Google 索引1
  3. 您可以使用 html5 历史 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 Webmaster Tools 中使用Fetch as Google服务。

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

向未来问好!想问问你为什么还在那里使用 jQuery 以及这个比较需要什么 ( document.title != newTitle)
2021-03-12 00:14:19
请注意,这是 2016 年的未来 :) 如果在页面之间导航时标题没有改变,我想比较是否存在,我想描述可能保持不变,但它只是作为简短的演示
2021-03-23 00:14:19

使用document.title.

有关基本教程,请参阅此页面

好吧,当我在 Google 中输入“javascript change title”时,这个话题首先出现在我的脑海中。我正在开发一个网络应用程序,所以我不关心 SEO。
2021-03-13 00:14:19
@AdrianoVaroliPiazza 它可​​能没用,但它有效并且会帮助来自搜索引擎的人。如果它是正确答案,则无需投票!
2021-03-20 00:14:19
我希望蜘蛛不要使用 javascript。发送谷歌恶意代码的好方法?
2021-03-23 00:14:19
喜欢这个链接,它有 netscape navigator 截图 :)
2021-03-29 00:14:19
@its_notjack 不是。这可能是另一个问题的正确答案。
2021-04-04 00:14:19

我看不出通过 Javascript 更改页面标题将如何帮助 SEO。大多数(或全部)搜索机器人不运行 Javascript,只会读取作为标记的最初加载的标题。

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

也许他们只想要一个标题而不是 SE 上的所有内容,但是一旦您在页面上,就可以更友好地组织数据?
2021-03-17 00:14:19
那么他们非常反对搜索引擎优化的整个概念
2021-03-17 00:14:19
同意 - 这根本不会帮助 SEO,因为爬虫不会对你的 JS 做任何事情
2021-03-20 00:14:19
请参阅谷歌自己的关于抓取 javascript 应用程序的文档developers.google.com/webmasters/ajax-crawling
2021-04-07 00:14:19
是的,这对 SEO 不是很好,但在添加书签等时对最终用户有好处,例如,当 URL 中的散列更改时window.history更新页面标题,或者当使用 HTML5/JS 时,它可以很好地更新页面标题和 URL
2021-04-10 00:14:19

代码是
document.title = 'test'

@AdrianoVaroliPiazza 不需要去 -1,但是不需要 SEO 的应用程序或实际使用某些 HTML5 功能的网站呢。我的意思是,如果您正确设置您的网站并使用 ajax 并为非 js/爬虫提供后备,这只会加速用户体验并保持匹配的标题可见。对我来说似乎是个好主意。
2021-03-13 00:14:19
@MineCMD,只有在一行中有多个命令时才需要分号 (;)。假设您没有打开命令的内容(点、引号、双引号、左括号等),那么换行符被认为是命令的结尾。我不确定这在旧浏览器的情况下有多真实,但在 Chrome 和 Firefox 的最新版本中已被证明是正确的。(我不使用 IE 或 Edge,所以无法对它们说)
2021-03-20 00:14:19
我使用 top.document.title 来引用窗口本身(我有框架集......)
2021-03-29 00:14:19
@Wayne 有点正确;在某些边缘情况下,ASI 会导致意外(大多数)行为,特别是当您返回匿名对象时。
2021-03-30 00:14:19
不需要;在最后加一个吗?
2021-04-05 00:14:19