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

更新日:

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

    メタタグとは、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[ストラテ]に貴社サービスを掲載しませんか?

        まずは無料で掲載