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

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


当前回答

我只是想在这里添加一些东西:如果您通过AJAX更新数据库,通过JavaScript更改标题实际上是有用的,因此标题更改而无需刷新页面。标题实际上是通过你的服务器端脚本语言改变的,但通过JavaScript改变它只是一个可用性和UI方面的事情,让用户体验更加愉快和流畅。

现在,如果你只是为了好玩而通过JavaScript更改标题,那么你不应该这样做。

其他回答

代码是 文档。Title = 'test'

由于搜索引擎忽略了大多数javascript,因此您需要使搜索引擎能够使用标签而不使用Ajax进行抓取。使用href将每个选项卡设置为链接,以加载选中该选项卡的整个页面。然后页面可以在标签中包含该标题。

onclick事件处理程序仍然可以通过ajax为人类查看者加载页面。

要像大多数搜索引擎看到的那样查看页面,请关闭浏览器中的Javascript,并尝试使其具有这样的功能,即单击选项卡将加载选中的选项卡和正确的标题的页面。

如果你通过ajax加载,你想用Javascript动态地改变页面标题,那么做:

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

但是,搜索引擎不会看到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" );
?>

对于那些寻找它的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'));

使用document.title。

请参阅本页的基本教程。