記事内に商品プロモーションが含まれる場合があります
今回のテーマは、Webサイトに書くについて。初心者の方でも分かるように丁寧に解説していきます。
1. metaタグ（メタタグ）とは？
メタタグとはタグのことです。HTMLのheadタグ内に書きます。
…と言ってもなかなか分かりづらいと思うので、いくつかのポイントに分けて説明します。
1-1. メタタグは検索エンジンやブラウザに向けて書く
まず、メタタグは「Googleなどの検索エンジン」や「ブラウザ」、「Facebook、Twitterなどのソーシャルメディア」などのシステムに向けて書きます。
1-2. 訪問者がメタタグを見ることはほとんどない
基本的にWebページに見に来てくれた人がメタタグを見ることはありません。あくまでも、システムのためのタグなのです。
ただし、見ようと思えば、誰でも簡単に見ることができます。「このブログはどんなメタタグを使ってるのか調査しよう」という理由で見られることも。
1-3. メタタグは検索エンジンやブラウザなどに指示を出したり、情報を提供したりする
メタタグが何をするかというと、指示を出したり、情報を提供したりします。例えば「文字コードはコレを使って！」とか「このページは検索エンジンにはインデックス（掲載）しないで！」みたいな指示を出すわけですね。
1-4. メタタグはheadタグ内に書く
みなさんが普段ネットサーフィンをするときに見ているページはHTMLというコードで書かれています。そして、HTMLで作られたページは大きく「headタグに囲まれた部分」と「bodyタグに囲まれた部分」に分けられます。
headタグの中にはWebページには表示されない（訪問者には見えない）タグを書きます。メタタグもこの中に書きます。
一方、文章や画像などWebページに表示される部分はbodyタグ内に書きます。
HTMLの基本的な書き方はこちらの記事が参考になるはずです。
初心者向けHTML入門：書き方の基本とタグの使い方1-5. 書き方の例
のちほどメタタグの一覧を紹介しますが、ここでは1つだけ例を紹介します。
メタディスクリプション
検索エンジンに対して「この記事の内容を簡単にまとめると、こんな感じだよ」と伝えるメタタグです。
↑ こちらは掲載時のサルワカのトップページで使っていたdescriptionの例です。
メタディスクリプションとして書かれたものは、検索結果に表示されることがあります（必ずしも表示されるとは限りません）。
つまり、ページの内容を正確に表す文章は、検索結果から訪問するかを判断する助けになります。表示やクリック率の上昇が保証されるわけではありません。
1-6. ページごとにいちいちタグを書かないといけないの？
とはいえ心配は不要です。人気のブログサービスでは、必須のメタタグは自動で表示されるようになっています。
また、メタディスクリプションなどは記事ごとに指定できるようになっていたりします。
WordPressの場合には、テーマ次第ですね。例えばサルワカのテーマ「SANGO」では書いておくべきメタタグは全て自動表示＆簡単に設定できるようになっています。
1-7. ちゃんとメタタグが書かれているかを確認して、必要であれば設定をしよう
なんだか難しそうに感じられるかもしれませんが、やるべきことは以下の3ステップです。
というわけで1つずつ解説していきます。
2. メタタグの確認方法
現在「何のメタタグが書かれているのか」をチェックする方法は簡単です（ただしパソコンから見る必要があります）。調べたいページを開き、します。
↑ 表示されるメニューの中から「」をクリックします。これは人気のブラウザであれば、あらかじめ備わっている機能です。
↑ ページを構成するHTMLタグが表示されます。この中のheadタグ内にメタタグが書かれています。
検索ショートカットで探そう
Ctrl + F（Macの場合には⌘+F）のショートカットを使えば、好きな文字列をサクッと検索できます。
「meta」で検索すれば、メタタグを見つけやすいのではないかと思います。
3. 知っておきたいメタタグ一覧と書き方
ここからは、書いておきたいor知っておきたいメタタグの一覧を紹介していきます。ご自分のサイトのタグと照らし合わせながら「ヌケモレがないか」チェックしていくと良いのではないかと思います。
3-1. 文字コード
文字コード 文字コードを指定するためのものです。HTMLはUTF-8を使います。HTTPヘッダーやBOMで宣言されていない場合は、このmetaで指定します。日本語だけに必要なものではありません。<head>タグのすぐ下など、宣言全体が文書の先頭1024バイト以内に収まる場所へ書きましょう。
3-2. IE向け最適化
旧IE用 IEの互換モード向けに使われていたタグです。旧IEではIE=edgeで利用可能な最新の文書モードを指定しました。現行ブラウザで必須のタグではなく、ここは旧環境の参考です。IE11のデスクトップアプリは多くのWindows環境でサポートが終了していますが、IEモード等とは条件が異なります。
3-3. レスポンシブデザイン用
必須 レスポンシブデザイン（スマホやタブレットでも表示を最適化）を実現するために書いておく必要があります。
3-4. タイトルタグ
必須 こちらは厳密にはメタタグではないのですが、とても重要なものなので合わせて紹介しておきます。titleタグの中には、検索エンジンやブラウザに認識してもらうページのタイトルを書きます。
titleタグ内に書かれたテキストは、ブラウザのタブに表示されたり…
検索エンジンのタイトルとして使われたりします（Googleの判断により使われないこともあります）。
どのブログサービスでも、投稿画面で書いた「記事タイトル」がtitleタグ内に出力されるようになっています。
しかし、titleタグ内のテキストは、実際にユーザーの目に入る記事のタイトルと一致している必要はありません。つまり「検索エンジンなどで表示されるタイトル」と「ページ内に表示されるタイトル」は別にすることができるのです。
3-5. メタディスクリプション
さきほども触れたメタディスクリプションです。Googleは検索結果の記事タイトル下の説明を本文などから作り、このmetaを使う場合もあります。必ず表示されるものでも、必須のタグでもありません。。
ページの内容を簡潔かつ正確に伝えるために使います。クリック率や間接的な検索順位の改善を保証するものではありません。
2013年の資料：テキトーに書くよりは全く書かない方がマシ
2013年にGoogleのマット・カッツさん（既にGoogleを退職しています）がメタディスクリプションについて説明した資料です。以下の動画と要約は当時の説明として残しています。現在のGoogleは、内容が正確で読みやすければ、プログラムで説明文を作る方法も案内しています。
かなりざっくりと要約すると
（Googleが自動で本文から抽出する）
当時の説明の要約です。ちなみに、掲載時に参照したマット・カッツさんのブログにはメタディスクリプションが書かれていませんでした。
3-6. 検索避け
こちらは検索エンジンに対して「このページをインデックス（掲載）しないで！」という指示をするためのタグです。します。noindexは掲載を止める指示、nofollowはリンクを辿らないよう求める指示で、別の役割です。
noindex,followも便利
noindexの方を少し変えて、<meta name="robots" content="noindex,follow">と書くと、このページを検索結果に掲載しないよう求めながら、リンクを辿ることを許可します。ただし、followでクロールや再訪問が保証されるわけではありません。noindexを読み取れるよう、クローラーがこのページにアクセスできる必要もあります。
↑これは目的に応じた指定の例で、サイト全体への一律の推奨ではありません。ページ送りは各ページを検索対象にする設計もあります。robotsの初期の扱いはindex,followなので、このタグを省略できます。index,followとしているサイトもありますが、書いても書かなくても全く違いはありません。
3-7. OGPタグ
FacebookやX（旧Twitter）などで共有したときのタイトルや画像を伝える設定です。OGPの基本4項目はog:title、og:type、og:image、og:urlです。。og:description、og:site_name、og:localeなどは任意です。twitter:card/siteはX向け、fb:app_idはFacebookのアプリ連携向けとして示しており、全10行を全サイト必須とする例ではありません。
基本的にはてなブログやライブドアブログなどの人気ブログサービスでは設定済みです。OGPを設定するメリットや、WordPressでの設定方法は下の記事にまとめました。
3-8. メールアドレスや電話番号をリンクに変換しない
ブラウザによっては、ページ内の電話番号やメールアドレス、住所をリンクに変換します。format-detectionは、その機能を抑えるためのブラウザ固有の設定です。AppleはSafariのtelephone=noを案内していますが、email/addressを含む対応はブラウザごとに異なり、全環境で同じ動作を保証するものではありません。
3-9. Windows向けのアイコン
Windows 8からの「ピン留め機能」向けに使われていたメタタグです。下の図は当時のタイルの画像と色を指定する例として残しています。現在のWindows全体で同じ機能が使えると保証するものではありません。WordPressのmsapplication-TileImage出力も、登録したサイトアイコン等の条件によります。
4. あまり使う機会がない/不要なメタタグ
4-1. メタキーワード
不要 そのページの内容を表すキーワードを半角カンマ（,）区切りで書きます。ただし、Googleは検索順位を決めるうえでメタキーワードを一切見ていません。Googleがサポートしているメタタグ（公式ページ）も、Googleのindexや検索順位には使わないと説明しています。
GoogleのSEO効果を期待して書く必要はありません。他の検索エンジンでのペナルティを一律に断定するものではありません。
4-2. ページ遷移させるタグ
転送用 ページ遷移までの秒数とURLを指定することで、他のページへとリダイレクト（転送）することができます。例えば、content="3; url=https://saruwakakun.com"と書けば3秒後にサルワカのトップページへ自動的に飛ぶようになるわけですね。
4-3. 検索結果に検索ボックスを表示しないようにする
この図は、公開当時のGoogle検索結果に表示されていた「検索ボックス」です。この機能は2024年11月21日以降、終了しています。
上のnositelinkssearchboxは、当時この検索ボックスを表示させないための指定でした。機能の終了に伴い現在は使われません。この節とコードは旧機能の参考として残しています。
4-4. 他の言語に翻訳しないようにする
Googleには検索結果のタイトルや説明を翻訳して表示する機能があります。notranslateはGoogleの翻訳機能に関する指定で、あらゆるブラウザの翻訳ボタンを無効にするものではありません。現行の公式例はname=googlebotを使っています。
4-5. 言語の指定
不要 このlanguageメタタグはGoogleにページの言語を伝える指定としては不要です。Googleは本文などから判断します。ただしHTMLのlang属性は別のもので、読み上げ等にも使われるので、混同しないでください。
4-6. 著者の明記
authorは文書の著者名を示す標準のメタデータです。書くだけで検索順位や著者の信頼性が保証されるものではありません。訪問者に著者を伝える場合は、本文などの見える場所にも情報を用意しましょう。
4-7. コピーライト
不要 コピーライトは、フッターなど訪問者に見えるところに書いておきましょう。
4-8. その他不要なメタタグ
↑どれも不要です。書くことでペナルティになることはないと思いますが、SEO効果は全く期待できません。
5. メタタグをheadタグ内に追加する方法
では、メタタグをheadタグ内に追加するにはどのようにすれば良いのでしょうか。
5-1. WordPressの場合
まず、テーマや既存の設定ですでに出力していないかを確認しましょう。直接追加する方法として、クラシックテーマでは1つめにheader.phpを編集する方法があります。head内に追記しますが、親テーマの直接編集は更新で失われることがあります。すべてのテーマが同じファイル構成とは限りません。
２つめは、header.phpは触らずにfunctions.phpからheadタグへの追加設定を行うことです。子テーマのfunctions.phpへ追加すると親テーマ更新による消失を避けられますが、子テーマと親テーマのfunctions.phpは両方読み込まれます。関数名の重複や構文エラーに注意し、編集前にバックアップと検証を行いましょう。
以下はheadへ何を出力するかを示すplaceholder付きの例です。実際の値を組み立てるときは、URLや属性値をそれぞれ適切にescapeします。
//headにmeta tagを追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo 'ここにhead内に出力したい内容';
}
//END headにmeta tagを追加↑「ここにhead内に出力したい内容」を<meta ~>に置き換えます。複数書く場合は、echo '<meta ~><meta ~>';というように並べる形です。charsetやviewportなどがすでに出ている場合は重複させず、PHPの引用符と属性値のescapeも確認してください。詳しくはこちらの記事をどうぞ。
記事ごとに指定したい場合
上で紹介した方法だとサイト内の全ページに同じメタタグが挿入されることになります。記事ごとに指定する「メタデスクリプション」などには使えないので要注意ください。
掲載時には、テーマにメタディスクリプション設定がない場合の選択例として「All in One SEO Pack」を紹介していました。現在は、まずテーマや導入済みプラグインの設定機能を確認し、同じメタタグを重複して出力しないようにしましょう。
5-2. はてなブログの場合
全ページ共通のメタタグであれば、詳細設定の「headに要素を追加」欄から追加することができます。この中に書かれたタグは、そのままhead内に出力されます。
5-3. ライブドアブログの場合
「ブログ設定 デザイン／ブログパーツ設定のPC カスタマイズタブ」から編集ができます。トップページ・
個別記事ページ・カテゴリーページ・月別アーカイブページそれぞれ個別にカスタマイズできるのが良いですね。
この中でheadタグを見つけて、その中にメタタグを貼ればOKです。
6. その他知っておきたいこと
6-1.直接的なSEO効果があるメタタグはない
「書くだけでSEO的に強くなるメタタグ」なんてものは（今となっては）存在しません。逆に言えば、「◯◯のメタタグを書いていないから、検索順位が上がらない」ということはまずありません。
ただしmeta robotsのnoindexは検索結果への掲載を制御します。クローラーのアクセス自体を遮断する指定とは別です。文字コードの誤りなども内容を正しく読み取れない原因になるため、設定を確認しましょう。
6-2.body内に書いても良い？
メタタグは本来headタグ内に書くものです。しかし、辻正浩さんのブログの2013年の実験では、body内でもmeta robotsのnoindexが機能したという結果でした。
これは当時の実験結果として残しています。現在のGoogleの案内ではmeta robotsはhead内へ置きます。一般のmetadataをbodyへ置くことを推奨する説明ではなく、HTMLのitempropを持つmetaの例外とも別です。
6-3. 属性名と値で大文字・小文字の扱いが異なる
HTMLのタグ名・属性名やmetaのnameに定義された名前は、ASCIIの大文字と小文字を区別しないものがあります。一方、contentの値は用途ごとの規則に従います。URLや説明文などの値を一律に小文字へ変えないでください。