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

本文翻译自:How to dynamically change a web page's title?

I have a webpage that implements a set of tabs each showing different content. 我有一个网页,实现了一组标签,每个标签显示不同的内容。 The tab clicks do not refresh the page but hide/unhide contents at the client side. 选项卡单击不刷新页面,但隐藏/取消隐藏客户端的内容。

Now there is a requirement to change the page title according to the tab selected on the page ( for SEO reasons ). 现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。 Is this possible? 这可能吗? Can someone suggest a solution to dynamically alter the page title via javascript without reloading the page? 有人可以建议一个解决方案,通过javascript动态改变页面标题,而无需重新加载页面?


#1楼

参考:https://stackoom.com/question/1jYN/如何动态更改网页的标题


#2楼

I just want to add something here: changing the title via JavaScript is actually useful if you're updating a database via AJAX, so then the title changes without you having to refresh the page. 我只想在这里添加一些内容:如果您通过AJAX更新数据库,通过JavaScript更改标题实际上非常有用,因此标题会更改,而无需刷新页面。 The title actually changes via your server side scripting language, but having it change via JavaScript is just a usability and UI thing that makes the user experience more enjoyable and fluid. 标题实际上是通过您的服务器端脚本语言改变的,但通过JavaScript进行更改只是一个可用性和UI的东西,使用户体验更加愉快和流畅。

Now, if you're changing the title via JavaScript just for the hell of it, then you should not be doing that. 现在,如果你是通过JavaScript改变标题只是为了它的地狱,那么你不应该这样做。


#3楼

The simplest way is to delete <title> tag from index.html, and include 最简单的方法是从index.html删除<title>标签,并包含

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

in every page in the web. 在网页的每个页面中。 Spiders will find this and will be shown in search results :) 蜘蛛会找到这个并将在搜索结果中显示:)


#4楼

Since search engines ignore most javascript, you will need to make it so that search engines can crawl using the tabs without using Ajax. 由于搜索引擎会忽略大多数javascript,因此您需要将其设置为搜索引擎可以使用选项卡进行爬网,而无需使用Ajax。 Make each tab a link with an href that loads the entire page with that tab selected. 使每个选项卡成为一个带有href的链接,该href将选中该选项卡来加载整个页面。 Then the page can have that title in the tag. 然后页面可以在标签中具有该标题。

The onclick event handler can still load the pages via ajax for human viewers. onclick事件处理程序仍然可以通过ajax为人类查看器加载页面。

To see the pages as most search engines see them, turn off Javascript in your browser, and try to make it so that clicking the tabs will load the page with that tab selected and the correct title. 要在大多数搜索引擎看到这些页面时看到这些页面,请在浏览器中关闭Javascript,然后尝试将其设置为单击选项卡将加载选中该选项卡的页面和正确的标题。

If you are loading via ajax and you want to dynamically change the page title with just Javascript, then do: 如果您通过ajax加载并且想要仅使用Javascript动态更改页面标题,请执行以下操作:

document.title = 'Put the new title here';

However, search engines will not see this change made in javascript. 但是,搜索引擎不会在javascript中看到此更改。


#5楼

You can use JavaScript. 你可以使用JavaScript。 Some bots, including Google, will execute the JavaScript for the benefit of SEO (showing the correct title in the SERP). 一些机器人,包括谷歌,将为了SEO的利益执行JavaScript(在SERP中显示正确的标题)。

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

However, this is more complex since you are showing and hiding tabs without refreshing the page or changing the URL. 但是,这更复杂,因为您在不刷新页面或更改URL的情况下显示和隐藏选项卡。 Maybe adding an anchor will help as stated by others. 也许添加一个锚将有助于其他人说明。 I may need to retract my answer. 我可能需要收回我的答案。

Articles showing positive results: 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 文章显示积极成果: 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

Don't always assume a bot won't execute JavaScript. 不要总是假设机器人不会执行JavaScript。 http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google and other search engines know that the best results to index are the results that the actual end user will see in their browser, including JavaScript. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google和其他搜索引擎知道索引的最佳结果是实际最终用户将在其浏览器中看到的结果,包括JavaScript。


#6楼

I want to say hello from the future :) Things that happened recently: 我想从未来打招呼:)最近发生的事情:

  1. Google now runs javascript that is on your website 1 Google现在运行您网站上的javascript 1
  2. People now use things like React.js, Ember and Angular to run complex javascript tasks on the page and it's still getting indexed by Google 1 人们现在使用像React.js,Ember和Angular这样的东西在页面上运行复杂的javascript任务,它仍然被Google索引1
  3. you can use html5 history api (pushState, react-router, ember, angular) that allows you to do things like have separate urls for each tab you want to open and Google will index that 1 你可以使用html5历史api(pushState,react-router,ember,angular),它允许你为你想要打开的每个标签创建单独的URL,Google会将其编入索引1

So to answer your question you can safely change title and other meta tags from javascript (you can also add something like https://prerender.io if you want to support non-Google search engines), just make them accessible as separate urls (otherwise how Google would know that those are different pages to show in search results?). 因此,要回答您的问题,您可以安全地从javascript更改标题和其他元标记(如果您想支持非Google搜索引擎,您还可以添加类似https://prerender.io的内容 ),只需将它们作为单独的网址进行访问(否则Google会如何知道这些是在搜索结果中显示的不同页面?)。 Changing SEO related tags (after user has changed page by clicking on something) is simple: 更改SEO相关标签(用户通过点击某些内容更改页面后)很简单:

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

Just make sure that css and javascript is not blocked in robots.txt, you can use Fetch as Google service in Google Webmaster Tools. 只需确保在robots.txt中未阻止css和javascript,您就可以在Google网站站长工具中使用Google抓取方式作为Google服务。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值