「メタタグって何？」
「メタタグってどうやって確認するの？」
「メタタグってどうやって書けばいいの？」
こういった悩みにお答えします｡
私は､2015年からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡
この記事では以下のことがわかります｡
- メタタグとは何か
- メタタグの確認方法
- メタタグの書き方
- 使えるメタタグ一覧
Webサイトやブログにメタタグを適切に書くことで､GoogleにそのWebページの情報を正しく伝えることができ､クリック率などを向上させることができます｡
メタタグ(metaタグ)とは
メタタグは､常にhead要素内にあり､通常は文字セット､ページの説明､キーワード､ドキュメントの作成者､ビューポート設定等を指定するために使用されます｡
メタデータはページに表示されませんが､以下のようなものに使用されます｡
- ブラウザ
- 検索エンジン
- その他のWebサービス
このブログのトップページはこんな感じです｡
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no"> <title>(タイトル)</title> <meta name="description" content="(説明)"> <meta name="thumbnail" content="(画像)"> <meta name="twitter:site" content="(twitterID)"> <meta name="twitter:card" content="summary_large_image"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="(色)"> <meta name="apple-mobile-web-app-title" content="(タイトル)"> <meta property="og:site_name" content="(サイト名)"> <meta property="og:title" content="(タイトル)"> <meta property="og:url" content="(URL)"> <meta property="og:type" content="website"> <meta property="og:description" content="(説明)"> <meta property="og:image" content="(画像)">
メタタグ(metaタグ)の確認方法
HTMLソースを見る
使用しているブラウザからHTMLソースを確認することができます｡
Webサイトによってはファイルを圧縮してあります｡
改行がなく文字壁になっていいてどこに何が書いてあるのかわからないものもあるので､ショートカットキー「Ctrl + F」で目的のmetaタグを探してください｡
Chrome拡張機能「META SEO Inspector」
Google Chrome拡張機能「META SEO Inspector」を使うことで､ソールを見るよりも簡単にわかりやすく確認することができます｡
META SEO inspector - Chrome Web Store
This extension is primarily aimed at web developers who need to verify the HTML of their sites to ensure compliance with Google's…
メタタグ(metaタグ)の書き方
基本的にはページに表示されるものではないですが､書き間違いをするとページに悪影響を与えることがあります｡
ページの最上部に謎の空白行(よく見ると左端に1文字『 < 』『 " 』等ある)ができた場合は､メタタグの入力ミスの可能性が高いです｡
「どうせ見えないから適当でいいや」ではないので注意してください｡
HTML
HTMLファイルで直接コーディングする場合は､メタタグも直接書き込むことになります｡
特にタイトルやディスクリプションはサイト内のページで重複することがないように注意する必要があります｡
重複があると､公開後「Search Console」から警告があります｡
タイトルの場合は､検索結果にインデックスもされなくなる可能性もあるので注意が必要です｡
WordPress
WordPressであれば､「All in One SEO Pack」等のプラグインを使うことで､ページごとのメタデータを設定することができます｡
All In One SEO – SEO ランキングを向上させ、トラフィックを増やす強力な SEO プラグイン。
AIOSEO は非常に強力な WordPress SEO プラグインです。包括的な SEO ツールと AI を活用したスマートな SEO 最適化により、SEO ランキングとトラフィックを改善します !
メタタグ(metaタグ)一覧
タイトル (title)
厳密にはメタタグではありませんが､一番重要といってもいいタグなのでここでも説明しておきます｡
ページのタイトルというのはもちろんですが､検索結果に表示されるものなので､「そのページに何が書いてあるのか」「どんなキーワードで検索されたときに表示させたいのか」がわかる適切なキーワードをタイトルに含めておく必要があります｡
<title>(タイトル)</title>
文字コード (charset)
「文字コード」を指定するのに必ず必要なメタタグです｡
2020年時点で､「charset="utf-8"」以外に設定することはなく､「charset="utf-8"」以外を指定した場合､文字化けの原因になります｡
ごくまれに､「charset="Shift_JIS"」の古いサイトがありますが､あまり気にしなくてもいいでしょう｡
<meta charset="utf-8">
ビューポート (viewport)
モバイルの表示を最適化するために指定します｡
PC表示のみのサイトのときは不要でしたが､レスポンシブデザインでは､「name="viewport"」を指定することは必須になっています｡
<meta name="viewport" content="width=device-width, initial-scale=1.0">
電話番号リンク (format-detection)
特にiPhoneで､ページ内の電話番号を自動認識してリンクに変換してくれます｡
ただ､リンクにしてほしくないところまで変換されてしまうので､変換させないために指定します｡
必須のメタタグではないですが､コーディングしていると勝手にリンクにされて困ることが多いので､設定しておいたほうがいいと思います｡
「email=no」「address=no」も指定できるようですが､これを指定していなくて困ったことは無いです｡
<meta name="format-detection" content="telephone=no">
説明 (description)
タイトルと同様に重要なメタタグで､そのページがどんな内容なのかわかる説明を指定します｡
descriptionに素晴らしい文章を書いたら､検索上位に表示されるわけではありませんが､ユーザーが「このサイトの内容が気になる」と思う文章を書くことでクリック率(CTR)が上がります｡
descriptionを指定していない場合､検索エンジンが自動で本文から取得して表示してくれますが､ユーザーがクリックしたくなる文章になることはほぼないと思います｡
また､descriptionを指定していても､何を表示するかは検索エンジンが決められてしまいます｡
<meta name="description" content="(説明)">
IE向け最適化
IE向け最適化のためのメタタグです｡
個人的にはこのメタタグを使ったことがないですし､このメタタグがないことで困ったことがありません｡
むしろIEはそれ以外で崩れることが多いです｡
一応､紹介のみです｡
<meta http-equiv="X-UA-Compatible" content="IE=edge">
検索エンジン向け (robots)
robotsは検索エンジンにインデックスさせるか､させないかを指定することができるメタタグです｡
一般的にはインデックスさせたいときは特に指定する必要がなく､インデックスさせたくないときにだけ使います｡
<meta name="robots" content="noindex,nofollow">
noindexタグについては､以下の記事で解説しています｡
検索にのせたくない！noindexタグの使い方 NTTドコモ、KDDIの問題点
noindexタグについて知りたいですか？この記事では、Webページを検索エンジンにインデックスさせなくするnoindexタグの使い方、NTTドコモ、KDDIがnoindexタグを使っていたことについて解説しています。ぜひご覧ください。
キーワード (keywords)
keywordsは検索エンジンにそのページの内容にあったキーワードを伝えるメタタグでしたが､現在の検索エンジンはもうkeywordsを見ていないので必ず設定する必要はありません｡
<meta name="keywords" content="(キーワード),(キーワード),(キーワード)…">
サムネイル (thumbnail)
thumbnailはサムネイル画像を表示させるメタタグですが､必ず必要なメタタグではありません｡
指定していても表示されるかどうかは検索エンジン側の判断になり､表示されないことが多いと思います｡
次に紹介するOGP用に画像をつくるのであれば､メタタグを書くくらいはそんなに大変なことではないので､ついでに指定しておいて損はないのではないでしょうか｡
<meta name="thumbnail" content="(画像)">
OGP
共通
SNS(facebook､twitter等)向けにページの情報を伝えるメタタグです｡
SNSを重要視するWebサイトであれば､シェアされたときに画像が表示されたり､適切なページ情報を表示してくれます｡
どのSNSにも共通で使えるタグと､twitter専用､facebook専用のタグがあるので､必ずすべてを設定しなくても大丈夫です｡
<meta property="og:site_name" content="(サイト名)"> <meta property="og:title" content="(タイトル)"> <meta property="og:url" content="(URL)"> <meta property="og:type" content="website"> <meta property="og:description" content="(説明)"> <meta property="og:image" content="(画像)">
facebookのogp画像は1200 x 630 px 以上が推奨されているので､これに合わせてサムネイルを作成するといいと思います｡
また､表示される場所等によって自動で正方形にトリミングされる可能性があるので､以下のサイトでどのように見えるか確認するといいと思います｡
OGP画像シミュレータ | og:image Simulator
デザインしたOGP画像をドラッグ＆ドロップし、タイムライン上でどう見えるかシミュレートしてみよう！
Twitterのアカウントを持っている場合は「twitter:site」にIDを指定します｡
<meta name="twitter:site" content="@Twitterユーザー名">
「twitter:card」にはTwitterにシェアされた場合の画像の表示方法を指定します｡
<meta name="twitter:card" content="カード種類">
「twitter:title」「twitter:description」「twitter:image」は､共通のogで指定していれば省略可能です｡
<meta name="twitter:title" content="(タイトル)"> <meta name="twitter:description" content="(説明)"> <meta name="twitter:image" content="(画像)">
Twitterでシェアされたときにどう表示されるか､以下のサイトで確認することができます｡
https://cards-dev.twitter.com/validator<meta property="fb:app_id" content="">
<meta property="fb:admins" content="">
PWA (Apple向けプログレッシブウェブアプリ用)
以下の3つのメタタグは､Apple向けPWA用に使います｡
現時点でPWAに対応したWebサイトを作るとき以外は必要ありません｡
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="(ステータスバーの色)"> <meta name="apple-mobile-web-app-title" content="(タイトル)">
まとめ
メタタグ(metaタグ)について､以下のように解説しました｡
- ページには表示されないがブラウザや検索エンジンにそのページの情報を伝えるのに使われる｡
- HTMLソースを直接見ると確認できる｡
Chrome拡張機能「META SEO Inspector」を使うと簡単に確認できる｡ - HTMLソースに直接書き込む｡
WordPressであればプラグイン「All in One SEO Pack」を使うと簡単に書くことができる｡ - SEOで重要なもの､SNSで表示させるためのものなどたくさんの種類がある｡
メタタグを適切に設定することで､ページの情報を検索エンジンやSNSで良い効果が得られます｡
