MENU

PC側テンプレートのヘッダー情報の追加

このページでの作業

前のページの作業はスマホのヘッダーに対する設定でしたが、ここでの作業は、
PCサイトのヘッダーの設定を行います。

 

PCサイトからスマホサイトに対してalternate[オルタネイト]というリンクを送ります。

 

グールグのクローラーは、このalternate[オルタネイト]リンクがヘッダーに記述されていると、実際に記述した「PCサイトのページ」に、対応している「スマホのページがある」
っと理解できます。

 

逆にスマホ用のページを作成しない場合には、この記述は必要ない事になります。

 

もうひとつの理由として、このリンクを記述しておくと、クローラーがスムーズに
両サイトの巡回を行えるというメリットがあります。

 

クローラーにスマホサイトが存在する事を強制的に認識させているわけで、
これはサイト更新した場合でも、「すみやかにページがインデックスされる」
という事にもつながります。

 

一般的にこの事を、PCサイトとスマホサイトを関連付けるという表現を使います。
PCサイトのページに関連したスマホページがあるという考え方です。

 

実際の記述方法

PCサイトのindex.htmlは、スマホサイトのsp/index.htmlに関連付けする。

 

PCサイトのindex.htmlファイルのヘッダーに記述するタグ

<link href="スマホ用ページのURL" rel="alternate">

スマホサイトのsp/index.htmlに対してなので、ドメイン以下はsp/index.html

<link href="http://ドメイン/sp/index.html" rel="alternate">

 

PCサイトindex.htmlファイルのヘッダーの実際の記述

オルタネイト

 

同じようにPCサイトのpage1.htmlのヘッダーへの記述は
スマホサイトのsp/page1.htmlに対してなので、下記のようになります。

<link href="http://ドメイン/sp/page1.html" rel="alternate">

 

PCサイト用テンプレートのヘッダーコピペ用タグ

※ それぞれ対応するPCサイトのページのヘッダー内に記述して下さい。

index.html

<link href="http://ドメイン/sp/index.html" rel="alternate">

page1.html

<link href="http://ドメイン/sp/page1.html" rel="alternate">

page2.html

<link href="http://ドメイン/sp/page2.html" rel="alternate">

page3.html

<link href="http://ドメイン/sp/page3.html" rel="alternate">

page4.html

<link href="http://ドメイン/sp/page4.html" rel="alternate">

page5.html

<link href="http://ドメイン/sp/page5.html" rel="alternate">

※ ドメインはあなたの実際のドメインを記述してください。

 

これでPCサイトの設定が終わり、すべての作業が完了しました。

 

設定ができましたらPCサイトのコンテンツをスマホサイトテンプレートに移設します。
対応したそれぞれのページに記述して下さい。

 

次のコンテンツでは、実際にアップロードして、PCサイトのコンテンツが
スマホサイトに、正常にリダイレクトしているかを確認します。

 

このテストに合格すると、あなたのサイトはモバイルフレンドリーとなり、
スマホ検索スマホ対応:が表示されます。

 

次の作業・・・・・モバイルフレンドリーテストにすすむ。