如何动态更改网页 Headers ？-Java 学习之路

429

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

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

18 回答

11

Update ：根据SearchEngineLand上的评论和参考，大多数网络抓取工具都会为更新的 Headers 编制索引 . 以下答案已过时 . 但代码仍然适用 .

你可以做类似的事情，document.title =“这是新的页面 Headers . ”;但这将完全打败SEO的目的 . 大多数抓取工具首先不会支持javascript，所以他们会将元素中的任何内容作为页面 Headers . 如果您希望这与大多数重要的抓取工具兼容，那么您将需要实际更改 Headers 标签本身，这将涉及重新加载页面（PHP等） . 如果您想以爬虫可以看到的方式更改页面 Headers ，那么您将无法解决这个问题 .

回复于 2024-05-04T22:57:25+08:00
1
我想从未来打招呼:)最近发生的事情：
- Google现在运行您网站上的javascript1
- 人们现在使用React.js，Ember和Angular之类的东西在页面上运行复杂的javascript任务，它仍然被Google1索引
- 你可以使用html5历史api（pushState，react-router，ember，angular），它允许你为你想要打开的每个标签创建单独的URL，Google会将其编入索引1
因此，要回答您的问题，您可以安全地从javascript更改 Headers 和其他元标记（如果您想支持非Google搜索引擎，还可以添加类似https://prerender.io的内容），只需将它们作为单独的网址进行访问（否则Google会如何知道那些是在搜索结果中显示的不同页面？） . 更改SEO相关标签（用户通过点击某些内容更改页面后）很简单：
```
if (document.title != newTitle) {
    document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);
```
只需确保在robots.txt中未阻止css和javascript，您就可以在Google网站站长工具中使用 Fetch as Google 服务 .

1：http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
回复于 2024-05-04T22:57:25+08:00
0

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

如果你想帮助SEO，那么你需要在后端更改页面 Headers 并提供不同版本的页面 .

回复于 2024-05-04T22:57:25+08:00
1

使用 document.title .

有关基本教程，请参阅this page .

回复于 2024-05-04T22:57:25+08:00
46

代码是
document.title = 'test'

回复于 2024-05-04T22:57:25+08:00
627
您可以通过多种方式更改 Headers ，主要有两种，如下所示：

可疑方法

在HTML中添加 Headers 标记（例如 <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 = ... ，它会惹恼其他开发人员 .

你想要的是后一种方法 . 此属性是provided in the DOM Specification，专门用于更改 Headers 的名称 .

另请注意，如果您正在使用XUL，您可能需要在尝试设置或获取 Headers 之前检查文档是否已加载，否则您将调用 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);
});
```
回复于 2024-05-04T22:57:25+08:00
3

使用document.title就是如何在JavaScript中完成它，但是这应该如何帮助SEO呢？机器人通常不会在遍历页面时执行javascript代码 .

回复于 2024-05-04T22:57:25+08:00
3

DOM中的现代爬虫are able to parse dynamically-generated content，所以使用 document.title = ... 完全没问题 .

回复于 2024-05-04T22:57:25+08:00
10

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

回复于 2024-05-04T22:57:25+08:00
-1
也许你可以在一个字符串中加载你的 Headers 所有标签 Headers ，然后加载其中一个标签后更改 Headers 通过javascript

例如：首先设置你的头衔
```
my app | description | contact | about us |
```
一旦你加载其中一个标签运行：
```
document.title = "my app | tab title";
```
回复于 2024-05-04T22:57:25+08:00

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

回复于 2024-05-04T22:57:25+08:00

8

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

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

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

回复于 2024-05-04T22:57:25+08:00
0
你可以使用JavaScript . 一些机器人，包括谷歌，将为了SEO的利益执行JavaScript（在SERP中显示正确的 Headers ） .
```
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

唐't always assume a bot won' t执行JavaScript . http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google和其他搜索引擎知道索引的最佳结果是实际最终用户将在其浏览器中看到的结果，包括JavaScript .
回复于 2024-05-04T22:57:25+08:00
27
由于搜索引擎会忽略大多数javascript，因此您需要将其设置为搜索引擎可以使用选项卡进行爬网，而无需使用Ajax . 使每个选项卡成为带有href的链接，该href在选定的选项卡的情况下加载整个页面 . 然后页面可以在标签中包含该 Headers .

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

要查看大多数搜索引擎看到的页面，请在浏览器中关闭Javascript，然后尝试将其设置为单击选项卡将加载选中该选项卡的页面和正确的 Headers .

如果您通过ajax加载并且想要仅使用Javascript动态更改页面 Headers ，那么执行：
```
document.title = 'Put the new title here';
```
但是，搜索引擎不会在javascript中看到此更改 .
回复于 2024-05-04T22:57:25+08:00

使用 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>

回复于 2024-05-04T22:57:25+08:00

31

但为了获得SEO的合适

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

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

回复于 2024-05-04T22:57:25+08:00
125

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

现在，如果你是通过JavaScript更改 Headers 只是为了它的地狱，那么你不应该这样做 .

回复于 2024-05-04T22:57:25+08:00
1
最简单的方法是从index.html中删除 <title> 标记，并包含
```
<head>
<title> Website - The page </title></head>
```
在网页的每个页面中 . 蜘蛛会找到这个并将在搜索结果中显示:)
回复于 2024-05-04T22:57:25+08:00

如何动态更改网页 Headers ？

18 回答

可疑方法

明显正确的方法

说到.innerHTML

相关问题