webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ

Googleの情報でSEOを体系的に学ぶ

f:id:tkosuga:20160804205854j:plain

絵はともだちが書いたみーこ。

SEOブラックボックスなイメージが強いと思います。ですが最近はGoogleから日本語ドキュメントが多数公開され、さらに整備されているので勉強し易くなりました。

インハウスSEOを行っている方、協力会社でSEO作業をしている方、そのマネジメントをしている方向けにSEOを体系的に学べる情報をまとめました。※2016年8月22日時点

具体的には以下のような方向けです。

検索の仕組みについて

検索エンジンクローラーがサイトに訪問してページを収集、それをデータベースに入れて検索できるように処理をして(index/インデキシング)、検索結果ページに表示するのが一連の流れです。

この流れを見るとSEOの目的が少し理解し易くなると思いますよ。

SEOについて

ここでのSEOとは検索ランキングを上げる方法ではなくて、Google検索エンジン利用者にとって望ましい(と思われる)検索結果ページを返すために、ページをクロールする先のサイト運営者にして欲しい事柄だと思って下さい。

そのため検索エンジンの利用者とクローラーBOT)に違うコンテンツを見せる行為(クローキング)には避けるようにと明示をしたり、クローラーで読み取れないフラッシュコンテンツやJavaScriptで構築されたウェブアプリケーションへの注意を明示しています。

品質について

ここでの品質はウェブサイトの品質とコンテンツの品質が混ざった話です。基本的にはGoogleクローラーがサイトを辿り易くするのと、Google検索エンジンがコンテンツを評価し易くするための方法です。

モバイル対応

WordPressのモバイル対応方法がモバイル対応のテンプレートを使ってね。が基本になっているのが海外の発想らしくて良いですね。

モバイルからの検索量が増えている昨今、モバイル検索経由で訪問したユーザーに満足してもらうにはモバイルフレンドリーなサイトである事が望まれています。

ページスピードの向上

高速なインターネットの実現に情熱を注いでいるGoogleはウェブサイト高速化について本当に細かく情報を公開しています。

主にモバイル検索ですが索結果ページのランキング要素にページスピードが含まれているため、SEO対策の中にページ速度の改善も含まれてきます。ちなみに速いレンタルサーバーにサイトを乗せ換えれば速くなるから完了と言うものではないですよ。

Google検索結果ページの補助コンテンツと仕様

Google検索結果には、Googleが主導して仕様策定を進めたAMPや、マイクロフォーマットのschema.orgでの記述内容が表示されます。

これらは検索ランキングを上げるものではないとGoogleが回答していますが、サイト上で適切に実装されていれば検索結果からのトラフィック量を増やすにの有効な方法です。

エンジニア・プログラマ向け情報

ツール

Googleが開発して公開しているPageSpeedモジュールやChrome開発者ツールの説明を読んで動作を試して見るとSEOへの理解が深まると思います。

トレーニング

無料で利用できるUdacityでGoogleが公開しているウェブサイトについてのトレーニングコースはSEOの理解を深くする上で役に立ちます。

まとめ

Googleから公開されている情報を見直してみると、今まで気づいてなかった改善点など見つかるかも知れませんよ。

ただどんなにサイト分析して計画を立てて改善点を上げても、サイトの仕組み上できない事が多ければ時間を浪費するばかりなのでまずはサイトを運用・保守・開発している現場スタッフと相談してSEOを組み立てるのがおススメです。

いまのウェブプログラマーウェブデザイナー、ウェブマスターはSEOに慣れているせいか知識のある方が多いですし、少し追加で勉強すればマネージャーが思った以上にSEOを理解してくれますよ。

「Facebookで共有する」ボタンを高速・快適に表示するスクリプトの説明

f:id:tkosuga:20160726182807j:plain 写真はうちのみーこ。

昨日のツイートボタン表示と同じようにFacebookでも「共有ボタンの表示が遅い&重い」問題があります。

Facebookで共有ボタンを外すと当然速くなりますがサイトへのトラフィックが減る事になるので本末転倒です。

遅くなる&重く感じる理由はページの初期化が一斉に行われている中でFacebookスクリプトの読み込みと初期化が同時に行われているからです。

そのため任意のタイミングで初期化を行う、例えば共有をする直前で初期化する、仕組みにするともっさり感じが減って快適になります。

以下、任意のタイミングでFacebook JavaScript SDKを初期化してボタンを押すと共有ボタン表示を行うサンプルコードです。

    function initFacebookAPI(loadedHandler) {
      window.fbAsyncInit = function() {
        FB.init({xfbml: false, version: 'v2.7'});
        loadedHandler();
      };
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    }
    initFacebookAPI(
      function() {
        document.getElementById('show-fb-share-button').onclick = function() {
          FB.XFBML.parse();
        };
      }
    );

HTMLは以下のようにしておきます。

  <div>
    <button id="show-fb-share-button">show-fb-share-button</button>
    <span class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" ref="unique-parameter-value">
    </span>
  </div>

個別に説明して行きます。

以下スクリプトクイックスタート: Facebook SDK for Javascriptで説明されている内容に手を加えたものです。

      window.fbAsyncInit = function() {
        FB.init({xfbml: false, version: 'v2.7'});
        loadedHandler();
      };
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

まずsdk.jsが非同期に読み込まれます。読み込みが完了すると fbAsyncInit が呼び出されます。

