meta

  • 通常、ヘッダに入るmetaタグのdescriptionとkeywordsは全ページ共通のことが多いが、SEOに適したヘッダにするためには、各ページ毎に合わせたmetaタグでdescriptionとkeywordsを設定しておくのが好ましい。

    WordPressのプラグイン、All in One SEO Packは各記事に対して個別のdescriptionとkeywordsを設定することができるが、WordPress PDA & iPhoneのような特殊なテンプレートでは反映されないケースが生じる。

    そういった場合に対応し、descriptionには記事の抜粋、metaタグのkeywordsには記事で設定したタグが自動で入るようにする。

    以下のコードを既存のメタタグ部分と差し替え、または挿入する。
    なお、前半、descriptionの部分にある「160」は抜粋(カット)する文字数なので、160文字も必要ないという人は適宜変更してもらいたい。
    また、キーワードに関してはgoogleは一切評価しないとも言われているが、SEO全体としてkeywordsもきちんと記載することが好ましいと考える。
    下記のコードではタグに設定したものを半角カンマ区切りで書き出し、タグが未設定のものはデフォルトのキーワードを書き出す。

    <meta name="description" content="<?php
    $descrip = mb_substr(ereg_replace("(\r|\n|\r\n)","",strip_tags($post->post_content)),0,160)."...";
    if(is_single()){echo $descrip;}else{bloginfo('description');}
    ?>" />
    <meta name="keywords" content="<?php
    $tags = get_the_tags();
    if($tags){
    $total = count($tags); $count = 1;
    foreach($tags as $tag){
    if($total == $count){echo $tag->name;}else{echo $tag->name . ', ';}
    $count++;
    }
    }else{echo 'デフォルトのキーワード';}
    ?>" />

     

  • 同じページ、レイアウトも変更せず対応する方法

    iPhoneでPC向けページを表示させた場合、デフォルトで横幅980pxを想定して表示するようになっている。

    つまり、少し前に作られた横幅が750px等のサイトの場合、左右に無駄な余白ができ、さらに表示が小さくなる。

    そういった場合、以下のメタタグを入れることにより、無駄な余白を無くすことが可能。

    ※サイトの左右が750pxの場合

    <meta name=”viewport” content=”width = 750″ />

  • iPhone 向けサイトにアクセスした場合、通常は上にURLを入力するエリア、
    下部に「戻る、進む、ブックマーク」のボタンのついたパネルが常に表示される。

    上部のURLエリアは、以下にjavascriptで簡単にスライドさせることができる。

    ■サンプルjavascript


    <script type="text/javascript" charset="utf-8">
    window.onload = function(){
    setTimeout(function(){window.scrollTo(0,1);},100);
    }
    </script>

    下部のパネルは以下のタグを入れる

    <meta name="apple-mobile-web-app-capable" content="yes">

    ■サンプルサイト(iPhone用壁紙サイト)
    Wallpapers@iPhoneStyle
    http://iphone-sns.com/wallpaper/

    ただし、下部パネルが非表示になるのは、ホーム画面に追加したもののみ。