fbpx

SEO

SEO対策になるmetaタグの設定!その効果と実装例

この記事の監修

コピー&マーケティング株式会社 代表取締役
山田 秀平(やまだ しゅうへい)

24歳で起業後、世界トップクラスのマーケッターやコピーライターからビジネスを学び、年商3000万円に満たない企業をすぐに約17倍の年商5億まで成長させる。コンテンツマーケティングでは、累計で12万人以上を集客してきた。現在はコンテンツマーケティングのインハウス支援に取り組んでいる。

SEO対策の一つに、隠し属性としてwebページの設定情報を持たせることができる「metaタグ」(メタタグ)があります。

前提としてmetaタグとは何かを押さえつつ、metaタグを設定することがSEO対策として効果的な理由や実装例を見ていきましょう。

SEOに有効な「metaタグ」とは?

metaタグはユーザーを呼び込むために使うもの

metaタグとは、webサイトを記述するための言語「HTML」の記述の一つです

HTMLは文字や画像などを表示するときの情報を記述するのによく使われますが、このHTMLでwebページを作る場合、「head」(ヘッド)要素「body」(ボディ)要素の大きく2つの要素を実装します。

head部に書かれる内容は、webページそのものの情報や、ユーザーを呼び込むための設定情報です。

検索エンジンの評価情報を集める自動巡回ロボットの「クローラー」など、コンピューターを介して、webページを読むかもしれないユーザーに対してmetaタグで設定された情報を伝えます。

そのため、metaタグの内容はwebページを閲覧中のユーザーの目に触れることはありません

webページを閲覧中のユーザーのために記述されるのはbody部です。

webページの本文や画像など、コンテンツそのものはbody部に記述されます

ざっくりまとめると、metaタグは、ユーザーを呼び込むためのwebページの設定情報を記述するタグのことを指します

なお、head部にはmetaタグ以外も使われますが、冒頭が

<meta

から始まればmetaタグですので、見分けるのはそれほど難しくないでしょう。

metaタグを閉じるときに注意したい半角スラッシュの有無

metaタグの閉じ方ですが、半角スラッシュありの「/>」となしの「>」での記述が見られます。

HTMLの最新バージョン「HTML5」で記述するのであれば、どちらで表記しても同じ結果になります。

具体的には、head部より前に次の記述があれば、バージョンはHTML5ですので、特に問題ありません

HTML5の宣言
<!DOCTYPE html>

HTML5の宣言の記述がない場合、metaタグの閉じ方には注意が必要です。

HTML4の場合には、半角スラッシュなしの「>」で閉じましょう

半角スラッシュありの「/>」でmetaタグを閉じてしまうとエラーになる可能性があります

なお、webページがHTML4の場合、head部より前に次のような記述があります。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

逆に、HTMLの亜種・XHTMLの場合、半角スラッシュありの「/>」で閉じます

こちらは半角スラッシュなしの「>」でmetaタグを閉じるとエラーになります

なお、webページがXHTMLで記述される場合には、head部より前に次のような記述があります。

<?xmlversion="1.0"encoding="UTF-8"?>

設定しても効果が得られないmetaタグもある?

Googleはサポートしているmetaタグを公表しています

サポートされないmetaタグは無視され、設定していてもSEOの観点からはプラスにならないため注意が必要です。

Googleのmetaタグの方針についても確認しておきましょう。

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

metaタグがSEO対策として効果的な5つの理由と実装例


metaタグを設定するとSEO対策として効果的な理由は5つあります。

コンテンツの関連度をアップできる:description

評価対象のコンテンツを取捨選択できる:noindex・nofollow

文字化けを防ぐ:charset

スマートデバイスに対応できる:viewport

ソーシャルメディアに対応できる:OGP設定

それぞれ実装例と一緒に見ていきましょう。

(1)コンテンツの関連度をアップできる:description

metaタグはコンピューター向けの情報を設定するため、SEO評価のために働く自動巡回ロボットのクローラーが働きやすい環境を作ることで、SEO対策につながります

中でもmeta descriptionタグ(メタディスクリプションタグ)は、SEO対策において欠かせないmetaタグの1つと言えるでしょう。

