如何动态地改变一个网页的标题?

小开

代码为
# EYZ0 < / p >

小开

使用# EYZ0。

请参阅这个页面以获得基本教程。

小开

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

如果你想帮助SEO，那么你将需要在后端改变页面标题，并服务于不同版本的页面。

小开

最佳答案

更新:根据SearchEngineLand的评论和参考大多数网络爬虫将索引更新的标题。下面的答案是过时的，但代码仍然适用

你可以这样做，document。title = "这是新的，但这完全违背了SEO的目的。大多数爬虫程序一开始就不支持javascript，所以它们将以元素中的任何内容作为页面标题
如果你想让它与大多数重要的爬虫兼容，你需要改变title标签本身将涉及重新加载页面(PHP或类似程序)。你不能去为了解决这个问题，如果你想改变页面标题一种爬虫可以看到的方式。

小开

使用文档。标题是如何在JavaScript中完成它，但这应该如何协助SEO?机器人通常不会在遍历页面时执行javascript代码。

小开

但是为了得到SEO的配合

当页面发生变化时，你需要重新加载页面，这样搜索引擎才能看到不同的标题等等。

因此，确保页面重新加载工作，然后再添加文档。标题修改

小开

为了让任何爬虫程序注意到这个变化，您必须用一个新的标题重新提供页面。通过javascript这样做只会让人类读者受益，爬虫不会执行这些代码。

小开

想到的一种方法，可能有助于搜索引擎优化，仍然有你的标签页，因为他们将使用命名锚对应于每个标签，如:

# EYZ0

您需要服务器端处理来解析url，并在浏览器呈现页面时设置初始页面标题。我还会把这个标签设置为“活动”标签。一旦页面被加载，实际用户正在切换标签，您将使用javascript更改document.title，因为其他用户已经声明。

小开

也许你可以在一个字符串中加载你的标题上所有的选项卡标题，然后一旦你加载其中一个选项卡，通过javascript改变标题

首先把你的标题设置为

my app | description | contact | about us |

一旦你加载一个标签运行:

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

小开

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

可疑的方法

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

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


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

明显正确的方法

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

document.title = "Hello World";

前一种方法通常用于更改文档中身体中的标记。使用这种方法来修改元数据标签，就像在头部发现的那些标签(如title)，这是值得怀疑的做法，不是惯用的，不是很好的风格，甚至可能无法移植。不过，有一件事是可以肯定的，那就是如果其他开发人员在他们维护的代码中看到title.innerHTML = ...，他们会很恼火。

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

还要注意，如果使用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);
});

小开

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

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

小开

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

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

在网络的每一页。蜘蛛会发现这一点，并将显示在搜索结果:)

小开

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

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

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

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

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

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

小开

你可以使用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/ # EYZ0 < / p > 不要总是假设bot不会执行JavaScript。 http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 谷歌和其他搜索引擎知道索引的最佳结果是实际最终用户将在他们的浏览器中看到的结果，包括JavaScript

小开

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

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

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

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

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

1: # EYZ0

小开

现代爬虫是否能够解析动态生成的内容在DOM中，所以使用document.title = ...是完全可以的。

小开

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

小开

使用# EYZ0。它对大多数事情都很有用，但它会破坏你网站上的SEO。

例子:

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>

小开

谷歌提到了所有的js文件渲染，但在现实中，我已经失去了我的标题和另一个元标签，由Reactjs在这个网站上提供，实际上失去了我在谷歌上的位置!我已经搜索了很多，但似乎所有的页面都必须预先渲染或使用SSR(服务器端渲染)有他们的seo友好的协议!
它扩展为Reactjs, Angularjs等简而言之，在浏览器上有查看页面来源的每个页面都由所有机器人索引，如果不是谷歌可能可以索引，但其他人跳过索引!< / p >

小开

我使用一个单独的头，并包括它使用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" );
?>

如何动态地改变一个网页的标题?

可疑的方法

明显正确的方法

说到.innerHTML

说到`.innerHTML`