top / パソコン / ホームページの作り方
PC用ページのほかにスマホ用ページも作ると、全く同じページが、ウェブ上に並存することになります。このような重複を避けるためには、次のような方法があります。
| レスポンシブデザイン |
同じURLで同じHTMLコードを配信しつつ、画面サイズに応じてコンテンツの表示方法を変更。Googleが推奨 |
| ダイナミックサービング（動的配信） |
同じURLでデバイス毎にHTMLやCSSを毎回動的に組み立てて配信 |
| .htaccessで転送 |
デバイスに応じて別個のURLで異なるHTMLを配信 |
それぞれの内容を整理すると次のようになります。
| |
URL |
HTML |
|
| レスポンシブデザイン |
同じ |
同じ |
デバイスによって見え方が異なる |
| ダイナミックサービング |
同じ |
異なる |
デバイスに応じてHTMLを組み立て |
| .htaccessで転送 |
別個 |
異なる |
デバイスに応じてHTMLを切り替え |
レスポンシブデザインは、CSSを使って、同じページをPC画面にもスマホ画面にも対応させようというものです。当然、構文も恐ろしく複雑になるので、個人で運営するサイトには向いていません。ダイナミックサービングは、デバイスに応じてその都度HTMLを組み立てるので、さらに複雑になります。
重複しても問題はない
ページの重複について、Google
では「サイト上で重複コンテンツが発生することは通常のことであり、Google のスパムに関するポリシーの違反にはなりません」と明記しています（URL
正規化とは何か | Google 検索セントラル）。ただし「たとえば、どれが正しいページなのか、2
つのページに違いがあるかどうかなどの疑問をユーザーが抱く可能性があります」ということです。しかし、デバイスに応じてリダイレクトさせれば、そのような可能性は起こらないと思われます。
「最終的に、重複するページの中で Google が最も代表的と考えるページの URL が正規 URL
になります」ということで、その際、アノテーションなどを使って「Google に希望を伝えることはできますが、さまざまな理由から Google
が別のページを正規として選択する場合もあります。つまり、正規化の希望を伝えることはできますが、確実ではありません」ということです。
つまり、正規URL（代表的なページのURL）を決めるのはGoogle であって、サイト運営者が何らかの指定をする必要はないということのようです。
「正規
URL
を指定することはそれほど重要ではありません」
Google では、正規ページを指定する方法として次の3つを示しています（rel="canonical"
などを利用して正規ページを指定する方法）。リダイレクトは、重複ページを廃止するときにのみ使用するということですから、重複が継続する場合は使うことはないと思われます。
| リダイレクト |
強く示すシグナル、重複ページを廃止するときにのみ使用 |
| rel="canonical" link アノテーション |
強く示すシグナル |
| サイトマップ |
シグナルとしては弱い |
アノテーションを使用する場合は、次のタグに正規URL（赤字）を挿入します。URLには「.html」が含まれていませんが、拡張子を非表示にするのが昨今の流行のようです。
<head>
<link rel="canonical" href="https://example.com/dresses/green-dresses"
/>
</head> | モバイル用ページ（青字）がある場合は、次のタグを追加します。この設定では、PC用ページを正規ページに指定しています。
<head>
<link rel="alternate" media="only screen and
(max-width: 640px)" href="https://m.example.com/dresses/green-dresses">
<link
rel="canonical" href="https://example.com/dresses/green-dresses"
/>
</head> | ただし、「通常、正規 URL
を指定することはそれほど重要ではありません」と述べていますから、アノテーションは省略しても構わないということでしょうか。以前は、アノテーションが必須であるように説明していましたが、最近は変わったようです。
正規URLを指定することはそれほど重要ではないと言っても、ページが重複していればユーザーが戸惑う恐れがあります。そこで、デバイスに適したページが表示されるように、.htaccessファイルを設定する必要があります。
その詳細を、(5)どこに作る？
で説明します。 |
|