コピー＆マーケティング株式会社 代表取締役
山田 秀平（やまだ しゅうへい）
24歳で起業後、世界トップクラスのマーケッターやコピーライターからビジネスを学び、年商3000万円に満たない企業をすぐに約17倍の年商5億まで成長させる。コンテンツマーケティングでは、累計で12万人以上を集客してきた。現在はコンテンツマーケティングのインハウス支援に取り組んでいる。
SEO対策の一つに、隠し属性としてwebページの設定情報を持たせることができる「metaタグ」（メタタグ）があります。
前提としてmetaタグとは何かを押さえつつ、metaタグを設定することがSEO対策として効果的な理由や実装例を見ていきましょう。
目次
SEOに有効な「metaタグ」とは？
metaタグはユーザーを呼び込むために使うもの
metaタグとは、webサイトを記述するための言語「HTML」の記述の一つです。
HTMLは文字や画像などを表示するときの情報を記述するのによく使われますが、このHTMLでwebページを作る場合、「head」（ヘッド）要素と「body」（ボディ）要素の大きく２つの要素を実装します。
head部に書かれる内容は、webページそのものの情報や、ユーザーを呼び込むための設定情報です。
検索エンジンの評価情報を集める自動巡回ロボットの「クローラー」など、コンピューターを介して、webページを読むかもしれないユーザーに対してmetaタグで設定された情報を伝えます。
そのため、metaタグの内容はwebページを閲覧中のユーザーの目に触れることはありません。
webページを閲覧中のユーザーのために記述されるのはbody部です。
webページの本文や画像など、コンテンツそのものはbody部に記述されます。
ざっくりまとめると、metaタグは、ユーザーを呼び込むためのwebページの設定情報を記述するタグのことを指します。
なお、head部にはmetaタグ以外も使われますが、冒頭が
<meta
から始まればmetaタグですので、見分けるのはそれほど難しくないでしょう。
metaタグを閉じるときに注意したい半角スラッシュの有無
metaタグの閉じ方ですが、半角スラッシュありの「/>」となしの「>」での記述が見られます。
HTMLの最新バージョン「HTML５」で記述するのであれば、どちらで表記しても同じ結果になります。
具体的には、head部より前に次の記述があれば、バージョンはHTML５ですので、特に問題ありません。
HTML５の宣言 <!DOCTYPE html>
HTML５の宣言の記述がない場合、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タグの方針についても確認しておきましょう。
metaタグがSEO対策として効果的な５つの理由と実装例
metaタグを設定するとSEO対策として効果的な理由は５つあります。
コンテンツの関連度をアップできる：description
評価対象のコンテンツを取捨選択できる：noindex・nofollow
文字化けを防ぐ：charset
スマートデバイスに対応できる：viewport
ソーシャルメディアに対応できる：OGP設定
それぞれ実装例と一緒に見ていきましょう。
(1)コンテンツの関連度をアップできる：description
metaタグはコンピューター向けの情報を設定するため、SEO評価のために働く自動巡回ロボットのクローラーが働きやすい環境を作ることで、SEO対策につながります。
中でもmeta descriptionタグ（メタディスクリプションタグ）は、SEO対策において欠かせないmetaタグの１つと言えるでしょう。
単に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」の３つのなかから選び設定しますが、「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サイトを作りましょう。
