SEOを意識したmetaタグ設定方法｜覚えておきたい代表的なmetaタグ10つ

metaタグとは

metaタグのメタとは、メタデータという言葉からできています。メタデータはデータについてのデータになります。

そのため、metaタグはHTMLで構成されるWebページの基本的な情報を示すタグになります。代表的なmetaダクでは、Webページの著者や文字コード、タイトル、説明文などかあります。

基本的にmetaタグで設定する内容は検索エンジン・ブラウザ向けに記述するので、Webサイト上で表示されることが無いのでユーザーは閲覧することはありません。

metaタグの種類

metaタグはそれぞれ以下の属性をセットで記述することになります。この属性を記述することでmetaタグにそれぞれ役割を分けて使うようなイメージです。

• name属性
• http-equiv属性
• content属性
• charset属性
• itemprop属性
• property属性

name属性

metaタグの要素に対して名前を付与します。ユーザーが入力した値をサーバーやブラウザに送信するための識別子です。また一緒にcontent属性を合わせて記述することで名前と値を指定して使ったりします。

http-equiv属性

metaタグはhttp-equiv属性が指定されることで、ユーザーエージェント向けのプラグマ指示子になります。

content属性

content属性は主にname属性、http-equiv属性と一緒に使って、実際の内容を指定します。

charset属性

charset属性は文字エンコーディングを指定する属性になります。基本的には「UTF-8」「Shift_JIS」「EUC-JP」を3つのどれかを指定することになると思います。

itemprop属性

itemprop属性は構造化データなどのプロパティを指定するための属性です。 例えば文書のタイトル、説明文、著者名などを指定することができます。

property属性

property属性は、SNSでシェアされたときに表示するサイト情報が指定できます。

覚えておきたい代表的なmetaタグ

数あるmetaタグですが、全てを覚える必要は無く必要なものだけ覚えれば問題ありません。ここでは特に利用することが多いmetaタグを紹介します。

ディスクリプションタグ

ディスクリプションタグはWebページの説明文を記述します。検索結果ページでタイトルとURLの下に表示されます。大体100文字から120文字程度で簡潔にまとめることを目指しましょう。

<meta content="概要文を120文字程度" name="description">

文字コード

文字コードはWebページをブラウザで表示する際の文字エンコーディングを指定します。作成した文書に合わせて「UTF-8」「Shift_JIS」「EUC-JP」の3つのどれかを指定しましょう。

<meta charset="utf-8">

コンテンツ言語

コンテンツの言語を指定するmetaタグになります。

<meta http-equiv="content-language" content="ja">

OGP

OGPタグはSNSに投稿・シェアされた時にWebサイトのタイトルやサムネイル画像を指定するmetaタグです。

<meta property="og:site_name" content="サイト名" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:url" content="ページのURL" />
<meta property="og:type" content="ページの種類" />
<meta property="og:image" content="サムネイル画像のURL" />

スマホ最適化

スマホ向けにページサイズの指定ができます。
アクセスしたデバイスサイズに合わせて最適化した表示ができます。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

noindex・nofollow

noindex・nofollowは検索エンジンのクローラーに対してインデックスしない、リンクパワーを付与しないことを指定できます。

<meta name="robots" content="noindex,nofollow">

あわせて読みたい

noindex、nofollowとは？SEO効果を高める具体的な使い方・設定を解説 【クロールさせない指示を伝えるnoindex】 noindexタグとは？ noindexはGoogleやYahooなどの検索結果ページに表示されないように、クロールに訪れたGoogle Botに伝えるm…

IE対策

Internet Explorerのブラウザ使用してアクセスされた時に利用できる互換性のモードを指定することができます。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ツールやソフトウェア名

Webページを作成したツール名、ソフトウェア名を指定できます。

<meta name="generator" content="ツール名・ソフトウェア名">

著者・作者

Webページの著者名・作者名を指定できます。

<meta name="author" content="著者名・作者名">

別ページ誘導タグ

リダイレクト・再読み込みの指定ができます。content属性を指定して、リダイレクトする秒数、リンク先URLが指定できます。

<meta http-equiv="refresh" content="10; url=index.html">

metaタグのSEOへの影響

metaタグの中でも、SEOに影響があるものがいくつかあるので説明していきたいと思います。

titleタグはSEO上とても重要

<title>タイトル名</title>

titleタグは検索結果ページの検索順位を決める上でシグナルの1つになっています。Google検索セントラルの「ウェブマスター向けガイドライン」でもGoogleのクローラーがページの内容を理解するためにtitleタグを使っていると記載があるためSEO評価にも影響があることが分かります。

titleタグは検索結果ページ上に表示されるので、キーワードを詰め込んだりユーザーがページの内容が分からないようなタイトルにならないように注意して、狙っているキーワードを入れながらコンテンツの内容を適切に伝えるタイトルを付けましょう。

あわせて読みたい

titleタグとは？SEOを意識した効果的なtitleタグの設定方法 今回はSEO対策を行う上で非常に重要とされているtitleタグについて、正しい設定方法・悪い設定を見ながら解説していきたいと思います。 【titleタグとは】 titleタグと…

titleタグ・descriptionタグはクリック率に影響を与える

<title>タイトル名</title>
<meta content="説明文" name="description">

titleタグとdescriptionタグは検索結果ページ上に表示されるので、ユーザーはどのWebページの情報を見ようとするかを決める時の判断材料になります。ついついクリックしたくなるような魅力的なタイトルや自分が得たい情報が分かりそうなページをクリックするので、狙っているキーワードからユーザーの検索意図を推測してそれに応えるようなタイトルと説明文を設定しましょう。その結果、検索結果ページ上のクリック率も向上していきます。

あと意外と見落としがちなのですが、タイトルはFacebookやTwitterなど、SNSでシェアされた時にも表示されるのでSNSからの流入を意識してサイト運営されている方は意識した方が良いでしょう。

keywordタグはSEO効果は無い

<meta name="keywords" content="keyword1,keyword2,keyword3">

以前はkeywordタグに狙ってるキーワードを設定することでSEO評価がありましたが、現在はkeywordタグに設定しても直接SEO評価に影響はありません。そのため、keywordタグは設定してもしなくてもどちらでも大丈夫です。keywordタグを設定していないWebサイトも多くなっています。