如何动态更改网页标题?

JavaScript

乐米亚

2020-03-12

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

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

第1244篇《如何动态更改网页标题?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
小哥GOItachi 2020.03.12

但是为了获得SEO合适

当页面更改时,您需要重新加载页面,以便搜索引擎看到不同的标题等。

因此,请确保先进行页面重新加载,然后再添加document.title更改

伽罗神奇 2020.03.12

Google提到所有呈现的js文件,但实际上,我已经失去了我的标题和Reactac在此网站上提供的另一个meta标签,实际上失去了我在Google上的职位!我已经搜索了很多,但似乎所有页面都必须预先渲染或使用SSR(服务器端渲染)才能拥有SEO友好协议!
它将扩展为Reactjs,Angularjs等
。简而言之,所有在浏览器上具有查看页面源代码的页面都将被所有机器人索引,如果不是Google可以索引但其他机器人则可以跳过索引!

乐伽罗古一 2020.03.12

我只想在此处添加一些内容:如果要通过AJAX更新数据库,则通过JavaScript更改标题实际上很有用,因此标题无需更改页面即可更改。标题实际上是通过服务器端脚本语言更改的,但是通过JavaScript更改标题只是一种可用性和UI事情,它使用户体验更加愉悦和流畅。

现在,如果您只是通过JavaScript更改标题,那您就不应该这样做。

逆天古一 2020.03.12

最简单的方法是<title>从index.html 删除标记,并包含

<head>
<title> Website - The page </title></head>

在网络上的每个页面中。蜘蛛会找到并在搜索结果中显示:)

猪猪卡卡西 2020.03.12

也许您可以将所有选项卡的标题加载到一个字符串中,然后再加载其中一个选项卡,即可通过javascript更改标题

例如:首先将标题设置为

my app | description | contact | about us | 

加载选项卡之一后,运行:

document.title = "my app | tab title";
逆天米亚 2020.03.12

您可以使用JavaScript。包括Google在内的某些机器人将为了SEO的利益而执行JavaScript(在SERP中显示正确的标题)。

document.title = "Google will run this JS and show the title in the search results!";

但是,由于您在不刷新页面或更改URL的情况下显示和隐藏选项卡,因此这更加复杂。如其他人所述,也许添加锚点会有所帮助。我可能需要收回答案。

文章显示出积极的效果:http : //www.aukseo.co.uk/use-javascript-to-generate-seo-friendly-title-tags-1275/ http://www.ifinity.com.au/2012/10 / 04 / Changing_a_Page_Title_with_Javascript_to_update_a_Google_SERP_Entry

不要总是假设机器人不会执行JavaScript。 http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google和其他搜索引擎知道,要编制索引的最佳结果是实际最终用户将在浏览器中看到的结果,包括JavaScript。

GO阿飞 2020.03.12

现代的搜寻器能够解析 DOM中动态生成的内容,因此使用document.title = ...非常好。

梅蛋蛋 2020.03.12

想到的一种可能有助于SEO并使标签页保持原样的方法是使用与每个标签相对应的命名锚,如下所示:

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

您将需要服务器端处理以解析URL并在浏览器呈现页面时设置初始页面标题。我也将继续使该选项卡成为“活动”选项卡。页面加载完成后,实际用户切换了标签,您将使用javascript进行更改,document.title如其他用户所说。

西门西里 2020.03.12

您必须重新为页面提供新标题,以便所有抓取工具都能注意到更改。通过javascript进行操作只会使人类读者受益,爬虫不会执行该代码。

逆天泡芙 2020.03.12

更新:根据SearchEngineL上的注释和参考, 大多数网络爬虫将为更新的标题编制索引。下面的答案已过时,但是代码仍然适用。

您可以做类似的事情document.title = "This is the new page title.";,但这完全会违背SEO的目的。大多数抓取工具一开始就不会支持javascript,因此它们将使用元素中的任何内容作为页面标题。

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

GO小胖 2020.03.12

使用document.title是您在JavaScript中的实现方式,但这应如何帮助SEO?漫游器在遍历页面时通常不会执行javascript代码。

Harry蛋蛋Eva 2020.03.12

使用document.title

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

前端逆天前端 2020.03.12

我看不到通过Javascript更改页面标题将如何帮助SEO。大多数(或所有)搜索bot不运行Java脚本,而只会读取最初加载的标题(即标记)。

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android