フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

検索結果にスマホ・携帯のページが出てこないようにする

1 Comments
RYO
スマホ・携帯 ブログテンプレート
Googleで調べ物をしていると稀にスマホや携帯のテンプレで表示されるブログがあったりする。(本来PCからのアクセスならPCのテンプレで表示される。)今までは特に気にしていなかったが自分のブログでも同じことが起こったので調べてみると「タイトルタグの重複」が原因らしい。

このブログの訪問者はほとんどがPCからなので、PCよりスマホ・携帯の記事が検索結果の上位に出ているのは非常に不味い。SEO的にも良くないので手探りで色々やってみた。

この記事のURL
PChttp://tokitamaroku.blog.fc2.com/blog-entry-83.html
スマホhttp://tokitamaroku.blog.fc2.com/blog-entry-83.html?sp
携帯(ガラケー)http://tokitamaroku.blog.fc2.com/blog-entry-83.html?m
検索エンジンにスマホ・携帯ページがPCページより有用と判断されたり、テンプレのコードに何らかの不具合があると検索結果の上位に本来のPCページ以外が出てくるのだと思う。HTMLを弄ってPCページのみが表示されるようにする。

まず初めにPC以外のテンプレがないと編集できないのでスマホと携帯の適当なテンプレを導入。別にどれでもいいけどPC用と近い色の背景にした方がいいと思う。いちいち編集するの面倒だし。このブログだと背景が黒なので似たようなものにしておいた。

タイトルタグの重複はウェブマスターツールの「▼検索での見え方 → HTMLの改善」で確認できる。今まで全く対策していなかったので345ページも重複があるという…。
HTMLの改善 01

重複の内容を確認してみるとこんな感じ。1-25件以降で探すと同じ記事でもう1つあった。
HTMLの改善 02

▼ タスクトレイの「Windows10を入手する」を消す - 時偶備忘録
/?m2=form&no=55一応PCのページ
/blog-entry-55.html?sp&m2=formスマホの「コメントフォーム」
/blog-entry-55.html?sp&m2=resスマホの「コメント一覧」
/blog-entry-55.html?spスマホのページ

▼ 時偶備忘録 タスクトレイの「Windows10を入手する」を消す
/?mode=m&no=55&m2=res携帯の「コメント一覧」
/?mode=m&no=55携帯のページ

適当なもので確認してみると、別のURLだけど同じページが表示されている、その記事のコメントページなど不要なものが大量に重複しているのが分かる。これらを解消するのに必要な「rel="canonical"」「rel="alternate"」タグの基本的な使い方を覚える。



◆PCのテンプレに「rel="alternate"」タグを追加
  • alternateは「代替」という意味。
まずこのタグで検索エンジンに同じコンテンツのスマホ用ページが存在することを伝える。PC用のテンプレに↓を記述。

<link rel="alternate" media="only screen and (max-width: 640px)" href="<%url>?sp" />
  • <%url>は各記事のURL(blog-entry-00.html)になる。
「スマホ用ページはPC用ページの代替コンテンツです。」という意味で検索エンジンに認識され、スマホ用ページが別で存在することを伝えられる。


◆スマホのテンプレに「rel="canonical"」タグを追加
  • canonicalは「正規・基準」という意味。
次にこのタグで検索エンジンに同じコンテンツのPC用ページが存在することを伝える。スマホ用テンプレに↓を記述。

<link rel="canonical" href="<%url>" />
「スマホ用ページではなくPC用ページに正規化してインデックスしてください。」という意味で検索エンジンに認識され、重複コンテンツ扱いになることを防ぐ。

PC用ページとスマホ用ページのタグ設定は必ず1対1の関係にしなければいけないので注意。



下記は各ブログの内容をコピー&アレンジしたまとめ。fc2ブログだとこの3つが特に詳しかったかな。

PC・スマホ・携帯、それぞれのテンプレの<head> ~ </head>内に以下のコードを記述。なるべく上部が良い(1番上である必要はない)とどこかで見た気がするが大して変わらないだろうしスルー。

◆PC
<!--index_area-->
 <link rel="canonical" href="<%url>" />
 <link rel="alternate" media="only screen and (max-width: 640px)" href="<%url>?sp" />
 <link rel="alternate" media="handheld" href="<%url>?mode=m" />
<!--/index_area-->

