[英]How to dynamically change a web page's title?
我有一個網頁，它實現了一組選項卡，每個選項卡都顯示不同的內容。 選項卡單擊不會刷新頁面，而是在客戶端隱藏/取消隱藏內容。
現在需要根據頁面上選擇的選項卡更改頁面標題（出於 SEO 原因）。 這可能嗎？ 有人可以提出一個解決方案，通過 javascript 動態更改頁面標題而不重新加載頁面嗎？
更新：根據SearchEngineLand上的評論和參考，大多數網絡爬蟲都會索引更新的標題。 以下答案已過時，但代碼仍然適用。
你可以這樣做，
document.title = "This is the new page title.";，但這將完全違背 SEO 的目的。 大多數爬蟲一開始就不會支持 javascript，因此它們會將元素中的任何內容作為頁面標題。如果您希望它與大多數重要的爬蟲兼容，您將需要實際更改標題標簽本身，這將涉及重新加載頁面（PHP 等）。 如果您想以爬蟲可以看到的方式更改頁面標題，您將無法解決這個問題。
我想從未來打個招呼：）最近發生的事情：
因此，要回答您的問題，您可以安全地從 javascript 更改標題和其他元標記（如果您想支持非 Google 搜索引擎，還可以添加類似https://prerender.io 的內容），只需將它們作為單獨的 url (否則 Google 怎么會知道這些是要在搜索結果中顯示的不同頁面？）。 更改 SEO 相關標簽（在用戶通過單擊某些內容更改頁面后）很簡單：
if (document.title != newTitle) {
document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);
只要確保 robots.txt 中沒有阻止 css 和 javascript，您就可以在 Google Webmaster Tools 中使用Fetch as Google服務。
1： http : //searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
使用document.title 。
有關基本教程，請參閱此頁面。
我看不出通過 Javascript 更改頁面標題將如何幫助 SEO。 大多數（或全部）搜索機器人不運行 Javascript，只會讀取作為標記的最初加載的標題。
如果您想幫助 SEO，那么您需要在后端更改頁面標題並提供不同版本的頁面。
代碼是document.title = 'test'
有很多方法可以更改標題，主要的兩種，如下所示：
在 HTML 中放置一個標題標簽（例如<title>Hello</title> ），然后在 javascript 中：
let title_el = document.querySelector("title");
if(title_el)
title_el.innerHTML = "World";
最簡單的就是實際使用文檔對象模型（DOM）提供的方法
document.title = "Hello World";
前一種方法通常用於更改文檔正文中的標簽。 使用這種方法來修改像在 head 中發現的那些元數據標簽（如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);
});
使用 document.title 是您在 JavaScript 中完成它的方式，但這應該如何幫助 SEO？ 機器人在遍歷頁面時通常不會執行 javascript 代碼。
您必須使用新標題重新提供該頁面，以便任何爬網程序都能注意到更改。 通過 javascript 執行它只會使人類讀者受益，爬蟲不會執行該代碼。
對於那些尋找 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'));
使用document.title 。 它對大多數事情都有用，但它會破壞您網站上的 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>
也許你可以在你的標題上加載一個字符串中的所有標簽標題，然后一旦你加載了其中一個標簽，就通過 javascript 更改標題
例如：首先將您的標題設置為
my app | description | contact | about us |
加載其中一個選項卡后，運行：
document.title = "my app | tab title";
由於搜索引擎會忽略大多數 javascript，因此您需要設置它以便搜索引擎可以在不使用 Ajax 的情況下使用選項卡進行抓取。 使每個選項卡成為一個帶有 href 的鏈接，該鏈接在選中該選項卡的情況下加載整個頁面。 然后頁面可以在標簽中包含該標題。
onclick 事件處理程序仍然可以通過 ajax 為人類查看者加載頁面。
要以大多數搜索引擎看到的方式查看頁面，請關閉瀏覽器中的 Javascript，並嘗試將其設置為單擊選項卡將加載選擇了該選項卡和正確標題的頁面。
如果您通過 ajax 加載，並且只想使用 Javascript 動態更改頁面標題，請執行以下操作：
document.title = 'Put the new title here';
但是，搜索引擎不會在 javascript 中看到此更改。
您可以使用 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。
想到的一種可能有助於 SEO 並且仍然保留標簽頁的方法是使用與每個標簽相對應的命名錨點，如下所示：
http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.
您需要進行服務器端處理來解析 url 並在瀏覽器呈現頁面時設置初始頁面標題。 我也會繼續使該選項卡成為“活動”選項卡。 加載頁面並且實際用戶正在切換選項卡后，您將使用 javascript 更改document.title如其他用戶所述。
我只想在這里添加一些內容：如果您通過 AJAX 更新數據庫，通過 JavaScript 更改標題實際上很有用，因此標題更改而無需刷新頁面。 標題實際上是通過您的服務器端腳本語言更改的，但是通過 JavaScript 更改它只是一個可用性和 UI 的事情，它使用戶體驗更加愉快和流暢。
現在，如果您只是為了該死而通過 JavaScript 更改標題，那么您不應該這樣做。
但為了獲得 SEO 的好處
當頁面更改時，您需要重新加載頁面，以便搜索引擎看到不同的標題等。
所以首先確保頁面重新加載工作然后添加 document.title 更改
谷歌提到所有 js 文件都渲染了，但實際上，我已經失去了我的標題和另一個由 Reactjs 在這個網站上提供的元標記，實際上我在谷歌上失去了位置！ 我已經搜索了很多，但似乎所有頁面都必須預先渲染或使用 SSR（服務器端渲染）來擁有他們的 SEO 友好協議！
它擴展到 Reactjs、Angularjs 等。
簡而言之，在瀏覽器上查看頁面源的每個頁面都被所有機器人索引，如果不是谷歌可以索引但其他人跳過索引！
最簡單的方法是從 index.html 中刪除<title>標簽，並包含
<head>
<title> Website - The page </title></head>
在網絡的每個頁面中。 蜘蛛會找到這個並顯示在搜索結果中:)
我使用單獨的標頭並使用 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" );
?>
可能是因為你有一段時間沒有在帖子上正確回答，所以他們暫時禁止你，所以你不會說錯誤的答案。
在 CoreUI 的 CBreadcrumbRouter 中動態更改頁面標題
[英]Dynamically change page title in CoreUI's CBreadcrumbRouter
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.