SHARE 0

SNS

SHARE 0

metaタグでできるSEO対策｜SEOに影響する属性やタグの記述例などを解説

metaタグとは、ページの設定や情報を検索エンジンやブラウザなどに示すタグのことです。Web担当者がmetaタグとSEOの関連について理解することは、SEO施策においても重要になります。metaタグの属性やSEO対策における使い方などを紹介しますので、SEO対策にぜひ役立ててください。

metaタグとは？
metaタグのおもな役割
metaタグの属性
Google がサポートしているmetaタグ
metaタグはSEOにどう影響する？
SEO対策ができるmetaタグ
metaタグを確認する方法
metaタグを書く3つの方法
まとめ

metaタグとは？

metaタグとは、Webページのheadタグ内に使用するHTMLタグのひとつです。ページの設定や情報を、サイトを訪問したユーザーではなく、検索エンジンやブラウザ、SNSなどに伝えます。metaタグには「description」「keywords」などさまざまな属性があります。

metaタグのおもな役割

metaタグにはさまざまな属性があり、役割もそれぞれ異なります。検索エンジンやブラウザ、SNSにページの概要を伝えるものや、SEOに影響するものまでさまざまです。metaタグはユーザーの利便性にも影響があるため、適切に設定することが重要です。

metaタグの属性

metaタグの属性は大きく分けると5つあります。それぞれの属性の役割と目的を理解して設定しましょう。

content属性

content属性は、name属性やproperty属性と共に使われます。他の属性が「情報の種類」を指し、content属性が「情報の内容」を指します。そのためcontent属性の属性値は、一緒に使う属性によって変わります。

http-equiv属性

http-equiv属性は、サーバーやブラウザに対して文書の状態や動作を指示できます。以下の4種類の属性値が動作を示し、content属性で詳細を指定します。charset属性とname属性とは同時に使えません。

content-language

属性値content-languageはページのデフォルト言語を指定します。content属性の属性値は言語コードが入ります。

コンテンツ言語が日本語の場合の記述例
<meta http-equiv="content-language" content="ja">

主な言語コードは以下の通りです。

ja	日本語
en	英語
zh	中国語
ko	韓国語

ただ、"content-language"はHTML5において非準拠となる方法のため、html要素にlang属性でコンテンツ言語を示すことが推奨されています。

content-type

属性値content-typeはページファイルの種類を指定します。content属性の属性値はHTMLなどのファイルタイプが入ります。HTML5以前のHTMLの場合は、この属性にcharsetで文字エンコードも追加します。

ページがHTMLファイルの場合の記述例
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

default-style

属性値default-styleはページで優先的に適用されるスタイルシートを指定します。content属性の属性値にスタイルシートの種類が入ります。

記述例
<meta http-equiv="default-style" content="sample.css">

refresh

属性値refreshはページの再読み込み（リロード）や指定URLへのリダイレクトに関する情報を指定します。content属性の属性値に再読み込みまたはリダイレクトまでの秒数や、リダイレクト先のURLが入ります。

記述例
<meta http-equiv="refresh" content="3; url=sample.html">

name属性

name属性は、ページのドキュメントデータに関する情報の種類を指定します。以下の6種類の属性値が情報の種類を指定し、content属性が情報の内容を示します。charset属性とhttp-equiv属性とは同時に使えません。

keywords

属性値keywordsはページの内容に関連するキーワードを指定できます。カンマで区切って複数指定することも可能です。Googleが評価指標にしていないと発表したこともあり、現在は記述していないサイトも多くあります。

記述例
<meta name="keywords" content="キーワード１, キーワード２, キーワード３">

description

属性値descriptionはページの概要をまとめた紹介文を指定できます。content属性の属性値にドキュメントの概要文を入れます。

記述例
<meta name="description" content="ドキュメントの概要、説明">

author

属性値authorはページの作者名を指定します。検索順位に直接影響はありません。設定する場合は、content属性に作者名を入れます。

記述例
<meta name="author" content="html文書の作者名">

robots

