メタタグとは？HTML記述方法とSEO効果について

何気に記述しているヘッダー内のメタタグ要素を正しく最適化していますか？

メタタグには検索順位に影響する重要なものや、ユーザーやクローラーにそのページがどんな内容のものなのかを伝えるものまで様々です。

では今回は、メタタグの意味や、html記述法、そして気になるSEO効果などをご説明したいと思います。

メタタグとは

まずはじめにメタタグとは、webページの設定や情報等を伝える、htmlファイルのheadタグ内に記述するタグのことです。

ここに複数の属性や属性値を指定することによって、webページのさまざまな設定や情報を検索エンジンのクローラーに伝えることが可能です。

「http-equiv」「name」「content」「property」「charset」といった様々な属性があり、中でも「description」や「keywords」は聞いたことのある方も多いのではないでしょうか？

メタタグのSEO効果

次にメタタグを設定することで、以下のようなSEO効果があると考えられます。

ここにキーワードを詰め込むことによる効果は期待できませんが、適切に設定することによってユーザーやクローラーに内容を理解してもらいやすくなり、正しく評価されると思われます。

ページをインデックスさせない

質の低いページや不要なページを検索結果に表示させない（インデックスさせない）ことを意味する「noindex」というメタタグを指定することによってサイト内に質の高いコンテンツを充実させてSEO効果を高めることが考えられます。

クローラーは全てのリンク先を巡回してインデックスしていきます。
そのため、インデックスさせたい場合は特に“index”などと記述する必要ありません。

記述例

リンクを辿らせない

質の低いコンテンツへのリンクをクローラーに辿らせないメタタグを指定することによってSEO効果を高めることも大切です。

これは、metaタグを使ってページ全部のリンクにまとめて適用する方法と、a要素を使ってリンクごとに適用する2つの方法があります。
※参考：nofollow属性・noindexの使い方とポイント

記述例

検索クエリとの関連性向上

SEOキーワードを含むページ概要をメタタグに記述し、検索クエリとの関連性を向上させることによってユーザー・クローラーにページの内容をわかりやすく伝えることができます。

ページの説明文であるこの「description」は検索キーワードが検索結果で太字に表示されるため、ユーザーが目的のコンテンツを見つけやすくなる効果も期待できます。

記述例：キーワード「SEO対策」の場合

関連記事meta description（メタディスクリプション）とは？適切な文字数とSEOに効果的な書き方について

SNSの拡散効果向上

サイト情報をメタタグに記述し、OGP設定によるFacebook等のソーシャルシェア効果を向上させることによって集客を伸ばし、リンク獲得の機会を増やすことも間接的なSEOとして有効的と考えられます。

記述例：キーワード「SEO対策」の場合

ここに記述した内容がシェアした際に表示されるため、後の拡散力にも影響します。
できるだけコンテンツの内容に適した魅力的な内容にしておくことが大切です。

スマホページの最適化（モバイルフレンドリー）

スマホやタブレットなど、メタタグでモバイル端末ブラウザサイズに対応し、モバイルフレンドリーにすることはこれからのSEO対策のひとつとして必須と言えます。

下記のビューポートという属性は、スマホ対応するために必要なタグです。
しっかりと対応してスマホからの集客を最大化させましょう。

記述例

関連記事レスポンシブデザインの作り方！簡単にスマホ対応する方法について

文字化けを防ぐ

適切な文字コードをメタタグで指定し、ブラウザやクローラーによる文字化け認識を防ぎましょう。
実際のファイルの文字コードと合わせることがポイントです。

記述例

メタタグのhtml記述方法について

メタタグをhtmlファイルに記述するには、以下のような属性を使う方法があります。
全て記述する必要はありませんが、しっかりと目的を理解した上で適宜設定しておきましょう。 ※参考：<meta>－html5タグリファレンス

http-equiv属性

メタタグのhttp-equiv属性により、meta要素がプラグマ指示子（pragma directive）となり、ユーザーエージェント（ブラウザ）に対して文書の“状態・挙動”を指示できます。

http-equiv属性では、主に以下のような属性値が指定可能です。

検索順位を上げたり、検索流入を増やすにはSEOが重要！

content-language

コンテンツ言語が指定できます。content属性で言語が指定できます。

記述例

content-type

ファイルタイプや文字エンコーディングが指定できます。
content属性でファイルタイプが指定でき、文字エンコーディングの追加も可能です。

記述例

default-style

デフォルトスタイルの指定ができます。
content属性を同時に指定することでcssファイルを指定できます。

記述例

refresh

リダイレクト・再読み込みの指定ができます。こちらもcontent属性を同時に指定することで秒数とリンク先URLが指定できます。

記述例

name属性

メタタグのname属性でメタデータ名を定義し、content属性でその内容を指定することができます。
name属性では、主に以下のような属性値を同時に指定することができます。

keywords

