Webページのタイトルを動的に変更するにはどうすればよいですか?


510

それぞれ異なるコンテンツを表示する一連のタブを実装するWebページがあります。タブをクリックしてもページは更新されませんが、クライアント側でコンテンツの表示/非表示が切り替わります。

ここで、ページで選択したタブに応じてページタイトルを変更する必要があります(SEOの理由から)。これは可能ですか?ページをリロードせずにJavaScriptを介してページタイトルを動的に変更するソリューションを誰かが提案できますか?

回答:


709

更新SearchEngineLandのコメントと参照に従って、 ほとんどのWebクローラーは更新されたタイトルにインデックスを付けます。以下の答えは時代遅れですが、コードはまだ適用可能です。

あなたはちょうどのようなことをすることができますがdocument.title = "This is the new page title.";、それは完全にSEOの目的を打ち消すでしょう。ほとんどのクローラーは、そもそもJavaScriptをサポートしないので、要素内のすべてをページタイトルとして取得します。

これをほとんどの重要なクローラーと互換性を持たせる場合は、実際にタイトルタグ自体を変更する必要があります。これには、ページのリロード(PHPなど)が含まれます。クローラーが見えるようにページタイトルを変更したい場合は、これを回避することはできません。


29
html5のpushStateを使用して既にページを更新しているときに履歴を変更している場合は、タイトルも更新してください。適切に設定されていれば、クローラーは正しい結果を得ることができ、ユーザーが表示しているビューに一致するタイトルをユーザーに表示する必要があります。ほとんどのウェブアプリなどでは、これを使い続けるのは良い解決策のようです。私は別の機能を見落としたかもしれませんが?
Mathijs Segers 2013

31
これはまったく真実ではありません。Googleは、document.titleに対するJavaScriptの変更をインデックスに登録します。searchengineland.com/…を
CpnCrunch

7
@CpnCrunchは正しいです!GoogleはJavaScriptによって変更されたタイトルをインデックスに登録します。私は他の検索ボットでテストしていません。ボットがJavaScriptを実行しないと常に想定しないでください。以下で新しい回答を作成しましたが、URLを変更せずにタブの表示と非表示を切り替えるだけで複雑になることに気付きました。
yazzer 2015年

10
@CpnCrunchは正しいです。これは2016年です。SEOは大きく変化し、Googleや他の検索エンジンは、単一ページのアプリやJavaScript全般に適応しています。
Pilau

34
したがって、この答えはかなり時代遅れです。StackOverflowは回答に「廃止」機能を追加する必要があります:D
Allen Linatoc

167

私は未来から挨拶したいと思います:)最近起こったこと:

  1. グーグルは今あなたのウェブサイト上にあるJavaScriptを実行しています1
  2. 人々は今、React.js、Ember、Angularなどを使用して、ページ上で複雑なJavaScriptタスクを実行し、それでもGoogleによってインデックスが作成されています1
  3. html5履歴API(pushState、react-router、ember、angular)を使用して、開くタブごとに別々のURLを作成することができ、Googleはそのインデックスを作成します1

したがって、質問に答えるために、タイトルや他のメタタグを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


47

Javascriptを使用してページのタイトルを変更することがSEOにどのように役立つかわかりません。ほとんど(またはすべて)の検索ボットはJavaScriptを実行せず、最初に読み込まれたタイトルであるマークアップのみを読み取ります。

SEOを支援したい場合は、バックエンドのページタイトルを変更し、ページの異なるバージョンを提供する必要があります。


3
同意-クローラーがJSで何もしないため、これはSEOにまったく役立ちません
アナカタ09年

たぶん、タイトルは1つだけで、SE上のすべてのコンテンツが必要なのかもしれませんが、ページにアクセスすると、よりフレンドリーなデータの編成になりますか?
Kev

それから、彼らはSEOのコンセプト全体に非常に反対しています
アナカタ09年

4
ええ、SEOにはあまり適していませんが、ブックマークなどのエンドユーザーにはwindow.history
役立ち

JavaScriptアプリケーションのクロールに関するGoogle独自のドキュメントdeveloper.google.com/webmasters/ajax-crawling
codewizard

43

を使用しdocument.titleます。

基本的なチュートリアルについてもこのページを参照してください


10
リンクが大好き、それはnetscapeナビゲーターのスクリーンショットを持っています:)
アランMulholland

SpidersがJavaScriptを使用しないことを望みます。グーグル悪意のあるコードを送信する良い方法?
Lee Louviere、2012

@AdrianoVaroliPiazzaそれは役に立たないかもしれませんが、それは機能し、検索エンジンから来る人々を助けます。正解であれば、反対投票する必要はありません。
its_notjack

@its_notjackそうではありません。別の質問の正解かもしれません。
Adriano

1
さて、このトピックは、Googleで「javascript change title」と入力したときに最初に出てきました。Webアプリを開発しているので、SEOは気になりません。
Maciej Krawczyk 2016年

36

コードは
document.title = 'test'


3
top.document.titleを使用してウィンドウ自体を参照しています(フレームセットがあります...)
Dror

2
@AdrianoVaroliPiazzaは-1にする必要はありません。SEOを必要としないアプリケーションや、実際に一部のHTML5関数を使用するWebサイトについてはどうでしょうか。つまり、ウェブサイトを適切に設定し、ajaxを使用し、非js /クローラーのフォールバックがあると、ユーザーエクスペリエンスが高速化され、一致するタイトルが表示されたままになります。私には良い考えのようです。
Mathijs Segers 2013

;最後にを追加する必要はありませんか?
MineCMD 2016

