【2016年版】SEO対策の基本の「き」。とりあえずこれをやっときゃ大丈夫!AMP, OGP, Twitterカードなどなど

こんにちはナガタです。
今回はSEOの基本についてまとめてみました。色々書いておいて、このサイトも全て対応しているわけでないので耳の痛い話なんですが、がんばってまとめたので是非御覧ください。

一旦網羅して理解しておくとグッと楽になります!


SEO対策?良質なコンテンツが大事?
賛否両論、色々とありますが、やっておくに越したことはない対策は最低限やりましょう!

重要視されているのはズバリ、セキュリティ・モバイル対応でしょう。
セキュリティはHTTPSなどがメインですね。
モバイル対応のほうでは、モバイルフレンドリー(webページのスマフォ対応)ももちろんのことながら、検索シーンを快適にするAMP(Accelerated Mobile Page)対応など、根本的な「ユーザビリティ・アクセシビリティ」を意識したユーザー体験が重要です。

Googleの中の人も言ってた事項

GoogleのJohn Mueller(ジョン・ミューラー)氏が2015年12月「English general Google Webmaster Central office-hours hangout」で語った2016年意識したい内容は、以下の項目でした。

  • AMP
  • モバイルフレンドリー
  • Javascript
  • コンテンツ
  • ユーザー体験

さて、それぞれざっくり見ていきます。

AMP

AMPはAccelerated Mobile Pageです。直訳すると加速されたモバイル用ページって感じですね。
モバイルで検索した際に検索結果にカルーセル表示され、リンクをタップすると爆速で表示します。

SmartNewsが元記事表示じゃなくてコンテンツのみ表示する機能がついてますが、あんなイメージですかね。

Googleが発表した際のコメントは、

ページの読み込みに3秒以上かかると、40%のユーザーがそれ以上の閲覧をやめてしまう

とのことです。
SEOへの影響ははっきりしていませんが「検索順位が上がるというより、ユーザーがそれを体感することで満足度が向上し、検索順位に影響を与える」とリチャード氏が言ってました。大事なのでしょう。

AMP JS以外のJavascriptが使えないなどの制限があるので意外と対応は面倒です。

サイト運営者向けAMP導入ガイド公式(日本語)はこちら。
AMP-PublisherIntegrationGuide-0.2-JA.pdf – Google ドライブ

モバイルフレンドリー

こちらは2015年

Googleがテストも用意してくれてます。
モバイル フレンドリー テスト

Screen Shot 2016-05-20 at 19.16.05

わーい。安心ですね。
ちなみに単純にスマフォサイズにすればいいという話ではなく、

  • 文字サイズが適切か
  • リンク(タップ)できる要素が近すぎないか -> 各要素を離す
  • 再生できないコンテンツ(Flashとか)がないか -> HTML5化する
  • インタースティシャルがないか(画面を覆って表示する広告や登録フォーム) -> 上部表示のバナー等に変更する
  • パソコン用ページを表示するボタンがホームページ(親ページ)になってる -> しっかりそのページごとのリンクに対応する
  • 表示が遅い

などがあります。
いまやスマートフォンユーザーの割合はサイトによっては過半数を大きく上回ることもあるはずです。しっかり対応しておきましょう!

Javascript

Googleのクローラーが、Javascriptを実行し、その結果をしっかり見るようになりました。まぁ無視できないですもんね。JS。
そのため別々においてあるJavascriptファイルなどをrobots.txtなどでブロックしている方は要注意です。インデクシングシステムはうまくやってくれないようです。

確認がめんどくさい?

もちろんあります!

ウェブサイト用 Fetch as Google を使用する – Search Console ヘルプ

このツールはサイト上でGoogleが行うクロール・レンダリングの方法をテストできます。クロールシミュレーションですね。

コンテンツ

タイトル・記事の内容は非常に重要です。ソーシャルでシェアされる昨今、これほど重要なことはないでしょう。
でも今回は割愛します。答えがわからないから。

ユーザー体験

ここも前述と同じ理由で割愛。
ただ、セキュリティやモバイルフレンドリーもユーザー体験の一部といえますので、そのあたりは当たり前のように留意しましょう。