単にdescriptionタグと言われることもあります。

meta descriptionタグはwebサイトの説明文を記述するのに使われるため、SEO対策用のキーワードである「SEOキーワード」を含むことでSEO対策にもなります

検索結果画面上に表示されているwebサイトの説明文は、基本的にmeta descriptionタグで設定した内容をコンピューターが読み込み、反映しています。

ちなみにこのmeta descriptionタグに記述した文章が、該当のwebページ内に表示されることはありません

もし同じ文章がwebページ内にもあった場合は、body部に同じ文章を用意しているだけですので、誤解のないように注意しましょう。

次の表示例は、冒頭で挙げた「SEO対策とは?初心者でも理解して実践できるSEOの基礎まとめ」の検索結果です。

実装例は次の通りです。

meta descriptionタグの実装例
<meta name="description"content="「SEO対策という言葉は知っているけど、実際なにをすればいいのかわからない。」「SEO対策で何をして、どのような効果が出るのか知りたい。」そのような方に向けた記事です。SEO対策とは、「検索エンジンで自社サイトを上位表示させるための施策」のことを言います。">

「name」の部分で名称を指定して「content」の部分で具体的な情報を設定します。

設定する情報は必ず、半角二重引用符(ダブルクオーテーションマーク)で囲うことを忘れないでください

なお、meta descriptionタグに入れ込むSEOキーワードをきちんと選ぶだけで、SEO対策の効果はもっと高まります

SEOキーワードについて詳しく知りたい方は次もあわせてご覧ください。

(2)評価対象のコンテンツを取捨選択できる:noindex・nofollow

SEO評価の対象にしたいものと、したくないものを取捨選択するだけで、SEO対策になります

webサイトを運営するならリニューアルしたり、URLを変更したりというのはよくあることです。

そのとき、SEO評価が低く質の低いwebページや、不要になったwebページは検索結果から除外したいですよね。

ユーザーが検索したときに見せたくないwebページを検索結果に表示させない、つまり自動巡回ロボットのクローラーの情報登録(インデックス)をさせないために「noindex」タグを使います

noindexタグの実装例
<meta name="robots"content="noindex">

また、むやみに外部のwebページへのリンクをしてしまうと、SEO評価が下がることがあります

ユーザーが自由にURLを貼ることができるようなコメント欄や掲示板などが含まれるwebサイトには、ユーザーの投稿でSEO評価が下がらないようにリンクへの評価を対象外とする「nofollow」タグを使いましょう。

nofollowタグの実装例
<meta name="robots"content="nofollow">

なお、SEO評価に影響するリンクについて詳しく知りたい方は次もあわせてご覧ください。

(3)文字化けを防ぐ:charset

HTMLでwebサイトを作る場合は当たり前のようにしているかもしれませんが、文字コードを設定することで、コンテンツに書かれている文章が意図しない文字列で表示されてしまう「文字化け」を防ぐことができます

コンピューターは、日本語を英数字や記号の組み合わせで認識しているため、そのときの置き換えルールに当たるものが「文字コード」です。

文字コードにはさまざまな種類がありますが、webで標準的に使われているUnicode(ユニコード)の「UTF-8」がおすすめです。

作成年代が古いwebサイトだと「Shift_JIS」「EUC-JP」が使われていることもあります。

charsetの実装例
<meta charset="UTF-8">

「charset」を指定し、実際にそのファイルに使っている文字コードを設定します。

(4)スマートデバイスに対応できる:viewport

「viewport」を設定することで、スマートフォンやタブレットなど、情報端末の画面サイズにあわせて表示サイズを切り替えることができます

画面の横幅のサイズにあわせる実装例
<meta name="viewport"content="width=device-width">

(5)ソーシャルメディアに対応できる:OGP設定

OGP(オージーピー:Open Graph Protocol)設定とは、Facebook、Twitterなどのソーシャルメディア(SNS)で、シェア(共有)されたときに使われる「要約」を指定する機能です。

OGP設定していないと、シェアされたときに表示されるのはそのwebページの所在地、URLリンクの文字列だけです。

