回答:
更新:SearchEngineLandのコメントと参照に従って、 ほとんどのWebクローラーは更新されたタイトルにインデックスを付けます。以下の答えは時代遅れですが、コードはまだ適用可能です。
あなたはちょうどのようなことをすることができますが
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ウェブマスターツールでFetch as Googleサービスを使用できます。
1:http : //searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
Javascriptを使用してページのタイトルを変更することがSEOにどのように役立つかわかりません。ほとんど(またはすべて)の検索ボットはJavaScriptを実行せず、最初に読み込まれたタイトルであるマークアップのみを読み取ります。
SEOを支援したい場合は、バックエンドのページタイトルを変更し、ページの異なるバージョンを提供する必要があります。
window.history
コードは
document.title = 'test'
;
最後にを追加する必要はありませんか?
タイトルを変更する方法はたくさんありますが、主な2つは次のようなものです。
HTMLにタイトルタグ(例<title>Hello</title>
:)、次にJavaScriptを挿入します。
let title_el = document.querySelector("title");
if(title_el)
title_el.innerHTML = "World";
最も単純なのは、Document Object Model(DOM)によって提供されるメソッドを実際に使用することです。
document.title = "Hello World";
前者の方法は、通常、ドキュメントの本文にあるタグを変更するために行う方法です。この方法を使用して頭にあるようなメタデータタグ(などtitle
)を変更することは、よくても問題のある方法であり、慣用的ではなく、そもそもスタイルが非常に悪く、移植性さえもない場合があります。ただし、確実なことの1つは、他の開発者title.innerHTML = ...
が保守しているコードを見ると、他の開発者を困らせることです。
あなたが行きたいのは後者の方法です。このプロパティは、名前が示すように、タイトルを変更する目的で、DOM仕様で提供されています。
また、XULを使用している場合は、タイトルを設定または取得する前にドキュメントがロードされていることを確認することをお勧めしますundefined behavior
。DOMのドキュメントは必ずしもJavaScriptに関連しているわけではないため、これはJavaScriptを介して発生する場合と発生しない場合があります。しかし、XULはまったく別の獣なので、私は余談です。
.innerHTML
心に留めておくべきいくつかの良いアドバイス.innerHTML
は、使用が一般的にずさんだということでしょう。appendChild
代わりに使用してください。
まだ.innerHTML
便利だと思う2つのケースには、プレーンテキストを小さな要素に挿入することが含まれますが...
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);
});
undefined behavior
。
document.querySelector.apply
真剣に?
最新のクローラーは、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'));
多分あなたはあなたのタイトルに1つの文字列ですべてのタブタイトルをロードすることができます、そしてあなたがタブの1つをロードしたらJavaScriptを介してタイトルを変更します
例:最初にタイトルを
my app | description | contact | about us |
いずれかのタブをロードすると、次のように実行されます。
document.title = "my app | tab title";
次のように、SEOに役立つ可能性があり、タブページをそのままにして、各タブに対応する名前付きアンカーを使用する方法が思い浮かびます。
http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.
ブラウザがページをレンダリングするときに、URLを解析して初期ページタイトルを設定するには、サーバー側の処理が必要です。私も先に進み、そのタブを「アクティブ」なタブにします。ページが読み込まれ、実際のユーザーがタブを切り替えたら、JavaScriptを使用してdocument.title
、他のユーザーが述べたように変更します。
を使用しdocument.title
ます。ほとんどの場合に役立ちますが、Webサイトの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を使用できます。Googleを含む一部のボットは、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を含め、実際のエンドユーザーがブラウザーで表示する結果であることを認識しています。
検索エンジンはほとんどのJavaScriptを無視するため、Ajaxを使用せずにタブを使用して検索エンジンがクロールできるようにする必要があります。各タブを、そのタブが選択された状態でページ全体をロードするhrefを持つリンクにします。次に、ページのタグにそのタイトルを含めることができます。
onclickイベントハンドラは、人間の閲覧者のためにajaxを介してページをロードできます。
ほとんどの検索エンジンで表示されるページを表示するには、ブラウザーでJavaScriptをオフにし、タブをクリックすると、そのタブが選択された正しいタイトルのページがロードされるようにします。
ajax経由でロードしていて、JavaScriptだけでページタイトルを動的に変更したい場合は、次のようにします。
document.title = 'Put the new title here';
ただし、検索エンジンはJavaScriptで行われたこの変更を認識しません。
Googleは、すべてのjsファイルがレンダリングされたが、実際には、このWebサイトで Reactjsによって提供されていたタイトルと別のメタタグを失い、実際にGoogleでの地位を失ったと述べました。私は何度も検索しましたが、SEO対応のプロトコルを使用するには、すべてのページが事前にレンダリングされているか、SSR(Server Side Rendering)を使用している必要があります。
それはReactjs、Angularjsなどに展開されます。
略して、ブラウザーでページのソースを表示するすべてのページは、おそらくGoogleがインデックスを作成できないが他のユーザーはインデックスをスキップしない場合、すべてのロボットによってインデックスが作成されます。
最も簡単な方法は<title>
、index.htmlからタグを削除して、
<head>
<title> Website - The page </title></head>
ウェブのすべてのページで。クモがこれを見つけて、検索結果に表示されます:)