Question

我有一个网页，它实现了一组标签，每个标签都显示不同的内容。选项卡单击不刷新页面，但隐藏/取消隐藏客户端的内容。

现在需要根据页面上选择的标签更改页面标题（出于SEO原因）。这可能吗？有人可以建议一个解决方案，通过javascript动态改变页面标题，而无需重新加载页面吗？

Answer 1

更新：根据SearchEngineLand上的评论和参考大多数网络抓取工具将索引更新的标题。下面的答案已经过时，但代码仍然适用。

你可以做一些像document.title = "This is the new page title.";这样的事情，但这完全会破坏SEO的目的。最   爬虫不会首先支持javascript，所以   他们将把元素中的任何内容作为页面标题。

如果您希望它与大多数重要的抓取工具兼容，   你需要实际更改标题标签本身   将涉及重新加载页面（PHP等）。你不会去   如果你想改变页面标题，能够解决这个问题   爬虫可以看到的方式。

Answer 2

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

Google现在运行您网站上的javascript ¹
人们现在使用React.js，Ember和Angular之类的东西在页面上运行复杂的javascript任务，但它仍然被Google索引¹
您可以使用html5历史记录api（pushState，react-router，ember，angular），它允许您为要打开的每个标签创建单独的网址，Google将索引¹

因此，为了回答您的问题，您可以安全地从javascript更改标题和其他元标记（如果您想支持非Google搜索引擎，还可以添加https://prerender.io之类的内容），只需将它们作为单独的网址进行访问即可（否则Google会如何知道这些是在搜索结果中显示的不同页面？）。更改SEO相关标签（用户通过点击某些内容更改页面后）很简单：

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

只需确保在robots.txt中未阻止css和javascript，您就可以在Google网站站长工具中使用抓取Google 服务。

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

Answer 3

我看不出如何通过Javascript更改页面标题将有助于SEO。大多数（或所有）搜索机器人不运行Javascript，只会读取最初加载的标记作为标记。

如果您想帮助SEO，那么您需要更改后端的页面标题并提供不同版本的页面。

Answer 4

使用document.title。

请参阅this page以获取基本教程。

Answer 5

代码是
document.title = 'test'

Answer 6

有很多方法可以改变标题，主要的两种方式是这样的：

可疑方法

在HTML中添加标题标记（例如<title>Hello</title>），然后在javascript：

中

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

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

明显正确的方法

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

document.title = "Hello World";

前一种方法通常用于修改文档 body 中的标记。使用这种方法来修改像头部中那样的元数据标签（如title）是最好的问题，不是惯用的，不是很好的风格，甚至可能不是可移植的。但是，您可以确定的一点是，如果他们在维护的代码中看到title.innerHTML = ...，它会惹恼其他开发人员。

您希望使用的是后一种方法。此属性为provided in the DOM Specification，专门用于更改标题的目的。

另请注意，如果您正在使用XUL，您可能需要在尝试设置或获取标题之前检查文档是否已加载，否则您将调用undefined behavior（此处为龙），这是一个可怕的概念本身。这可能会或可能不会通过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);
});

Answer 7

使用document.title是如何在JavaScript中实现它的，但是这应该如何帮助SEO呢？机器人通常不会在浏览页面时执行javascript代码。

Answer 8

DOM中的现代抓取工具are able to parse dynamically-generated content，因此使用document.title = ...完全没问题。

Answer 9

您必须使用新标题重新提供该页面，以便任何抓取工具都能注意到更改。通过javascript进行操作只会使人类读者受益，爬虫不会执行该代码。

Answer 10

也许你可以在一个字符串中加载你的标题所有标签标题，然后加载其中一个标签后通过javascript更改标题

例如：首先将您的标题设为

my app | description | contact | about us |

加载其中一个标签后运行：

document.title = "my app | tab title";

Answer 11

一种可能有助于搜索引擎优化的方法，仍然可以使用与每个选项卡对应的命名锚点，如下所示：

http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.

当浏览器呈现页面时，您需要让服务器端处理来解析URL并设置初始页面标题。我也会继续将该标签设为“活动”标签。加载页面并且实际用户正在切换标签页时，您将使用javascript更改document.title，如其他用户所述。

Answer 12

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

Answer 13

使用document.title。它对大多数事情都很有用，但它会破坏你网站上的搜索引擎优化。

示例：

document.write("title - " + document.title + "<br>");
document.title = "New title here!";
// Notice: this will defeat purpose of SEO. Not useful for SEO-friendly sites.
document.write("title - " + document.title + "<br>");

body {
  font-family: Consolas, 'Courier New', monospace;
}

<!DOCTYPE html>
<html>
  <head><title>Old title</title></head>
  <body><p>
    Lorem ipsum dolor sit amet, at movet detraxit mediocritatem eam, nam iusto abhorreant ne. Ei pro          debet adolescens voluptaria, eu minim scaevola conceptam vel. Vim ea torquatos constituto                complectitur, usu eu civibus insolens eleifend. Ex ubique quaerendum his.

  </p></body>
</html>

Answer 14

由于搜索引擎会忽略大多数javascript，因此您需要将其设置为搜索引擎可以使用选项卡进行爬网，而无需使用Ajax。使每个选项卡成为一个带有href的链接，该href将选中该选项卡来加载整个页面。然后页面可以在标签中包含该标题。

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

要查看大多数搜索引擎看到的页面，请在浏览器中关闭Javascript，然后尝试进行操作，以便单击选项卡将加载选中该选项卡的页面和正确的标题。

如果您通过ajax加载并且想要仅使用Javascript动态更改页面标题，请执行以下操作：

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

但是，搜索引擎不会在javascript中看到此更改。

Answer 15

您可以使用JavaScript。一些机器人，包括谷歌，将为了SEO的利益执行JavaScript（在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

不要总是假设机器人不会执行JavaScript。 http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google和其他搜索引擎都知道索引的最佳结果是实际最终用户将在其浏览器中看到的结果，包括JavaScript。

Answer 16

我只想在这里添加一些内容：如果您通过AJAX更新数据库，通过JavaScript更改标题实际上非常有用，因此标题会更改，而无需刷新页面。标题实际上是通过您的服务器端脚本语言进行更改，但通过JavaScript进行更改只是一种可用性和UI事物，使用户体验更加愉快和流畅。

现在，如果您正在通过JavaScript更改标题只是为了它的地狱，那么您不应该这样做。

Answer 17

Google提到所有渲染的js文件，但实际上，我已经失去了我的标题和Reactjs在this website上提供的另一个meta标签，实际上失去了我在Google上的位置！我进行了很多搜索，但似乎所有页面都必须预先渲染或使用SSR（服务器端渲染）才能拥有SEO友好协议！
它扩展到Reactjs，Angularjs等。
简而言之，如果所有浏览器都无法对Google浏览器上具有查看页面源的每个页面进行索引，那么它可能不是Google可以索引的索引，而是其他机器人都可以跳过索引的索引！

Answer 18

但是为了获得SEO适合

当页面发生变化时，您需要重新加载页面，以便搜索引擎看到不同的标题等。

因此，请确保首先重新加载页面，然后添加document.title changes

Answer 19

最简单的方法是从index.html中删除<title>标记，并包含

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

在网页的每个页面中。蜘蛛会找到这个并将在搜索结果中显示：）

Answer 20

我使用单独的标头并使用 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" );
?>

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

20 个答案:

可疑方法

明显正确的方法

说到`.innerHTML`

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

20 个答案:

可疑方法

明显正确的方法

说到.innerHTML

说到`.innerHTML`