我有一个网页,实现了一组选项卡每个显示不同的内容。单击选项卡不会刷新页面,而是隐藏/取消隐藏客户端的内容。
现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。这可能吗?有人能建议一个解决方案,通过javascript动态改变页面标题,而不重新加载页面?
我有一个网页,实现了一组选项卡每个显示不同的内容。单击选项卡不会刷新页面,而是隐藏/取消隐藏客户端的内容。
现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。这可能吗?有人能建议一个解决方案,通过javascript动态改变页面标题,而不重新加载页面?
当前回答
现代爬虫程序能够解析DOM中动态生成的内容,因此使用document。标题=…完全没问题。
其他回答
更新:根据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.
你可以使用JavaScript。一些机器人,包括谷歌,将执行JavaScript以获得SEO的好处(在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
不要总是假设bot不会执行JavaScript。 http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 谷歌和其他搜索引擎都知道,索引的最佳结果是实际终端用户将在浏览器中看到的结果,包括JavaScript。
我使用一个单独的头,并包括它使用php,在头我使用:
<?php
if (!isset($title)){
$title = "Your Title";
}
else {
$title = $title;
}
?>
<head>
<title><?php echo $title; ?></title>
然后在每一页我使用:
<?php
$title = "Your Title - Page";
include( "./header.php" );
?>
代码是 文档。Title = 'test'
对于那些寻找它的NPM版本的人,有一个完整的库:
npm install --save react-document-meta
import React from 'react';
import DocumentMeta from 'react-document-meta';
class Example extends React.Component {
render() {
const meta = {
title: 'Some Meta Title',
description: 'I am a description, and I can create multiple tags',
canonical: 'http://example.com/path/to/page',
meta: {
charset: 'utf-8',
name: {
keywords: 'react,meta,document,html,tags'
}
}
};
return (
<div>
<DocumentMeta {...meta} />
<h1>Hello World!</h1>
</div>
);
}
}
React.render(<Example />, document.getElementById('root'));