サイト管理に重要なmetaタグの設定・最適化方法

SEOならSEOパック
2016年04月11日 2022年10月06日

サイト管理に重要なmetaタグの設定・最適化方法

只今タイムセールを実施中です。

SEOの基本とも言えるmetaタグの書き方や最適化方法について考えていきます。

サイトを管理していく中で、検索順位を考慮したディスクリプションなどのmetaタグは、全て「重要」と考えがちですが、実はそれほど重要ではないタグもあります。
改めて各タグの重要度を考えて、適切にmetaタグを設置しましょう。

サイト管理に重要なmetaタグの設定・最適化方法


はじめに、基本となるmetaタグがこちらです。
metaタグは<head>と</head>の中に記載します。
Facebookや、twitterでの拡散も考えてmetaタグにOGPとtwitterカードも記述しています。

<!doctype html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="utf-8">
<title>ページのタイトル</title>
<meta name="description" content="ページの説明" />
<meta name="viewport" content="width=device-width"> /*スマホ対応する時は記述*/
<link rel="canonical" href="正規化するurl"> /*必要あれば*/

<!-- facebookに関するタグ -->
<meta property="og:site_name" content="サイト名" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website" /> /*トップページ以外はarticle*/
<meta property="og:url" content="ページのurl" />
<meta property="og:image" content="シェアされた時のサムネイル" />
<meta property="fb:app_id" content="アプリid" />
<meta property="og:description" content="ページの説明"/>
<meta property="og:locale" content="ja_JP" />

<!-- twitterに関するタグ -->
<meta name="twitter:card" content="カード表示の種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:description" content="ページの説明" />
<meta name="twitter:image:src" content="投稿時の画像" />

<link rel="stylesheet" href="/css/index.css" type="text/css" media="all" />
</head>

<body>

<!-- こちらにコンテンツ -->

</body>

</html>

上記を詳細に説明するとhtml5や、構造化データについてなど色々と膨らんでしまうので、
本記事ではmetaタグに絞ってご説明します。

description

metaタグの中でdescription(ディスクリプション)は検索結果のページタイトルの下に表示される説明文となります。
スニペットとも呼ばれるdescriptionですが、キーワードを意識して、クリックしたくなるような説明文、そして不自然にならないよう全角120文字程度に収めます。

ディスクリプションは順位に影響しない?

ページタイトルは順位に影響しますが、ディスクリプションは順位に直接影響するというより、クローラーと検索ユーザーにページの内容を正しく伝える役割を果たします。
しかし魅力的な内容である場合、検索ユーザーがディスクリプションを確認しクリックしてサイトに訪問してくれる為、直接順位に影響しないからといって軽視できません。ページタイトルとともに、全ページ重複しないように設定するようにしましょう。

viewport

viewportはスマホ対応する際に必須となるmetaタグで、サイトを表示するデバイスの横幅のサイズでページを表示するというものです。

詳しくはこちらをご覧ください。
レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編

OGP設定

OGPはOpen Graph Protocolの略で、設定したOGPタグを有効にするタグとなります。
Facebookに関しては、head要素にprefix属性を追加してOGPを使用する宣言が必要になるので、注意が必要です。

xhtmlの場合、htmlにタグを追加

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

html5で構築していない場合、統一してこのタグをhtmlへ追加します。

html5の場合、headにタグを追加

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

トップページの場合、articleと記述してある2箇所をwebsiteとして記述します。
注意点として、こちらはheadタグに記述するという点です。

twitterカード

投稿されたツイートにサイト情報も追加されます。(基本はOGPの内容を参照します。)
その他、twitter独自のタグを追記します。そしてタグの設置が完了した後、別にtwitterへ申請が必要となります。
承認後、URLをツイートすると、ツイートの下に設定したカードが表示されます。

twitterカード表示の種類

ツイッターカードの表示には数種類ありますので、選んで記述します。

  • Summary
  • Summary Card with Large Image
  • Photo
  • Gallery
  • App
  • Player
  • Product

Keywords

meta keywordsタグに関しては、現在Googleは一切評価の基準とはしていないとのことなので無くても問題ありません。
今も多くのサイトでこのメタタグを設置しているのは昔、評価に影響していたためです。

<meta name="Keywords" content="キーワード" />

metaキーワードに関してのSEO効果は下記の記事も参考にしてみてください。

メタキーワード(meta keywords)とは、HTMLのhead部分に記述するmetaタグのひとつです。メタキーワードに関しては、SEO効果が認められなくなったため記述する必要はありませんが、SEO上位表示させるコンテンツを作るにあたっての概念としては必要です。例えば、キーワードを何も設定しない日記のような記事コンテンツだと、ロングテールのような自然検索の積み上げは期待できません。ということで、この記事ではメタキーワードでSEO効果を見いだすのではなく、上位表示するために必要なキーワード選定方法としてメタキーワードをご説明...

その他:titleタグ

titleの文字数

なるべくターゲットキーワードを先頭に、そして不自然にならないようにサイトタイトルを全角で35文字程度に収めて書きます。
それ以上文字数が多いと「…」で省略されてしまい、タイトルによっては何のサイトかわかりにくくなってしまい、クリック率も減ってしまうことも考えられます。

titleのページタイトルの重要度

ページタイトルは検索順位にも大きく影響するので、慎重に決めましょう。
ただ、あまり順位が上がらないからといって何度も変えてしまうと正しくクロールされず、逆に順位が上がらない。という可能性もあります。

その他:canonical

下記urlは、全て同じくアクセスできてしまうことから、評価が分散してしまう恐れがあります。
これを統一させる方法のひとつとして、「カノニカル」というタグがあります。
この他にも、.htaccessで301リダイレクトするという設定方法もありますので、詳しくは検索してみてください。

wwwの有無

  • http://www.example.jp/
  • http://example.jp/

index.html/phpの有無

  • http://example.jp/
  • http://example.jp/index.php
  • http://example.jp/index.html

httpまたはhttps

  • http://example.jp/
  • https://example.jp/

パラメータの有無

  • http://example.jp/?blog
  • http://example.jp/

metaタグについてまとめ

metaタグを改めて見てみると意外と、直接検索順位に影響しそうなのはなさそうですがサイトへの集客に影響が出てくる「ディスクリプション」や「OGPタグ」などがあります。metaタグは検索エンジンや検索ユーザーに正しくページの内容を伝えるために必須のタグです。
これを参考に、内部対策の見直しをしてみましょう。

そして、今回のmetaタグについての説明は、内部対策のごく一部となりますが、SEOの外部対策としては被リンクが現在も重要な役割を果たします。

SEO Packは外部対策(被リンク)+ツール+ノウハウが月額固定でご利用いただける総合SEO対策パッケージとなっております。ぜひ、内部対策と並行して外部対策には、SEO Packをご検討ください。

SEOパーソナル診断
SEO内部対策 トップに戻る

SEOツール無料トライアル

プロも個人も、高機能なSEOツールを体験ください。

コンテンツ分析や内部SEO対策、競合分析ができるSEOツールが7日間体験可能!

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されておりますのでご確認ください。

SEO Packキャンペーン
内部修正サービス

公式SNS

Twitter

facebook