<!--permanent_area-->
 <link rel="canonical" href="<%url>blog-entry-<%pno>.html" />
 <link rel="alternate" media="only screen and (max-width: 640px)" href="<%url>blog-entry-<%pno>.html?sp" />
 <link rel="alternate" media="handheld" href="<%url>?mode=m&amp;no=<%pno>" />
<!--/permanent_area-->

<!--category_area-->
 <link rel="canonical" href="<%url>blog-category-<%cno>.html" />
 <link rel="alternate" media="only screen and (max-width: 640px)" href="<%url>?cat=<%cno>" />
 <link rel="alternate" media="handheld" href="<%url>?mode=m&amp;cat=<%cno>" />
<!--/category_area-->
下線部分は「自己参照canonicalアノテーション」というやつだろうか。各エリアで上から自己参照アノテーション、スマホ、携帯で若干見やすくしておいた。携帯の部分は自分なりに考えて入れたが合ってるかどうかは微妙。打ち消し線のコードの詳細は「◆携帯」の項目へ。



◆スマホ
<!--index_area-->
 <link rel="canonical" href="<%url>" />
<!--/index_area-->

<!--permanent_area-->
 <link rel="canonical" href="<%url>blog-entry-<%pno>.html" />
<!--/permanent_area-->

<!--category_area-->
 <link rel="canonical" href="<%url>blog-category-<%cno>.html" />
<!--/category_area-->
参照ブログだとタグ末尾に「 /」が抜けていたので調べてみたらindex_areaとpermanent_areaの正規化 : testで【xhtmlで記述されたテンプレートでは、「 />」でタグを閉じる。】とあった。

このブログのスマホと携帯のテンプレはおそらくどちらもXHTMLなので「 />」でタグを閉じた。携帯ははっきりしないけど他のブログでも大抵閉じてたしたぶん大丈夫だろう。



◆携帯(ガラケー)
<!--index_area-->
 <link rel="canonical" href="<%url>" />
<!--/index_area-->

<!--permanent_area-->
 <link rel="canonical" href="<%url>blog-entry-<%pno>.html" />
<!--/permanent_area-->

<!--category_area-->
 <link rel="canonical" href="<%url>blog-category-<%cno>.html" />
<!--/category_area-->
基本的にスマホと携帯は一緒みたいだが、携帯のカテゴリページ(&cat=XX)はFC2ブログだと2ページ目以降に適切なURLが設定できないらしい。(2ページ目、3ページ目なのにPCサイトの1ページ目を正規のページと指定してしまうなど。)

「おすすめしませんよ」と書いてあったが、このブログをガラケーで閲覧する人とかまずいないだろうしカテゴリエリアは「◆PC」の打ち消し線のコードと共に普通に記述。


◆最終確認
canonical(alternate)タグを挿入したらTOPと各記事のソースをPC・スマホ・携帯のそれぞれで表示して確認する。
  1. head要素内に挿入されている。
  2. canonicalタグが1つだけ挿入されている。このタグが基準になるので全て同じURL。
  3. 意図したエリアでのみ挿入されている。(PCはここにスマホと携帯のalternateタグが1つずつ?)
  4. href属性は意図したURLになっている。各記事のURLを見るとPC・スマホ・携帯それぞれの記事のURLに変化しているはず。
合っていればそのうちタイトルタグの重複が少しずつ減っていくはず。



◆HTMLの改善

経過観察中。11/1に始めたばかりなのに既に効果が出ている模様。メタデータの方は特に対策してないのでそのうちやる予定。

2015重複するメタデータタイトルタグの重複
10/29300345
11/02298338
11/05297335
11/09299332
11/12299330

11/1 PC・スマホのコードを設置

11/3 携帯のコードを設置

11/13以降は↓の記事へどうぞ。
関連記事
RYO
管理人RYO

Comments 1

There are no comments yet.
深緑の女魔術師
感謝!

始めまして
深緑の女魔術師と申します。

正に欲しい情報が手に入って感謝です。
(/m(携帯電話)のページ重複(検索で優先表示されてしまう)で困ってた)

SSL化の際も実はお世話になったので、
コメントしちゃいました。

FC2 も HTMLも関係ないですが、
更に有益情報ってことでペルソナQの設定資料集なんてあるんですね。

ペルソナQ2よりはるかにストーリー好きってか、
比較できない素敵な話だったので後日買ってみたいと思います。

以上です。