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

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


当前回答

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

其他回答

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

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

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

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

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

可疑的方法

在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);
});

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

但是为了得到SEO的配合

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

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