JavaScript リダイレクトでGoogle検索をスマホ対応にするために苦労したこと

このサイトはStinger5という無料のテンプレートを使っており、レスポンシブなので何も気にすることはないのですが
別サイトでは色々な事情がありやむなく「ＰＣ」と「スマホ」のページを別々にしてあります。
さらにmovabletypeなので、今となってはみんなWordPressばかりで、ユーザーも少なく技術書もほとんどないため、参考にするサイトも少なかったのですがなんとか対応させたので、メモとして残しておきます。

movabletypeでJavaScript リダイレクトさせる

まず該当サイトは、いったん公開したものの削除したページがかなりあり、かつ遅れて作ったスマホページの分がないため、HTTP リダイレクトにすると多くのページが404になってしまうという問題がありました。

なのでページごとに対応させるJavaScript リダイレクトしか選択がないという状況でした。

サポートされるリダイレクト方法
Googlebot では、以下の 2 つのリダイレクトの実装がサポートされます。

HTTP リダイレクト
JavaScript リダイレクト

別々の URL – ウェブマスター向けモバイルガイド

さらにmovabletypeでは、テンプレートごとにスマホに飛ばすためのＵＲＬを吐きだすタグを書かなくてはなりませんでした。

躓いたひとつめです。

ＰＣページからスマホページに飛ばすためには、テンプレート判別と分岐を理解しないとダメでした。

以下のサイトを参考に何度も失敗しながらなんとか「ＰＣ→スマホ切り替え」に対応させることに成功。

スマートフォンサイトへの転送設定
PCサイトへのアクセスをスマートフォンサイトに転送するJavaScript(寄稿) | MovableType.jp – CMSプラットフォーム Movable Type –
MTのテンプレート判別･分岐でハマったところ｜Materializing [マテリアライジング]
MTBlogRelativeURLタグで内部リンクURLを相対パス化 – ヲレサイト
MT5用ウェブページのパンくずリスト｜ユージック

しかし、いつまでたってもスマホのGoogle検索結果に、スマホ対応という文字が付きません。

ここが躓いた二つ目。

アノテーションを追加する

モバイルフレンドリーテストでは問題ないのですが・・・。
モバイル フレンドリー テスト

そこでGoogle公式のページをみると、ＰＣ・スマホが別々のＵＲＬの場合はアノテーションを使用するようにとありました。

Google のアルゴリズムがサイトのこの設定を認識できるように、次のアノテーションを使用することをおすすめします。

1. PC 用ページに、対応するモバイル端末用 URL を指すための link rel=”alternate” タグを追加します。これで、Googlebot がサイトのモバイル端末用ページの場所を検出できます。
2. モバイル端末用ページに、対応する PC 用 URL を指す link rel=”canonical” タグを追加します。

別々の URL – ウェブマスター向けモバイルガイド

HTML に追加するアノテーション

PC 用ページ（http://www.example.com/page-1）には、次のアノテーションを追加します。

<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >

モバイル端末用ページ（http://m.example.com/page-1）に追加する必要があるアノテーションは次のとおりです。

<link rel="canonical" href="http://www.example.com/page-1" >

モバイル端末用 URL には、PC 用ページを指すこの rel=”canonical” タグが必須です。

別々の URL – ウェブマスター向けモバイルガイド

href=”http://m.example.com/page-1″の部分には、JavaScript リダイレクトへのＵＲＬをほぼそのまま使えたので、ＰＣテンプレートとスマホテンプレート両方に各々のタグを記述しました。

スマホ対応表示はというと、トップページは半日くらいで”スマホ対応”という文字が出て、その他のページは1日以上あとに対応となりました。
しかし何故かまったく対応にならないページもあるんですが。

また、新しい記事はその都度一定の時間後にしか対応という文字が付かないのですが、ＳＥＯ的に問題ないのか心配です。

多分、レスポンシブなら最初から大丈夫なんでしょうけどね。

以上です、

ＣＭＳがmovabletypeかつ、JavaScript リダイレクトでスマホ対応表示にしたい人で、困っていたら参考になれば幸いです。

あんまりいなさそうですけど。