メタタグは、ウェブブラウザには直接表示されませんが、検索エンジンなどのウェブロボットがページの内容を理解するのに役立ちます。特に「description」や「keywords」のメタタグは、SEO対策、検索エンジンの検索結果に影響を与えることがあるため、適切な内容を記述することが重要です。ウェブページのSEO対策やユーザビリティ向上のために、メタタグの適切な使用は欠かせません。
メタタグとは
メタタグとは、HTMLファイルの<head>～</head>要素内に記述するタグのことです。検索エンジンに対してタイトルや概要など、Webページの情報を提供するために用いられます。
メタタグは、Webページの品質や評価に関わる重要な要素です。検索エンジンやブラウザなどにWebページの情報を伝える役割を果たし、SEO対策やレスポンシブデザインなどにも影響を与えます。
ただしメタタグは、Webページを閲覧しているユーザーには直接見えません。そのため、メタタグを確認するには、HTMLソースを表示しましょう。
メタタグの書き方
メタタグの書き方は、<meta>という要素名で始まり、属性と値の組み合わせで情報を指定します。
属性とは、指定する情報の種類や名前を表すもので、値とは、情報の具体的な内容を表すものです。属性と値は、以下のように「属性=値」という形で記述し、複数ある場合はカンマで区切ります。
|
<meta name=”属性名” content=”値”> |
たとえば、Webページのメタディスクリプションを記述する場合は、<head>～</head>タグの間に以下のように書きます。
|
<meta name=”description” content=”メタディスクリプションにはページの説明を入力します”> |
ほかにも、「このWebページはUTF-8でエンコードされている」というメタデータを指定する場合は、以下のように書きます。
|
<meta charset=”UTF-8″ > |
メタタグの設置場所
HTMLファイルに直接メタタグを設置するときは、<head>~</head>タグ内に記述します。<head>~</head>タグは、ヘッダーと呼ばれる部分で、Webページに関する情報や設定を記述する場所です。
具体的には、以下のように記述します。
|
<html> <head> <meta name=”description” content=”ページの説明を入力してください”> </head> <body> ページの本文 </body> </html> |
ただしWordPressを使用している場合は、All in One SEOやYoast SEOなどのプラグインでメタタグを設置することも可能です。
メタタグがSEO対策で重要な理由
メタタグは、検索エンジンに対して、Webページの内容や意図を伝える役割を持っています。SEO対策のなかでも内部対策に該当します。
メタタグがSEO対策で重要な理由を解説していきましょう。
ページの内容や特徴を検索エンジンに伝える
メタタグは、検索エンジンやブラウザなどにWebページの情報を伝えるHTMLタグです。
たとえば、titleタグやmeta descriptionタグは、ページのタイトルや概要を記述することで、検索エンジンにページのテーマやキーワードを伝えることができます。検索エンジンは、メタタグの要素からページの関連性や品質を判断します。
また、メタタグを解析してページの内容やキーワードなどを判断し、検索結果のランキングを決定する際に参考にしています。そのため、メタタグの適切な設定はSEO対策において重要な要素といえるでしょう。
ユーザーのクリック率向上につながる
titleタグやmeta descriptionタグで指定した情報は、検索結果の画面に表示されます。そのため、ユーザーにページの内容を分かりやすく伝えることで、興味を持ってもらうためのきっかけになります。
とくにdescriptionタグは、検索結果ページに表示されるWebページの概要文に反映されます。そのため、Webページに書かれている内容がわかり、ユーザーの興味を引くことができればクリックされやすくなるでしょう。
メタタグを適切に設定することで、検索エンジンからの評価だけではなく、ユーザーからのクリック率を高めることも可能です。
ページの表示や動作を最適化する
メタタグの中には、ページの表示や動作を最適化するためのデータを指定するものがあります。
たとえば、ページの文字コードを指定して文字化けを防いだり、ページの表示領域やスケールを指定してレスポンシブデザインやモバイルフレンドリーな表示を実現したりできます。
ユーザーがストレスなく快適にWebページを閲覧できれば、ユーザーの満足度を高めることができます。またメタタグを適切に設定することで、検索エンジンからの評価を高めることにつながるわけです。
関連記事：【最新版】正しいSEOとは？5つのSEO対策とチェックリスト
SEOで重要な6つのメタタグとは
SEOで重要なメタタグとは、検索エンジンに対して、Webページの内容や目的を伝える役割を果たすメタタグのことです。
SEOで重要なメタタグには、以下のようなものがあります。
- title（タイトル）タグ
- metadescription（メタディスクリプション）
- 文字コード
- ビューポートタグ
- OGPタグ
- noindex・nofollow
6つのメタタグをそれぞれ紹介します。
title（タイトル）タグ
titleタグは、ウェブページのタイトルを指定するために用いられるタグです。検索エンジンはtitleタグを利用してページのタイトルを把握し、検索結果ページに表示します。
たとえば、以下のように記述します。
|
<head> <title>メタタグ（metaタグ）とは？SEO対策で重要な6つのタグを解説</title> </head> |
Webページの内容や目的を簡潔かつ魅力的に表現することが重要です。
titleタグは重要なメタタグの1つであり、SEO対策には欠かせません。
関連記事：SEO｜タイトルの付け方とは？文字数・効果・検索順位UP事例を解説
metadescription（メタディスクリプション）
metadescription（メタディスクリプション）は、Webページの説明文を指定するためのタグです。metadescriptionタグは、検索エンジンの検索結果に表示されるスニペット（文書の要約）として利用される可能性があります。
たとえば、metadescriptionタグは以下のように記述します。
|
<head> <meta name=”description” content=”メタタグの概要やSEO対策で重要なタグ、メタタグの作成方法など、メタタグの基礎知識をわかりやすく解説します。”> </head> |
検索結果を見たユーザーがWebページを読みたくなるように、ページの内容や目的を詳しく、さらに魅力的に伝えることが欠かせません。
適切なmetadescriptionを記述することで、検索エンジンやユーザーにとって有用なページであることをアピールできます。
関連記事：ディスクリプション(description)とは？文字数や書き方、SEO効果、クリック率などを事例付で解説
文字コード
文字コードは、HTMLドキュメント内で使われる文字のエンコーディング方法を指定するために用いられるタグです。
文字コードが正しく設定されていない場合、日本語などのマルチバイト文字が文字化けしてしまったり、ページの文字が正常に表示されなかったりすることがあります。
たとえば、以下のように記述します。
|
<head> <meta charset=”UTF-8″> </head> |
Webページの文字や記号を正しく表示させるためには、文字コードを指定しておくとよいでしょう。
関連記事：HTMLタグを基礎からおさらい。SEOに必須のタグを事例付きで紹介
ビューポートタグ
ビューポートタグは、スマートフォンやタブレットなどのデバイスでの表示に関する設定に用いられます。
ビューポートとは、ブラウザが表示する画面領域のことです。ビューポートを指定することで、文書のレイアウトやサイズを画面幅やデバイスに合わせて調整できます。
例えば、ビューポートタグの記述は以下のとおりです。
|
<head> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> </head> |
上記ではビューポートの幅をデバイスの幅に合わせて、初期の拡大率を1.0に設定しています。他にも、最大や最小の拡大率やユーザーのズーム操作の可否などを指定することもできます。
ビューポートを指定しない場合、文書が画面に収まらなくなったり、文字が小さくなりすぎてしまったりします。そのため、ズームやスクロールが必要になるなどの問題が発生する可能性があります。
ビューポートタグを正しく設定することで、スマートフォンやタブレットでの表示が最適化されるため、ユーザー体験が向上します。
検索エンジンは、モバイルフレンドリーを評価して、検索結果の順位付けに影響させることがあるので、見やすい表示設定をしておくことが大切です。
OGPタグ
OGPタグは、Open Graph Protocolの略で、FacebookやTwitterなどのソーシャルメディア上での表示を設定するタグです。OGPタグを設定することで、リンクがシェアされた際に表示されるタイトルや画像などを指定できます。
たとえば、OGPタグは以下のように記述します。
|
<head> <meta property=”og:title” content=”メタタグ（metaタグ）とは？SEO対策で重要な6つのタグを解説” /> <meta property=”og:description” content=”メタタグの概要やSEO対策で重要なタグ、メタタグの作成方法など、メタタグの基礎知識をわかりやすく解説します” /> <meta property=”og:url” content=”https://example.com/blog/metatag”/> <meta property=”og:image” content=”https://example.com/image.jpg” /> <meta property=”og:type” content=”article” /> <meta property=”og:site_name” content=”ミエルカマーケティングジャーナル” /> </head> |
OGPタグを設定するとシェアされたときにユーザーの目に留まりやすくなり、さらなる拡散も期待できます。OGPタグは必ず設定しておきましょう。
関連記事：OGPとは？設定方法と画像サイズ、表示例＆テクニック集（Facebook、Twitter、LINEごと）
noindex・nofollow（robotsメタタグ）
robotsメタタグは、検索エンジンのクローラー（ロボット）に対して、Webページのクロール設定を指定するためのメタタグです。
robotsメタタグを使用することで、以下の設定ができます。
- noindex：検索エンジンのインデックスに含めないようにする
- nofollow：リンクをたどらないようにする
- noarchive：キャッシュを取得しないようにする
- nosnippet：スニペットを表示しないようにする
また、robotsメタタグの設定を組み合わせることも可能です。
たとえば、以下のようにnoindexとnofollowを組み合わせることで検索エンジンのインデックスから除外し、該当ページに含まれるリンクをたどらないようにできます。
|
<head> <meta name=”robots” content=”noindex,nofollow”> </head> |
robotsメタタグは、クロールするページを適切に制御して、検索結果に表示されるページを最適化したい際に役立ちます。
関連記事：【動画】インデックスとは？SEOの基礎、検索エンジンの仕組みを学ぼう
メタタグの確認方法
メタタグの確認方法としては、以下の2つがあげられます。
- ソースコードを見る
- ツールを使う
ソースコードを見て確認する場合は、ブラウザの「ページのソースを表示」機能を使います。
Webページを開いた状態で、右クリックをして「ページのソースを表示」を選択すると、上記のようにWebページのソースが表示されます。
また、ツールを使って確認する方法もあります。
メタタグを確認するためのツールの例としては、以下のとおりです。
ツールを使うと、メタタグの記述が正しいか、検索エンジンやブラウザにどのように表示されるか、改善点やヒントなどを簡単に確認できます。
メタタグ作成時の注意点
メタタグは、Webページの内容や目的を適切に表現することが重要です。
とくに、titleタグやmetadescriptionタグは、検索エンジンの検索結果やブラウザのタブに表示されるため、ユーザーにとって魅力的でわかりやすいものにする必要があります。
ただし、キーワードを過剰に記述したり、関係ないキーワードを記述したりすると、検索エンジンからペナルティを受ける可能性があるので注意しなければいけません。
メタタグは、ページの品質や信頼性を高めるためにも適切に記述することが重要です。
SEO対策の効果を得るためには、メタタグを正しく設定しよう
メタタグは、検索エンジンがウェブページを正しく解釈し、ランキングするために重要な役割を果たします。
メタタグを適切に設定することで、ウェブページの品質向上につながり、検索エンジンからのアクセスを増やすことが可能です。
また、メタタグには多くの種類があり、それぞれのタグには適切な書き方や設置場所があります。注意点を抑えて、適切なメタタグを設定し、SEO対策をおこないましょう。
ミエルカでできること
