メタタグとは?役割や書き方、確認方法について初心者向けにわかりやすく解説

最終更新日 

今回は、メタタグについてご紹介いたします。

メタタグとは、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サイトの効果改善につながるはずです。

検索エンジンに必要な指示を出せる有効な手法として、便利にうまく活用するとよいでしょう。

    執筆者  STRATE編集部

    リード情報をお求めの企業様へ
    STRATE[ストラテ]に貴社サービスを掲載しませんか?

    まずは無料で掲載