fbAsyncInit では FB.init を呼び出しFacebook SDKの初期化を行います。

オプションの xfbml を false にすると、XFBMLマークアップを自動的にパースして共有ボタンを設置・表示する処理が行われません。共有ボタンは任意のタイミングで表示させたいので falseにして高速化します。

次に「シェアボタンを表示」を押したタイミングでFacebook共有ボタンを表示するようにします。

    initFacebookAPI(
      function() {
        document.getElementById('show-fb-share-button').onclick = function() {
          FB.XFBML.parse();
        };
      }
    );

事前にFacebookSDKの初期化が完了しているので FB.XFBML.parse を呼び出すとFacebook共有ボタンが表示されます。

以上でFacebook共有ボタンの表示タイミングをずらす事で快適に表示できるようになりました。

すっきり。

Facebook Javascript SDK の読み込みと初期化速度を測定するテストページを設置しました。

https://tkosuga.jp/experimental/comfortable-facebook-share-button.html

テストしてみるとSDKの初期化は速いですがFB.XFBML.parseに時間が掛かっているのが分かります。共有ボタンの表示はページ読み込み時からずらした方が快適になると思います。

この記事はレコーディングダイエットができるウェブアプリを開発した中で「Twitterで共有する」機能を実装している中で色々調べた内容をまとめたものです。

tkosuga.jp

インストール必要なしブラウザで動作するのでよかったら試して見て下さいね。

「Twitterで共有する」ボタンを高速・快適に表示するスクリプトの説明

f:id:tkosuga:20160731002044j:plain 写真はうちのみーこが子猫だった頃。

「ツイート」ボタンを表示しているサイトが抱える共通の課題に「ツイートボタンの表示が遅い&重い」があります。

ツイートボタンを外すと当然速くなりますがサイトへのトラフィックが減る事になるので本末転倒です。

この遅くなる&重く感じる理由は、ページ表示タイミングで各スクリプトの読み込みと初期化が一斉に行われている中でTwitterスクリプトも同じく読み込みと初期化が行われているためです。

ページを読み進めてツイートボタンが表示された時に初めて初期化するなど、ページ読み込み時ではなく任意のタイミングでTwitterスクリプトの読み込み・初期化・表示を行うとこの課題を解決できます。

以下、任意のタイミングでTwitterスクリプトを初期化してツイートボタン表示まで行うサンプルコードです。

    function initTwitterAPI(loadedHandler, clickHandler) {
      window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
          t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function(f) {
          t._e.push(f);
        };
        return t;
      }(document, "script", "twitter-wjs"));

      window.twttr.ready(function(twttr) {
        window.twttr.events.bind('loaded', function(event) {
          if (!event) return;
          loadedHandler(event);
        });
        window.twttr.events.bind('click', function(event) {
          if (!event) return;
          clickHandler(event);
        });
      });
    }
    setTimeout(function() { // 任意のタイミングを1.5秒後として初期化を行う。
      initTwitterAPI(
        function(event) {
          window.twttr.widgets.createShareButton(null, document.getElementById('twitter-share-button'));
        },
        function(event) {
          document.getElementById('twitter-share-thanks').innerHTML = "thank you your tweet!!";
        }
      );
    }, 1500);

個別に説明して行きます。まずTwitterAPI(platform.twitter.com/widgets.js)の初期化はSet-up Twitter for Websitesの内容ままです。 このコードは非同期に実行され初期化が終わるとTwitterAPIの twttr が利用できるようになります。

      window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
          t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function(f) {
          t._e.push(f);
        };
        return t;
      }(document, "script", "twitter-wjs"));

次にloadの完了とツイートボタンをclickした時のイベントを追加します。loadedHandler と clickHandler は初期化時に引数で指定しています。 このイベントはScripting: Eventsで説明されている内容です。 イベントの主な用途にはGoogleAnalyticsでツイートボタンをクリックされた回数をトラッキングする等があります。

      window.twttr.ready(function(twttr) {
        window.twttr.events.bind('loaded', function(event) {
          if (!event) return;
          loadedHandler(event);
        });
        window.twttr.events.bind('click', function(event) {
          if (!event) return;
          clickHandler(event);
        });
      });

任意のタイミングでTwitterAPIを初期化して同時に実行したいハンドラーを引数に指定します。

1つ目のハンドラー内でシェアボタンを動的に作ります。twttr.widgets.createShareButton はScripting: Factory FunctionsTweet Button JavaScript Factory Functionで説明されています。 2つ目のハンドラー内でツイートボタンを押してくれた人に向けて感謝のメッセージを動的に表示します。

      initTwitterAPI(
        function(event) {
          window.twttr.widgets.createShareButton(null, document.getElementById('twitter-share-button'));
        },
        function(event) {
          document.getElementById('twitter-share-thanks').innerHTML = "ツイートありがとう!!";
        }
      );

以上でツイートボタンを快適に表示できるようになりました。

すっきり。

CodePenにデモを設置しました。Run Penを押して挙動を確認して下さい。

codepen.io

この記事はレコーディングダイエットができるウェブアプリを開発した中で「Twitterで共有する」機能を実装している中で色々調べた内容をまとめたものです。

tkosuga.jp

インストール必要なしブラウザで動作するのでよかったら試して見て下さいね。