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

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


当前回答

现代爬虫程序能够解析DOM中动态生成的内容,因此使用document。标题=…完全没问题。

其他回答

有很多方法可以改变标题,主要有两种:

可疑的方法

在HTML中放入title标签(例如<title>Hello</title>),然后在javascript中:

let title_el = document.querySelector("title");

if(title_el)
    title_el.innerHTML = "World";

明显正确的方法

最简单的方法是实际使用文档对象模型(DOM)提供的方法

document.title = "Hello World";

前一种方法通常用于更改文档正文中的标记。使用这种方法来修改元数据标签,就像在头部(如title)中发现的那样,这是一种值得怀疑的做法,不是惯用的,不是很好的风格,甚至可能无法移植。但你可以肯定的一点是,如果其他开发者看到你的标题,他们会很恼火。innerHTML =…他们维护的代码。

你想要的是后一种方法。这个属性是在DOM规范中提供的,顾名思义,专门用于更改标题。

还要注意,如果使用XUL,可能希望在尝试设置或获取标题之前检查文档是否已加载,否则将调用未定义的行为(这里是龙),这本身就是一个可怕的概念。这可以通过JavaScript实现,也可以不实现,因为DOM上的文档不一定属于JavaScript。但是XUL是完全不同的东西,所以我离题了。

说到.innerHTML

要记住的一些好建议是,使用. innerhtml通常是草率的。请改用appendChild。

虽然在两种情况下,我仍然发现.innerHTML是有用的,包括插入纯文本到一个小元素…

label.innerHTML = "Hello World";
// as opposed to... 
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
    let el = document.createElement("span");
    el.className = "label";
    el.innerHTML = label_text;
    return el;
}());

...清理一个集装箱…

container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
    container.removeChild(child);
});

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

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

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

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

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

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

但是,搜索引擎不会看到javascript中所做的这个更改。

使用document.title。

请参阅本页的基本教程。

我想从未来向你问好:)最近发生的事情:

谷歌现在运行javascript,是在你的网站1 人们现在使用React.js、Ember和Angular在页面上运行复杂的javascript任务,而且它仍然被Google1索引 你可以使用html5历史api (pushState, react-router, ember, angular),它允许你做一些事情,比如为你想打开的每个选项卡设置单独的url,谷歌将索引that1

所以为了回答你的问题,你可以安全地从javascript中更改标题和其他元标签(如果你想支持非谷歌搜索引擎,你也可以添加一些像https://prerender.io这样的东西),只是让它们作为单独的url访问(否则谷歌如何知道这些是要在搜索结果中显示的不同页面?)更改SEO相关标签(在用户通过点击更改页面后)很简单:

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

只要确保css和javascript没有在robots.txt中被阻止,你可以在谷歌网站管理员工具中使用Fetch作为谷歌服务。

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