細々してるけど忘れちゃいけないSEOシリーズ

基本的なタグ

  • description
  • keywords
  • title

キーワードも多すぎてはダメです。必要なものに絞って、きちっと設定しておきましょう。

ソーシャルメタタグ(OGP, twitterカード)

OGP

弊社のサイトだと以下です。

<meta property="og:title" content="title|unimal Co.,Ltd." />
<meta property="og:description" content="discription" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://unimal.jp/" />
<meta property="og:image" content="http://unimal.jp/images/ogp.png" />
<meta property="og:site_name" content="unimal Co.,Ltd." />

ちなみにogはOpen Graphです。その他に、fbのFacebookなどがあります。

  • og:title
    • titleですね。メディアであれば記事のタイトル。(必須)
  • og:description
    • 抜粋的なやつ(必須じゃないけど重要)
  • og:type
    • website/blog/article/profileなどがあります。blogとarticleの違いは、記事かブログサイト(TOPページとか)かという感じ。(必須)
  • og:url
    • そのページのURLを絶対パスで。絶対パス!絶対!(必須)
  • og:image
    • 表示する画像。サイズも大事。複数もOK。(必須)
  • og:site_name
    • サイト名(必須じゃないけど重要)

こちらも設定されてる値がちゃんといい感じかチェックできます。

デバッガー – 開発者向けFacebook

Screen Shot 2016-05-20 at 20.02.41

こんな感じですね。

そのほか、詳しいのはこちら:The Open Graph protocolでどうぞ。

Twitterカード

こちらはOGPのTwitter版みたいな感じです。
写真はもちろんのこと、動画などのリッチメディアをツイートに添付することができます。テキストオンリーに比べてウェブサイトへのアクセスが期待できます。

種類
  • Summaryカード
  • 大きな画像付きSummaryカード
  • Photoカード
  • Appカード

などなど、他にもそれぞれデザインされたカードがあります。ブログや通常のWebサイトであれば大きな画像付きSummaryカードが汎用的でよいかと思います。
OGPと同じようにタグを設定するのですが、

  1. カードタイプの選択
  2. メタタグの追加
  3. 検証ツールで実行&申請

が必要です。申請をするだけなので、多少手間ですが難しくはありません。
うまくいけば、こんな感じで表示されます。

Screen Shot 2016-05-20 at 20.07.24

Twitter独自なので、Twitterから公式で手順書がでています。わかりやすいので詳しくはこちらをどうぞ。
Twitterカード | Twitter Developers

canonicalタグ

<link rel="canonical" href="http://unitopi.com/">的なやつです。
スマートフォン用とURLをわけたときに、同じページ(コンテンツ)なのにURLが違うことでどちらかがコピーコンテンツと見なされてしまいます。

そこで、スマートフォン版には
<link rel="alternate" media="handheld" href="http://unitopi.com/sp/" />

としましょう。alternateは代替物、handheldは携帯用(≒携帯電話)という意味です。

各ページやる必要があります。CMS等であれば動的に設定しましょう。

その他

  • H1タグは共通とせず、ページ毎ユニークな内容な要素に設定する
  • aタグにtitle属性をつけない
  • URLの設計をきっちり(下層URLや、カテゴリごとの適切なURLを)
  • 404ページを用意しておく

まとめ

いやー疲れますね。これだけやるのは。
ちゃんとタグ等はスニペットとして自分がよく使うものをまとめておきましょう。チェックシートなんかをつくるのもいいですね。

全体的にシミュレーションツール、検証ツールがありますので、実装した後のチェックも忘れずにしたいところです!

おまけ

Google公式でSEO業者選定のアドバイス気をつけるポイントを教えてくれてます。

Google で最上位に掲載されることを保証するのは不可能です。
サイトの掲載順位を保証すると主張したり、Google との「特別な関係」を強調したり、Google への「優先登録」を宣伝したりする SEO 業者には、注意してください。

引用:SEO が必要なケース – Search Console ヘルプ

フォローして続編をチェック

@universionsをフォロー