html文書内容をキーワードで指定できます。カンマで区切ることによて複数のキーワードを指定することが可能です。
現在はSEO効果は期待できないため、記述していないサイトも多く見かけます。

記述例

description

html文書内容を簡潔な概要にまとめて記述できます。
こちらも直接SEO効果はありませんが、検索結果に表示される内容となりますので、クリック率にも影響します。

そのため、文字数やキーワードを考慮した上で適切に設定することが大切です。

記述例

robots

検索エンジンのクローラ（ロボット）に対し、URLのインデックスやリンクのクロールについて指示できます。
下記のように記述した場合は、そのページをインデックスしない、そのページにリンクしているページにはクロールしないという設定となります。

記述例

author

html文書の作者を示す際に指定できます。
こちらは検索順位に影響のないものなので、特に記述する必要はありません。

記述例

generator

html文書作成に使用したツールやソフトウェアを指定できます。

記述例

viewport

モバイル向けに最適化したページサイズの指定ができます。
この記述があることによってアクセスしたデバイスのサイズに合わせた表示となります。

記述例

application-name

html5から追加された属性値で、ウェブアプリケーションの名前が指定できます。

記述例

content属性

メタタグのcontent属性は、主に他の属性（「http-equiv属性」や「name属性」など）とセットで使われ、その属性の詳細内容を指定します。
先述のよう、content属性の内容は、セットで使った属性により属性値が変わってきます。

property属性

メタタグのproperty属性は、SNSでシェアされたときに表示するサイト情報が指定できます。
主にOGP（Open Graph Protocol）設定と言われ、FacebookなどSNSの共有（シェア）効果を高めるために指定します。SNSでの集客に役立ちます。（SNSマーケティング）

記述例

charset属性

メタタグのcharset属性は、html文書の文字エンコーディング（UTF-8、Shift-JIS、EUC-JPなど）が指定できます。

記述例

Googleがサポートするメタタグ

Googleがサポートするメタタグには、以下のようなものがあります。
サイト管理者の方は一度目を通しておくと良いかもしれません。
※参考：Google がサポートしているメタタグ – Search Console ヘルプ

name属性

• meta name description
• meta name robots
• meta name googlebot
• meta name google
• meta name google-site-verification

http-equiv属性

• meta http-equiv Content-Type
• meta http-equiv refresh

上記以外もサポートされているものもありますが、サポート外のメタタグは無視されます。

メタタグの作成について

メタタグを作成するには、以下のような方法があります。

自分で作成する

htmlファイル構築時に、自分でコードを記述しながら、メタタグを作成する方法。
また、ブログサービスにより、管理画面から「ページの説明（description）」などの項目を記述し、更新することでメタタグ作成できる場合があります。

自動生成ツールを使う

「METAタグ生成ツール メタタグビルダー | さぶみっと！JAPAN」などのツールを使い、descriptionやkeywordsなどのメタタグを自動で作成する方法。

アメブロでメタタグを追加・編集・設定する方法

アメブロでメタタグを追加・編集・設定するには、以下のような方法があります。

サーチコンソールで発行したメタタグをアメブロに追加する

サーチコンソールでを発行した「google-site-verification」のメタタグを、アメブロメニューのブログ管理 > 設定・管理 > ブログの各種設定 > 「外部サービス連携」の「Seach Console（旧ウェブマスターツール）の設定」項目から設定する方法。
※参考：Amebaヘルプ｜ブログをSeach Consoleに登録する

「description」のメタタグをアメブロに追加する

アメブロの基本設定から、「説明」項目にページの概要を記述し、メタタグのdescriptionを設定する方法。
この設定が反映されない場合、基本的にブログ記事の最初の文章がページの概要（meta description）として認識されるようです。
※参考：アメブロのSEO対策｜『自分でできるSEO対策』を公開 – TONOSAMA

FC2ブログでメタタグを追加・編集・設定する方法

FC2ブログでメタタグを追加・編集・設定するには、以下のような方法があります。

OGPタグを設定する

FC2ブログ管理画面の左メニュー「環境設定」>「ブログの設定」 >「メタタグの設定」からメタタグのOGPタグを設定する方法。
OGPタグを有効にすると、「記事ページのタイトル」「記事ページの説明文」などが設定されます。
※参考：メタタグ設定 | マニュアル | FC2ブログヘルプ

WordPressのメタタグについて

WordPressのメタタグは、インストール時デフォルトで実装されておらず、「description」や「keyword」などのメタタグを手動・テーマのテンプレートファイルを変更・WordPress プラグインで追加する必要があります。
※参考：WordPress のメタタグ – WordPress Codex 日本語版

まとめ

ということで、今回はメタタグの記述方法やSEO効果についてご説明してきましたが、適切にメタタグを記述することで、サイト情報を検索エンジンのクローラーに伝えることができます。

それはクローラーだけではなく、ユーザーのためにもなるメタタグもあるので、しっかりとページの利便性を考慮した上で適宜設定することが重要と言えます。