我有一个网页,实现了一组选项卡每个显示不同的内容。单击选项卡不会刷新页面,而是隐藏/取消隐藏客户端的内容。
现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。这可能吗?有人能建议一个解决方案,通过javascript动态改变页面标题,而不重新加载页面?
我有一个网页,实现了一组选项卡每个显示不同的内容。单击选项卡不会刷新页面,而是隐藏/取消隐藏客户端的内容。
现在需要根据页面上选择的选项卡更改页面标题(出于SEO原因)。这可能吗?有人能建议一个解决方案,通过javascript动态改变页面标题,而不重新加载页面?
当前回答
对于那些寻找它的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'));
其他回答
代码是 文档。Title = 'test'
也许你可以在一个字符串中加载你的标题上所有的选项卡标题,然后一旦你加载其中一个选项卡,通过javascript改变标题
首先把你的标题设置为
my app | description | contact | about us |
一旦你加载一个标签运行:
document.title = "my app | tab title";
想到的一种方法,可能有助于搜索引擎优化,仍然有你的标签页,因为他们将使用命名锚对应于每个标签,如:
http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2等。
您需要服务器端处理来解析url,并在浏览器呈现页面时设置初始页面标题。我还会把这个标签设置为“活动”标签。一旦页面被加载,一个实际的用户正在切换标签,你将使用javascript来改变文档。标题如其他用户所述。
为了让任何爬虫程序注意到这个变化,您必须用一个新的标题重新提供页面。通过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" );
?>