この記事の所要時間: 352

 

ここ数日いろいろな人がスマホ対応してないサイトが4月21日以降に下がる可能性を秘めてるよという告知をしていますね。

3月2日時点の海外SEO情報ブログではさらなるQ&A形式がまとまっていましたので、詳細はそちらでご確認ください。

詳細はこちらから(別窓で開きます)

 

簡単に言うと、今後スマホサイトに対応してないサイト(PCのみのサイト)に関して「モバイル検索の表示順位に影響があるよ」というお話です。

うちのブログのお問合せのなかで、
標準のSIRIUSのテンプレートはレスポンシブルではなさそうだけど、大丈夫ですか?

というものを頂いたのですが、
これは大丈夫です。要するにスマートフォン用のサイトに対応していればOKということです。

例えば、SIRIUSの教科書用のサンプルサイトですが普通にスマートフォンから見たい場合は「スマホ対応」となっていますね。

これはSIRIUSのスマホサイトへの振り分けを.htaccessで行っているだけで特に特別なことをしているわけではありません。

smph

一応どういう設定をしておけばいいかを振り返っておきましょう。

SIRIUSのスマホ生成のやり方

基本的なやり方は次のとおりです。

  • サイトオプションをクリック
  • iPhoneサイト設定
  • 自動振り分け―「同一URLで振り分け」を選択
  • image

     

    基本これでOKなので難しくないですよね。

    ただし、一つ気をつけて欲しいのが、ドメインの下にディレクトリーを切って複数のサイトを入れている場合、そのサイトもすべてスマホ化しておかないとトップドメインに「スマホ対応」と出てこない可能性があります。
    (私の作ったサイトの幾つかはそうなってました)

     

    気になるなら稼ぎ頭だけでもチェックしておこう

    気になるなら、モバイルフレンドリーツールをつかって調べてみましょう。

    モバイルフレンドリーツールはこちらをクリック(別窓で開きます)

    URLを入れて「分析」ボタンを押すだけです。

    image

    細かい中身を見たいならこちら

    基本上で合格をしていればOKと思っていいですけど、更に突っ込んで修正するならディベロッパーツールを使っていきましょう。

    googleデベロッパーツール(別窓で開く)

    もともとはどうやったらサイトを高速表示させるかの細かい提案をもらえるツールですが、ここにモバイル版(スマホサイト)とPCサイトの修正案が出てきます。

    もともとSIRIUSユーザーの多くはHTMLなどに詳しくないから使っている人が多いと思うのでここまで必要かというと、いらないような気もしますが、勉強したい人は参考にしておくといいと思いますよ。

     

    1つだけ、SIRIUSのスマホテンプレートを修正しておこう

    別にやらなくてもいいといえばいいのですが、モバイルフレンドリーなサイト作りという観点からSIRIUSのスマホテンプレートの一部修正しておいたほうが良い項目があります。

     

    スマホテンプレートHTMLの<head>の中に、

    <meta id="viewport" name="viewport" content="320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    という項目がありますが、
    こちらの項目の320をdevice-widthに訂正しておくといいと思います。

    <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

     

    横幅320はかなり前のスマートフォンの画面幅なのでこちらのほうがモバイルフレンドリーなのは言うまでもありません。たいていのスマホサイトは現在はこちらのdevice-widthが使われています。

     

    大元のテンプレートをいじっておくとその後の変更はしなくてすみます。

    たいていの人はCドライブ直下で
    C:\ACES WEB\SIRIUS\iphoneのようになっているはずです。
    (program filesには入れないようになってますね)

     

    CドライブのACES WEBというフォルダーの中にSIRIUSというフォルダーがあり、そこの中にテンプレートなどが内蔵されいてます。そこのiPhoneというフォルダーの中にスマホ用テンプレートが収められています。

    image

    実はスマホ用のテンプレートは中に6つのhtmlファイルが入っており、それぞれの<head>に下のメタタグが入っています。

    <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

     

    これを先ほどと同様に全て修正して保存しておきましょう^^

    6ファイル×10色=60ファイルの修正です(笑)

     

    *テンプレートをいじる際はバックアップをとって自己責任で!

    めんどくさいならgrep置換だ!

    さて、ここからはチョイとばかし腕の見せどころなんですが、
    GREP置換という技がテキストエディターにはあります。
    Windowsの標準のメモ帳ではできないのでフリーのものを入れましょう。

    シェアウエアの秀丸エディターをインストールしてみましょう。

     

    秀丸エディターのGrep検索(置換)の手順

    1. 検索(S)をクリック
    2. Grepして置き換え(@)を選択

    image

    置き換え前文字列と置き換え後の文字列の指定とフォルダー選定
    1. 検索する文字列(S)に<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />をコピペ
    2. 置換する文字列(G)に<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />に上をコピー後修正
    3. 検索するフォルダー(D)にスマホテンプレートの指定
    4. 置換ボタンをクリック

    image

    あ、一つ重要なことを上の図に入れるの忘れました。

    検索するファイル(N)は「*.*」となっていますが「*.html」に修正してください。じゃないとめんどくさいことになります。

    バックアップなどの確認にチェック

    image

    結果こうなればOK

    結果以下のようになっていればOKです。

    あっという間に完成しましたね。image

     

    ちなみにこのやり方でやればすでに作成してあるサイトのテンプレートを一気に直すことも可能です。

    C:\ACES WEB\SIRIUS\data

    以下のところにすでに作っているファイルがあるはずなので同じくGREP置換してしまえば簡単に修正できるでしょう。私は600以上のファイルサクッと修正しておきました。

     

    ただし、テンプレートをいじる場合、「一文字のエラーが命取り」になることがあるので慎重に【自己責任の上】ご利用ください

    ちゃんと行えば手作業でちまちま直すよりもらくだと思いますよ。