パソコン / ホームページの作り方
 スマホページを作る(4)重複を避ける
2020/4/28 
 スマホでPCページを見る場合も、ダブルタップを使えば本文のフレームが拡大されます。だから、別に不都合はないともいえます。
 しかし、「モバイルフレンドリーでない」とか「モバイル版のコンテンツを優先的に使用する」とか言われると、スマホ用ページも作っておこうということになります。そうなると、全く同じ、あるいは似たような内容のページが、ウェブ上に複数存在することになります。

「別々の URL を使用することは推奨されません」
 しかしこのことは、Googleにとって、少し厄介な問題をもたらします。Googleは、世界中のWebサイトのページ情報をコピーし、データベースを作成し、検索ページにリンク先を表示しています。したがって、同じようなページが複数存在すると、どのページの情報をコピーし、リンク先として表示するか、判断に迷うことになります。
 Googleは、次のように「別々の URL を使用することは推奨されません」としています(Google 検索デベロッパー ガイド )。その理由は「(サイト運営者にとって)実装と保守が困難」ということですが、Googleにとって、処理が面倒になるというのが本音ではないでしょうか。

 ここに出てくる「レスポンシブ ウェブ デザイン」とは、CSSを使って、同じページをPC画面にもスマホ画面にも対応させようというものです。Google 検索デベロッパー ガイドでは、スマホ用Webページを次のようにすることを推奨していますが(モバイル フレンドリーにする方法)、画面の大きさに応じて、自動的にこの切り替えを行わせようというものです。

 たとえば、Yahoo!ニュースの「緊急事態宣言」延長は国民のせいか 経済的補償なく進んだ政権の責任は(47NEWS)という記事は、5インチのスマホでは、次のように表示されます。
 5インチのスマホでPCモードにすれば、PC用のページが次のように表示されます。このPC用のページと見比べると、上のスマホ用のページでは、全体のカテゴリーのリストが省略され、簡略化されているのが分かります。

 この記事を、パソコンの22インチモニターの縦画面で見ると次のようになります。カテゴリーのリストや関連記事などが、ひと目で見渡せます。時事情報をじっくり読むのであれば、PCページで見た方が良いといえます。

 確かに、「レスポンシブ ウェブ デザイン」を使えば、同じページ(URL)で、PC画面にもスマホ画面にも対応できます。しかし、情報量が多い場合はスマホ画面では分かりにくくなってしまいます。そもそもこの「レスポンシブ ウェブ デザイン」というものは、作成にものすごく手間がかかるので「できるだけ手間をかけず、ただでホームページを作りたい」という、このサイトの趣旨には反します。

アノテーションを指定
 そのような場合には Google では、アノテーションを指定することによって、パソコン用ページとモバイル用ページを関連付けることを勧めています(Google 検索デベロッパー ガイド)。
 Google では、アノテーションの指定方法を次のように説明しています(タグを挿入する場所は、<html>と</html>の間です)。なお、アノテーションの設定は、TOPページと個別ページで異なるという情報もあります(スマートフォン・フィーチャーフォン対応アノテーションの最適な設定について)。

 このアノテーション指定により、PC用のページには「このページの他にスマホ用の代替ページがあります」という情報を付加し、スマホ用のページには「このページの他にPC用の正規ページがあります」という情報を付加しています。
 なお、Google の説明に出てくるページのurlには「.html」が含まれていませんが、拡張子を非表示にするのが昨今の流行のようです( サイト運営者必見!サイトURLの拡張子を非表示にして隠す方法)。
 また、Google の説明には、「http://www.」と「http://m.」が出てきます。前者はPCサイトで、後者はスマホサイトのようです。
 たとえば、スマホで「http://www.yahoo.co.jp/」を開くと、次のように「http://m.」のページが表示されます。

 スマホをPCモードにすると、「http://www.」のページが表示されます。

 「http://www.yahoo.co.jp/」を、 モバイル フレンドリーテストで確認すると、次のように、スクリーンショットに「http://m.」のページが表示され、「このページはモバイル フレンドリーです」という結果となりました。

 つまり、画面の大きさによって、「http://www.」と「http://m.」が切り替えられ、画面の大きさに適したページが表示されるようです。
 しかし、無料のレンタルサーバーには、「http://m.」は提供されていません。その場合、パソコン用ページとスマホ用ページをどうやって切り替えればよいのでしょうか。それについては、(5)どこに作る?で検討します。

正規ページが代表
 Google は、「正規URLとは、サイトの重複するページの中で Google が最も代表的と考えるページのURLです」「サイトマップには、正規ページ以外のページを含めないでください」と述べています(重複した URL を統合する)。
 つまり、正規URLのデータのみがindexに登録され、検索用データベースに反映されるようです。そして、Google の説明に従ってアノテーションを指定すれば、PCページを正規ページとすることになります。このことと、「モバイル版のコンテンツを優先的に使用する」こととは、どのような関係にあるのでしょうか。