OGP設定をしておくことで、URLリンクと一緒に設定した情報、例えばwebページのタイトルや説明文、サムネイル画像などが表示されます

文字列だけよりは目を引きやすいので、情報が拡散しやすくなり、着実にSEO評価につながります

次の実装例は、冒頭で挙げた「SEO対策とは?初心者でも理解して実践できるSEOの基礎まとめ」の記事のものです。

OGP設定の実装例
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content=" SEO対策とは?初心者でも理解して実践できるSEOの基礎まとめ" >
<meta property="og:type" content="article">
<meta property="og:description" content="本記事では、SEO対策を初めて行う人でもわかりやすいように、SEOの基礎からまとめました。誰にでも出来て、ルールに従って実施すれば必ず成果につながるのがSEO対策です。ぜひ、読んで実践してみてください。">
<meta property="og:url" content=" https://www.hackthehack.jp/what-is-seo-measures/">
<meta property="og:site_name" content=" HACK THE HACK ハック・ザ・ハック">
<meta property="og:image" content=" https://www.hackthehack.jp/wp-content/uploads/2019/05/html_1558078177.png"">
</head>

「property」の部分で属性名を指定して「content」の部分で具体的な情報を指定します。

「og:title」では、webページのタイトルを指定します。

「og:type」は「website」「blog」「article」の3つのなかから選び設定しますが、「website」「blog」はトップページのみに使用し、それ以外の通常のwebページは「article」を使います。

「og:description」で、webページの説明文を指定します。

なお、ここの設定はコンテンツの関連度を上げる対策にはならないため、descriptionタグを別途、実装する必要がある点に注意してください

「og:url」で、webページのURLを指定します。

「og:site_name」で、webサイトのタイトルを指定します。

「og:image」で、画像のサムネイルイメージのURLを指定します。

他にもOGP設定で指定できる要素がありますので、詳細はThe Open Graphprotocolでご確認ください。

まとめ


ここまで、metaタグとは何かを押さえつつ、metaタグを設定することがSEO対策として効果的な理由や実装例を見てきました。

metaタグは、webサイトをすでに訪問しているユーザーに対するアプローチではなく、サイトにユーザーを呼び込むための設定情報です

細かく設定するほど、あなたのwebサイトにユーザーを呼び込むことにつながります

metaタグを使って、SEO評価の高いwebサイトを作りましょう。

関連記事

  1. SEO

    SEOの攻略本「ガイドライン」を解説!最近のGoogle傾向もチェック

    SEO対策は、検索エンジンごとに行う必要があり、検索エンジンごとにSE…

  2. SEO

    SEO対策における優れたUXの重要性

    コンテンツマーケティング業界におけるUX(User Experie…

  3. SEO

    SEOとSEMはどう違う?効果的に使い分けるポイント

    検索エンジンで自社のwebサイトを上位に表示させるための施策が「SEO…

  4. SEO

    【2019年版】SEOトレンドまとめ:定番3つと最新3つ

    SEO対策にはさまざまな方法がありますが、時流にあわせて優先すべき要素…

  5. SEO

    ページランクが廃止?SEO強化に繋がるページランクの捉え方

    SEO対策を担当する方やウェブ管理者であれば、ページランク(page …

最近の記事

最近の記事

  1. WordPressのSEOプラグイン3選!入れるときの判断基…
  2. インデックス数とは?SEOに影響する理由、確認方法と増やし方…
  3. SEOの攻略本「ガイドライン」を解説!最近のGoogle傾向…
  4. 必読!Google公式の「SEOスターターガイド」を解説しま…
  5. SEO評価を上げるディレクトリ構造とは?その効果と構築のポイ…
  1. SEO

    SEO対策になるコーディングとは?
  2. SEO

    インデックス数とは?SEOに影響する理由、確認方法と増やし方
  3. SEO

    厳選!SEOライティングのコツはたった3つだけ!
  4. SEO

    SEOで重視するべきタグと使用方法
  5. SEO

    検索エンジン「Bing」のSEO対策はコスパが高い!
PAGE TOP