SEO対策に関する実験やデータ分析などを公開します

seoラボラトリー

  • follow us in feedly

meta(メタタグ)とは~HTML記述法とSEO対策の効果

2016/10/06 2017/10/13

meta(メタタグ)要素を正しく記述し、HTMLソースを最適化しながら、SEO対策を進めることが大切です。

今回は、meta(メタタグ)の意味、meta(メタタグ)のHTML・HTML5記述法、meta(メタタグ)のSEO効果中心に解説したいと思います。

meta(メタタグ)とは~HTML記述法とSEO効果

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

meta(メタタグ)とは

meta(メタタグ)とは、webページの設定や情報等を伝える、HTMLファイルのheadタグ内に記述するタグのことです。

meta(メタタグ)は、複数の属性や属性値を指定し、webページのさまざまな設定や情報を検索エンジンクローラーに伝えることが可能です。

meta(メタタグ)は、「http-equiv」「name」「content」「property」「charset」が主な属性です。
meta(メタタグ)は、「description」「keywords」の属性値が有名で、name属性で指定可能です。

meta(メタタグ)のHTML記述法

meta(メタタグ)をHTMLファイルに記述するには、以下のような属性を使う方法があります。
※参考:<meta>-HTML5タグリファレンス

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

http-equiv属性

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

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

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

記述例:
<meta http-equiv=”content-language” content=”ja”>

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

記述例:
<meta http-equiv=”content-type” content=”text/html” charset=”UTF-8”>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8”>

③default-style
デフォルトスタイルの指定ができます。
content属性でCSSファイルのURIが指定できます。

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

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

記述例:
<meta http-equiv=”refresh” content=”3; url=sample.html”>
name属性

meta(メタタグ)のname属性でメタデータ名を定義し、content属性でその内容を指定することができます。

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

keywords
HTML文書内容をキーワードで指定できます。
複数のキーワードを指定することが可能です。

記述例:
<meta name=”keywords” content=”SEO,SEO対策,SEOブログ,SEO無料”>

②description
HTML文書内容を簡潔な概要にまとめて記述できます。

記述例:
<meta name=”description” content=”ホームページ上位化には、SEO対策が重要です。”>

robots
検索エンジンのクローラ(ロボット)に対し、URLのインデックスやリンクのクロールについて指示できます。

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

④author
HTML文書の作者を示す際に指定できます。

記述例:
<meta name=”author” content=”作者名”>

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

記述例:
<meta name=”generator” content=”ツールやソフトウェア名”>

viewport
モバイル向けに最適化したページサイズの指定ができます。

記述例:
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0”>

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

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

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

property属性

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

記述例:
<meta property=”og:title” content=”ページタイトル” />
<meta property=”og:type” content=”サイトタイプ” />
<meta property=”og:description” content=”ページの概要” />
<meta property=”og:url” content=”ページのURL” />
<meta property=”og:image” content=”ページのアイキャッチ画像” />
<meta property=”og:site_name” content=”サイト名” />
charset属性

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

記述例:
<meta charset=”UTF-8”>

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

meta(メタタグ)のSEO効果

meta(メタタグ)を使うことで、以下のようなSEO効果が考えられます。

・ページをインデックスさせない
質の低いページや不要なページを検索結果に表示させない(インデックスさせない)meta(メタタグ)を指定し、SEO効果を高める
※参考:nofollow属性・noindexの使い方とポイント

記述例:
<meta name=”robots” content=”noindex”>

・リンクを辿らせない
質の低いコンテンツへのリンクをクローラーに辿らせないmeta(メタタグ)を指定し、SEO効果を高める
「metaタグを使ってページ全部のリンクにまとめて適用する方法」と「a要素を使ってリンクごとに適用する」2つの方法があります。
※参考:nofollow属性・noindexの使い方とポイント

記述例:
<meta name=”robots” content=”nofollow”>

・検索クエリとの関連性向上
SEOキーワードを含むページ概要をmeta(メタタグ)に記述し、検索クエリとの関連性を向上させ、SEO効果を高める

記述例:キーワード「SEO対策」の場合
<meta name=”description” content=”ホームページ上位化には、SEO対策が重要です。”>

・SNSの拡散効果向上
サイト情報をmeta(メタタグ)に記述し、OGP設定によるFacebook等のソーシャルシェア効果を向上させ、SEO効果を高める

記述例:キーワード「SEO対策」の場合
<meta property=”og:title” content=”ページタイトル” />
<meta property=”og:type” content=”サイトタイプ” />
<meta property=”og:description” content=”ページの概要” />

・スマホページの最適化(モバイルフレンドリー
スマホやタブレットなど、meta(メタタグ)でモバイル端末ブラウザサイズに対応し、モバイルフレンドリーにしながら、SEO効果を高める

記述例
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0”>

・文字化けを防ぐ
適切な文字コードをmeta(メタタグ)で指定し、ブラウザやクローラーによる文字化け認識を防ぎながら、SEO効果を高める
※参考:UTF-8、Shift_JIS、EUC-JPなどの文字コードの指定 | レンサバネット

記述例
<meta http-equiv=”content-type” content=”text/html” charset=”UTF-8”>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8”>
<meta charset=”UTF-8”>

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

Googleがサポートするmeta(メタタグ)

Googleがサポートするmeta(メタタグ)には、以下のようなものがあります。
※参考: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

上記以外もサポートされており、サポート外のmeta(メタタグ)は無視されます。

meta(メタタグ)で検索避けする方法

meta(メタタグ)で検索避けするには以下のような方法があります。
※参考:nofollow属性・noindexの違いと使い方、SEO効果まとめ

・noindexを使う
ページをインデックスさせず(検索結果に表示させず)、meta(メタタグ)で検索避けできます。

記述例:
<meta name=”robots” content=”noindex”>

・nofollowを使う
リンクを辿らせず(クローラーに認識させず)、meta(メタタグ)で検索避けできます。

記述例:
<meta name=”robots” content=”nofollow”>

これらのmeta(メタタグ)をまとめて記述し、以下のよう検索避けすることが可能です。

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

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

meta(メタタグ)の作成について

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

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

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

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

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

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

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

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

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

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

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

WordPressのmeta(メタタグ)について

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

まとめ

meta(メタタグ)を使い、サイト情報を検索エンジンのクローラーに伝える仕組みづくりをしましょう。

適切にサイト構築し、SEO対策しながら、順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

順位が上がらないのは、何が原因??
順位決定の仕組と、
サイトの問題点をアドバイス(無料)

お申込みはこちらから

上位表示を目指すURL

※アメブロ、jimdo、fc2ブログのURLはご遠慮ください

上位表示を目指すキーワード

会社名/組織名

ご担当者様名

電話番号

メールアドレス

※個人情報の管理は「プライバシーポリシー」に同意の上お申し込みください

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

最新記事

本日の順位変動幅順位変動情報へ