属性値robotsは検索エンジンのクローラに対する情報を指定します。指定する情報は、インデックス作成の許可・拒否、リンクをたどる（クロール）ことの許可・拒否です。カンマで区切って2つの情報の指定も可能です。

インデックス作成は許可、クロールは拒否の記述例
<meta name="robots" content="index,nofollow">

generator

属性値generatorはページのドキュメント作成に使用したソフトウェアを指定します。content属性にソフトウェア名を入れます。

記述例
<meta name="generator" content="ドキュメントの作成に使ったソフトウェア">

application-name

属性値application-nameはウェブアプリケーションの名前を指定します。content属性にウェブアプリケーション名を入れます。HTML5から追加されました。

記述例
<meta name="application-name" content="ウェブアプリケーション名">

property属性

property属性は、SNSでページがシェアされた際に表示するリンク先情報を指定します。表示される情報はOGP（OpenGraphProtocol）と呼ばれ、property属性の属性値にOGPの種類を指定します。

記述例
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの概要" />
<meta property="og:type" content="ページの種類" />
<meta property="og:image" content="ページのアイキャッチ画像の URL" />
<meta property="og:url" content="ページの URL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

charset属性

charset属性はHTML5以降で使用できるタグで、html文書の文字エンコードを指定します。文字化けを防ぐために、ページを作成した際に使用した文字エンコードを属性値に指定します。

記述例
<meta charset="UTF-8">

Google がサポートしているmetaタグ

Googleはmetaタグのname属性とhttp-equiv属性をサポートしています。システムはサポートしているmetaタグのみ処理し、それ以外は無視します。サポート外のmetaタグの設定は不要かと考えがちですが、ページにとって重要な意味を持つタグは設定しておいてもデメリットにはならないでしょう。

metaタグはSEOにどう影響する？

検索順位に影響するmetaタグは、5つある属性のうちの一部です。クリック率に影響したり、ユーザビリティ面の評価につながったりするmetaタグ属性をおさえることで、コンテンツのSEO対策につながります。

SEO対策ができるmetaタグ

SEOに関連するmetaタグは5つです。SEO対策のためにおさえておくべきmetaタグについて解説します。

meta description

meta descriptionで指定するページ概要文は、検索結果のタイトル下に表示されます。概要文に検索キーワードが含まれているとそこが太字で表示されるため、ユーザーはコンテンツを探す参考にします。つまりmeta discriptionはクリック率に直結しやすいタグです。

設定する際には重要なキーワードを前半に置くこと、スマホでも表示される80文字以内に内容を簡潔にまとめることがポイントになります。

記述例：キーワードが「metaタグ」の場合
<meta name="description" content="metaタグの中にはSEO対策ができるタグもあります。">

文字コード

文字エンコーディングの指定は日本語サイトでは必須です。英語版ブラウザからアクセスがあった際に、文字エンコードを設定していないと文字化けする可能性があります。設定は、html文書を作成した際に使用した文字コードに合わせてmeta charset属性で指定します。

属性値には、世界共通の文字コード「UTF-8」もしくは日本語の文字コード「Shift-JIS」などを使います。

記述例
<meta charset="utf-8">

OGPタグ

OGPタグを設定することで、SNSでシェアされた際に適切なページ情報の表示ができます。ページの拡散されやすさやクリック率に影響を与えるため、TwitterやFacebookなどソーシャルメディアからの流入において必須な設定です。OGPタグはmeta property属性で指定します。

記述例
<meta property="og:title" content="metaタグでできるSEO対策｜SEOに影響する属性やタグの記述例などを解説" />
<meta property="og:description" content="この記事ではSEOに影響するmetaタグの属性や記述例を解説しています。" />
<meta property="og:site_name" content="https://wacul-ai.com/blog" />
<meta property="og:locale" content="ja_JP" />

ビューポートタグ（meta viewport）

ビューポートタグは、デバイスの画面サイズに合わせてページデザインを最適化するために必要な設定です。スマホユーザーの評価はSEO対策にも重要な要素で、Googleでもモバイルファーストインデックス（MFI）を打ち出しています。ビューポートタグはmeta name属性で指定します。

