SEOのために大切なMetaタグの書き方&WordPressプラグインでの実装

公開日:  最終更新日:2015/09/30

SEOを行いたいならMetaタグは基本中の基本。絶対使った方がいいMetaタグとその使い方をしっかりまとめました。これからWebサイトを作られる方必見です。

HTML コードキャプチャー

Metaタグとは?

Metaタグ(メタタグ)とは、HTML文書の〜内に記述される、ページの各種付加情報を定義するタグのことです。当該ページの概要を記述したり、HTML文書の文字コードの指定やJavascriptやCSSの使用宣言、検索エンジンのクローラーに対する指示など様々な目的に使用されます。

どうしてSEOにMetaタグが必要なの?

Googleがどんどん進化しているため、本文から多くの情報を読み取り順位や検索結果表示に使うようになりました。ですから、必ず必要というわけではありません。しかし、設定していないがゆえに予測できない表示になったり順位が出ない場合もあり

絶対設定したいMetaタグ+Head内のタグ

SEO対策を考えるうえで必須とも言えるメタタグ及びHead内に記載する関連タグについて、その役割や書き方を簡単にご紹介します。

1)Titleタグ

そのページの主題を記述するためのタグで、ユーザーが検索するキーワードが含まれていることがSEO対策上必須とも言えます。また、検索結果のタイトルに表示されるテキストはここに記述された内容になりますので、ユーザーが一目見てページの内容を把握できるよう簡潔に記載するよう心掛けましょう。
書き方例:


<title>このページの大見出し|サイト名</title>

2)Meta description

そのページの概要や説明の文章を記載するために使われ、通常、検索結果のページ概要に表示されるテキストはここに記述された内容になります。Titleタグ同様ユーザーがクリックする前に見る部分ですので、ページの内容を分かりやすく記載することが望まれます。
書き方例:


<meta name="description" content="ここにページの概要を記載する">

3)Meta keywords(重要度低)

Meta keywordsは半角カンマ区切りでページのキーワードを記述していきます。ここに記述されたキーワードは検索エンジンが情報を収集する時などに利用されますが、検索エンジンの度重なるアップデートにより現在では重要度が低くなっています。
書き方例:


<meta name="keywords" content="キーワード1, キーワード2, キーワード3...">

4)OGP

FacebookなどでWebページがシェアされた際に、そのWebページのタイトルやURL、概要、サムネイル画像など、ウォールやタイムラインに表示する内容を記載するためのものです。Facebookの他にmixiやGREEなど各種SNSで共通仕様になっているので各SNS毎に書き分ける必要がありません。
書き方例:


<meta property="og:title" content="Webページのタイトル">
<meta property="og:type" content="website">
<meta property="og:description" content="Webページの概要">
<meta property="og:url" content="http://www.example.com">
<meta property="og:image" content="http://www.example.com/image/example300×200.jpg">
<meta property="og:site_name" content="Webサイトの名前">
<meta property="og:email" content="連絡先メールアドレス">

5)Meta viewport

このタグはスマートフォン向けのタグで、Webページの表示領域を設定することができます。例えばPCサイトをそのままスマートフォンにも見せる場合に、HTML文書の幅と見ているスマートフォンの幅を合わせて余白がなく綺麗に見えるように設定することが可能です。
書き方例:


<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

6)Canonical(カノニカル)

このCanonicalタグは内容が重複しているページに埋め込み、本来検索結果で表示されるべきURLを指示することができるタグです。
例えばwwwがある場合とない場合の両方で同じページにアクセスできる場合にこのCanonicalを使うことで、どちらが正しいURLなのかを検索エンジンに伝えることができます。
書き方例:


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

7)Link rel=“next”とrel=“prev”(複数ページ(ページネーション)がある場合)

検索結果一覧ページや数ページにまたがったコンテンツがある場合に、このrel=”next”、rel=”prev”を使ってそのページ間の関係を検索エンジンに伝えることができます。
書き方例:


<link rel="prev" href="http://www.example.com/article?story=abc&page=1" />
<link rel="next" href="http://www.example.com/article?story=abc&page=3" />

WordPressプラグインでの実装

WordPressを利用しているサイトでは上記のような大切なMetaタグ+Head内のタグをプラグインで実装・管理することが可能です。特にこれから紹介する「All in One SEO Pack」はWordPressのSEO対策プラグインとしては定番中の定番として非常に多くの利用者がいます。

All in One SEO Pack

さきほどご紹介した1)〜3)と6)についての設定が行えるプラグインで、WordPressでのSEO対策では定番とも言えるプラグインです。

Social Meta

All in One SEO Packに含まれている機能で、4)のOGPに関する設定が簡単に行えます。

いかがでしょうか。プラグインの使い方や設定については参考になるページを以下にまとめましたので、こちらも合わせてお読みください。

All in One SEO Pack の設定方法と使い方(バズ部)

FacebookのOGPを記事ごとに思い通りに!All in One SEO PackのSocial Metaが便利だった!(男子ハック)

管理人おすすめ「安心・安全」レンタルサーバーはコチラ!

価格・サーバースペックだけでなく、安定性やセキュリティ、サポート面から判断しました。個人運用だけでなく企業様におすすめのサーバーになります。

順位 イメージ サービス名/説明
1位 カゴヤジャパン
公式サイトへ
カゴヤ・ジャパン
中小企業・小規模ECなど安定が必要なWebサイト運営に最適。専用サーバーが高品質で低価格です。
2位 エックスサーバー
公式サイトへ
エックスサーバー
使用者からの信頼が厚い、高速・多機能・高安定性をウリにしているサービス。
3位 さくらインターネット
公式サイトへ
さくらインターネット
個人におすすめのライト(月額129円)から、ビジネスプランまで幅広いラインナップ。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP ▲