1
@MineCMD、セミコロン(;)は、1行に複数のコマンドがある場合にのみ必要です。コマンドを開いたままにしていないもの(ドット、引用符、二重引用符、左中括弧など)がない場合、改行はコマンドの終わりと見なされます。これが古いブラウザの場合にどれほど当てはまるかはわかりませんが、ChromeとFirefoxの両方の最近のバージョンで当てはまることが証明されています。(私はIEやEdgeを使用していないので、それらについて話すことはできません)
Wayne

@Wayneやや正解。特に匿名オブジェクトを返す場合は、ASIが予期しない(ほとんどの場合)動作を引き起こすいくつかのエッジケースがあります。
デイブニュートン

18

タイトルを変更する方法はたくさんありますが、主な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);
});

1
方法1の警告にぴったりの単語を見つけましたundefined behavior
Braden Best

1
これは絶対に反対票を投じるべきです。方法1は、上記のように未定義の動作です(そして、免責事項がこれに言及することを正当化することはありません)。また、document.querySelector.apply真剣に?
Andrey Tarantsov、2016

3
@AndreyTarantsov免責事項はそれについて言及することを正当化しませんか?何をすべきでないかを人々に知らせるためにそれについて言及するのはどうですか?私たちは間違いから学ぶので、誰かが間違いであることを言わないように言うことは悪いアドバイスです。また、これは本当に古い答え(文字通り、このサイトで最初に書いた答えの1つ)なので、「真剣に?」不要でした。過去3年間に私の知識と経験に何が変わったのか、あなたにはおそらくわかりません。
Braden Best

11

document.titleを使用すると、JavaScriptでそれを実現できますが、これはどのようにSEOを支援するためのものですか?ボットは通常、ページをトラバースするため、JavaScriptコードを実行しません。



4

クローラーが変更を認識できるように、ページを新しいタイトルで再予約する必要があります。JavaScriptを介してそれを行うことは人間の読者のみに利益をもたらし、クローラーはそのコードを実行しません。


4

それの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'));

3

多分あなたはあなたのタイトルに1つの文字列ですべてのタブタイトルをロードすることができます、そしてあなたがタブの1つをロードしたらJavaScriptを介してタイトルを変更します

例:最初にタイトルを

my app | description | contact | about us | 

いずれかのタブをロードすると、次のように実行されます。

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

2

次のように、SEOに役立つ可能性があり、タブページをそのままにして、各タブに対応する名前付きアンカーを使用する方法が思い浮かびます。

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

ブラウザがページをレンダリングするときに、URLを解析して初期ページタイトルを設定するには、サーバー側の処理が必要です。私も先に進み、そのタブを「アクティブ」なタブにします。ページが読み込まれ、実際のユーザーがタブを切り替えたら、JavaScriptを使用してdocument.title、他のユーザーが述べたように変更します。


2

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


1

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を含め、実際のエンドユーザーがブラウザーで表示する結果であることを認識しています。


1

検索エンジンはほとんどのJavaScriptを無視するため、Ajaxを使用せずにタブを使用して検索エンジンがクロールできるようにする必要があります。各タブを、そのタブが選択された状態でページ全体をロードするhrefを持つリンクにします。次に、ページのタグにそのタイトルを含めることができます。

onclickイベントハンドラは、人間の閲覧者のためにajaxを介してページをロードできます。

ほとんどの検索エンジンで表示されるページを表示するには、ブラウザーでJavaScriptをオフにし、タブをクリックすると、そのタブが選択された正しいタイトルのページがロードされるようにします。

ajax経由でロードしていて、JavaScriptだけでページタイトルを動的に変更したい場合は、次のようにします。

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

ただし、検索エンジンはJavaScriptで行われたこの変更を認識しません。


2
「Googleが認識しているようにページを表示するには、ブラウザーでJavaScriptをオフにし、タブをクリックすると、そのタブが選択された正しいタイトルのページがロードされるようにします。」-これは、SEO対応のAJAXを多用するWebサイトを開発する場合の非常に優れたアプローチです。
John Weisz 2015年

0

しかし、SEOの利益を得るために

検索エンジンが別のタイトルなどを表示できるように、ページが変更されたときにページを再読み込みする必要があります。

したがって、ページのリロードが最初に機能することを確認してから、document.titleの変更を追加してください


0

ここで何かを追加したいだけです。AJAXを介してデータベースを更新している場合、JavaScriptを介してタイトルを変更することが実際に役立つため、ページを更新しなくてもタイトルを変更できます。タイトルは実際にはサーバー側のスクリプト言語を介して変更されますが、JavaScriptを介して変更することは、ユーザーエクスペリエンスをより楽しく流動的なものにする使いやすさとUIにすぎません。

さて、JavaScriptを使用してタイトルを変更するのであれば、それを行うべきではありません。


0

Googleは、すべてのjsファイルがレンダリングされたが、実際には、このWebサイトで Reactjsによって提供されていたタイトルと別のメタタグを失い、実際にGoogleでの地位を失ったと述べました。私は何度も検索しましたが、SEO対応のプロトコルを使用するには、すべてのページが事前にレンダリングされているか、SSR(Server Side Rendering)を使用している必要があります。
それはReactjs、Angularjsなどに展開されます。
略して、ブラウザーでページのソースを表示するすべてのページは、おそらくGoogleがインデックスを作成できないが他のユーザーはインデックスをスキップしない場合、すべてのロボットによってインデックスが作成されます。


-1

最も簡単な方法は<title>、index.htmlからタグを削除して、

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

ウェブのすべてのページで。クモがこれを見つけて、検索結果に表示されます:)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.