記述例
<meta name="viewport" content="width=device-width,initial-scale=1">

noindex,nofollow

noindex,nofollowはmeta robotsで指定するタグです。noindexは検索結果に表示されること（インデックス）を避けたいページがある時に使用します。nofollowはページへのリンクを辿らせない設定です。インデックスしていたり、クローラがリンクを辿ったりするページはSEOの評価に影響するため、質が低かったり、ユーザーに不要なページはnoindex,nofollowの設定がおすすめです。

記述例
<meta name="robots" content="noindex,nofollow">

metaタグ以外でSEOに影響するタグ

titleタグ

titleタグにはページのタイトル情報を入れます。検索エンジンやブラウザにページの内容を認識してもらうために重要なタグです。また、ユーザーが検索結果で最初に目にする情報でもあるため、対策キーワードを入れること、クリックにつながる魅力的なものであることがポイントになります。

記述例
<title>metaタグでできるSEO対策｜SEOに影響する属性やタグの記述例などを解説</title>

h1タグ

h1タグもSEO対策のタグとしておさえておきましょう。h1タグはページを開いたユーザーのための情報を示すbodyタグ内に設定し、ページのタイトル部分として表示されます。Googleはh1タグから「ページの構造やテーマ」を理解します。記述する際は、重要なキーワードを含んだ簡潔な文章にします。

記述例
<h1>metaタグでできるSEO対策｜SEOに影響する属性やタグの記述例などを解説</h1>

h1タグについて詳しく知りたい方はこちらの記事もご覧ください。

h1タグとは？定義・SEOとの関係から適切な使い方まで解説｜アクセス解析ツール「AIアナリスト」ブログ

metaタグを確認する方法

Webページのmetaタグはパソコンからいつでも簡単に確認できます。metaタグを確認する方法は以下の通りです。

1.ページ上で右クリック、「ページのソース表示」を選択
2.検索ショートカットキー［Ctrl + F］で「meta」の文字列を検索

metaタグを書く3つの方法

metaタグを設定する方法は大きく分けて3つあります。普段のコンテンツ作成で活用しやすい方法を参考にしてください。

【1】自分で記述する方法

HTMLファイル作成する際に、自分でmetaタグのコードを入力して設定します。ブログサービスを利用している人向けの方法です。いくつかのブログサービスでのmetaタグ記述方法について紹介します。

アメブロでの設定

アメブロでmetaタグを設定する方法は2つです。1つめは、アメブロの「設定・管理」→「基本設定」→「ブログの表示設定」にある「タイトル」や「説明」項目に記入をします。ただ、厳密にはmetaタグではないようです。

もうひとつは、サーチコンソールで発行した「google-site-verification」のmetaタグを「外部サービス連携」の「Seach Console（旧ウェブマスターツール）の設定」項目から設定できます。

はてなブログでの設定

はてなブログのmetaタグ設定方法は2つです。ブログ全体の共通metaタグは、詳細設定の「headに要素を追加」欄から設定します。記事ごとは「設定（歯車）マーク」内の「記事の概要」でmeta descriptionの設定ができます。

FC2ブログでの設定

FC2ブログではSNSでシェアされた際に表示される情報OGPタグの設定が可能です。ブログ管理画面の左メニュー「環境設定」＞「ブログの設定」＞「メタタグの設定」でOGPを有効にします。記事の「タイトル」「説明文」「種類」「URL」それぞれのタグの詳細が自動生成されます。

ライブドアブログでの設定

ライブドアブログは自由なデザイン設定が可能です。編集は、ブログ設定＞デザイン／ブログパーツ設定のPC＞カスタマイズタブから行います。HTML編集が自由に行え、headタグ内に自分でmetaタグのコードを入力できます。

【2】WordPressで設定する方法

WordPressはインストール時のデフォルトではmetaタグが含まれていません。追加するためには、 WordPressテーマのheader.phpの中のheadセクションを編集します。descriptionのように記事ごとに設定したいmetaタグの場合は「投稿編集画面」のカスタムフィールドでプラグインを使用します。