同じ内容のHTMLの場合

SEOという言葉を聞いたことがありますか。
「検索エンジン最適化」というものです。

ウェブサイトを作成したら、「より多くの人に見てほしい」そう願う人がほとんどですね。
どうしたら検索した時に上位に表示されるか、ということを考え実行することをSEO対策と言います。

余談ですが、どれくらいの数のドメイン名があるかを調べてみました。
jpドメイン名の登録数は、2017年12月1日現在、1,491,009。
ちなみに、10年前の2016年12月1日は、1,451,924とのこと。
10年間で4万の増加とは。
https://jprs.jp/about/stats/domains/index.htmlより。

しかも、1つのドメインで1つのウェブサイトをもっているわけではないので、ウェブサイトの数はというと…
数えられるのでしょうか??
興味がある方は調べて、私に教えてください笑

 

導入が長くなりましたが、今回は同じ内容のHTMLを作成した際の対応についてです。

例えば
・SP用とPC用
・日本語と他言語
など、内容はほぼ同じという時。

ウェブサイトがインデックスされる際に、「なんで同じのが2つあるねん」となってしますようです。

そこで、SEOの為にも「私はやましいことはしていませんよ」と伝えなくてはいけません。

どうするかというと「このHTMLは元のものです。こっちのHTMLはスマートフォン用のものです」と明示する必要があるわけです。

 

実際にどうするか。今回はSP用とPC用を例にあげて説明していきます。

(例)
PC用 https://test/page01.html
SP用 https://test/sp/page01.html
の場合

  1. PC用のHTMLのhead内に以下を記載します。
    <link rel=”alternate” media=”only screen and (max-widt:599px)” href=”https://rena.space/test/sp.html”>
    「スマートフォンの為の別ページがありますよ」という意味になります。
  2. SP用のHTMLのhead内に以下を記載します。
    <link rel=”canonical” href=”https://rena.space/test/index.html”>
    「元となるページがありますよ」という意味になります。
  3. .htaccessファイルを作り、以下を記載します。
    RewriteEngine on
    /*スマートフォンの場合*/
    RewriteCond %{REQUEST_URI} !/sp/
    RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
    RewriteRule ^(.*)$ sp/$1 [R=302,L]
    RewriteBase /
    /*PCの場合*/
    RewriteCond %{REQUEST_URI} /sp/
    RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
    RewriteRule ^sp/(.*)$ $1 [R=302,L]
    RewriteBase /

 

個人的にはSPとPCの場合は、media queryで条件分岐させるほうが慣れているので楽です、今のところ。
しかし、このやり方を覚えておけば、英語でウェブサイトを作りたくなった時に便利かな、と思います。

 

では、ごきげんよう:)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です