今回は、メタタグについてご紹介いたします。
メタタグとは、HTMLの一部に書かれる記述のことを指し、検索エンジンにWebサイトの情報を伝える際に大事な役割を持つものです。
適切にメタタグを設定することは、SEO対策の際にも有利になるため、大変重要な作業と言えるでしょう。
メタタグの設定とSEO対策の関係、サイト構築の上で設定しておくべきメタタグの種類、書き方などについて詳しく解説します。
メタタグの意味と役割
上述した通りメタタグは、HTMLの一部に書かれる記述のことを指し、設置する文書に関する情報を指定するためのものです。
メタ要素と呼ばれることもあり、HTML文書内の<head>~</head>の中に記載し、検索エンジンにWebサイトの情報を正しく伝える役割を持っています。
メタタグで記述した内容は、コンテンツ上には表示されません。但し、titleやdescriptionというメタ要素で指定された内容は、検索エンジンの検索結果や記事がSNSでシェアされたときに表示されます。
詳しくメタ要素の設定内容を見たい時は、HTMLのソースを表示させて確認をする必要があります。
YouTubeにおいてはメタタグを設定すると、どのカテゴリーに属する動画であるかを伝えるなどのメリットもあります。
ユーザーのPV数やクリック率を高めるためにも、メタタグの意義をしっかりと理解して、適切な設定を心がけましょう。
メタタグの種類
以下、主要なメタタグを6種類紹介します。
meta description（メタディスクリプション）
meta description（メタディスクリプション）は、Webページの概要を記述するメタタグです。
ユーザーにページの内容を簡潔に伝えられるように設定します。
検索結果に表示されることを前提に、120文字程度で書くのが望ましいです。ユーザーに内容をしっかりと伝えるため、概要文の前半にサイトにとっての主要なキーワードを使用します。
具体的には、以下のように記述します。
<meta content=””概要文を120文字程度”” name=””description””>
SEOに直接関係しないため、記載しなくても問題はありませんが、ユーザーの興味を引くような文章を書けば、クリック率の向上に繋がるでしょう。
title（タイトル）
title（タイトル）は、その名の通り検索エンジンとユーザーに対し、Webページの内容を30文字程度で完結に伝えるものです。
厳密に言うとメタタグではないものの、検索順位に影響を与え、SEOに直接関係するタグなので、狙いたいキーワードを前半に使用するのがセオリーです。
ユーザーの目にひく、キャッチーで魅力的な内容を記載しましょう。
HTML文書内では、以下のように記述されます。
<title>タイトル名</title>
文字コード
文字コードは、Webページを開いた際に文字化けが発生しないように、Webページを表示する文字コードを指定するメタタグです。
メタタグの書き方は後ほど説明しますが、日本語でWebサイトを運営する場合設定は必須なので、head内の初めの方に書いておくとよいでしょう。
HTML文書内では、以下のように記述します。
<meta charset=””utf-8″”>
ビューポートタグ
ビューポートタグは、モバイル端末に対して、最適化するためのメタタグです。
Webページをスマートフォンやタブレットでも正常に閲覧できるように、文字の大きさやデザインの調整を行います。モバイル端末でのインターネット利用者が急増した昨今においては、必須の設定の一つです。
HTML文書内では、以下のように記述します。
<meta name=””viewport”” content=””width=device-width,initial-scale=1″”>
OGPタグ
OGPタグは、SNSでシェアされたコンテンツのレイアウトを設定するものです。
FacebookやTwitterなどで、コンテンツが投稿された際の、ページ全体の見た目の設定を行います。
SNSからの流入でアクセスを呼び込む狙いがある際は、必ず設定しておくべきメタタグです。
HTML文書内では、以下のように記述します。
<meta property=””og:title”” content=””ページの タイトル”” />
<meta property=””og:type”” content=””ページの種類”” />
<meta property=””og:url”” content=””ページの URL”” />
<meta property=””og:image”” content=””サムネイル画像の URL”” />
<meta property=””og:site_name”” content=””サイト名”” />
<meta property=””og:description”” content=””ページのディスクリプション”” />
noindex・nofollow
まずnoindexは、検索エンジンに登録しないWebページを設定する際に使用するメタタグです。
不要なページを除外し、コンテンツ全体の品質向上を狙う際に使用するとよいでしょう。
nofollowは、サイト内にある特定のページへのリンクを遮断する際に使用するメタタグです。
リンク先を検索エンジンにクロールさせたくない時や、リンク先のサイトと関連付けたくない場合に使用します。
HTML文書内では、以下のように記述します。
<meta name=””robots”” content=””noindex,nofollow””>
メタタグの書き方と設定方法
次にメタタグの書き方を詳しく説明します。
通常、メタタグは以下のようにページのhead内に記載します。
大文字と小文字、どちらも使用できますが、一般的には小文字で記述します。
<html>
<head>
※ここにmetaタグを記述する
</head>
<body>
</body>
</html>
メタタグをheadタグ内に追加する方法
メタタグをheadタグ内に追加する場合、「meta＋タグ」という形でコードを記述します。
前述した通り、descriptionを設定する際は「<meta name=”description” content=”伝えたい内容”>」と記述します。
単語を間違えたり、ダブルクォーテーションをつけ忘れるとエラーと判断されてしまうので注意しましょう。
まとめ
繰り返しますが、メタタグは、検索エンジンやユーザーに記事の内容を伝える重要な役割を果たします。
今まであまり意識せずWEBサイトを運営してきた方は、ぜひメタタグの意義をしっかりと理解し、適切な記述を行うようにしましょう。クリック率の向上など、Webサイトの効果改善につながるはずです。
検索エンジンに必要な指示を出せる有効な手法として、便利にうまく活用するとよいでしょう。
