メタタグチェッカーでできること
メタタグはページの<head>内に置かれ、検索エンジンやSNSにページの内容を伝えます。Googleに表示されるタイトル、その下の説明文、ページをインデックスしてよいか、どのURLがオリジナルか、そしてリンクがシェアされたときに使われる画像とテキストを指定します。
このチェッカーはクローラーと同じ方法でページを取得し、これらのタグをすべて読み取って、結果を3つの形で表示します。修正方法つきの問題の一覧、Googleの検索結果とFacebook・Xのカードのプレビュー、そして見つかったすべてのタグの表です。

メタタグを確認する方法
https://example.com/blog/postのように、ページの完全なアドレスを貼り付けます。タグはページごとに異なるため、重要なページからチェックしてください。
エラーはページが正しく表示されない原因になり、警告はクリックの損失につながります。メモは知っておくと役立つ情報です。それぞれ、対象のタグと変更すべき点が表示されます。
Googleのプレビューは、Googleが通常カットする位置でタイトルとディスクリプションを切り詰めます。SNSのカードには、Facebook、LinkedIn、Xが実際に使うのと同じ画像とテキストが使われます。
CMSやテンプレートでタグを更新してから、もう一度チェックします。SNSは古いカードをキャッシュしているため、各サービスのデバッグツールでも更新してください。
Advertisement
SEOで重要なメタタグ
<title>は通常、Googleの検索結果で青い見出しとして表示されます。ページごとに固有のタイトルにし、メインキーワードを先頭に置いて、50~60文字程度に収めましょう。
ランキング要因ではありませんが、タイトルの下のスニペットとして表示されることがよくあります。思わずクリックしたくなる120~160文字の文章を書きましょう。
noindexを指定すると、ページが検索結果に表示されなくなります。この指定はX-Robots-Tag HTTPヘッダーから来ることもあり、このチェッカーはそちらも読み取ります。
<link rel="canonical">は、複数のURLで同じコンテンツが表示される場合に、オリジナルのURLを示します。1ページにつき1つの絶対URLを指定しましょう。
<meta name="viewport">は、ページをスマートフォンの画面に合わせて表示させます。Googleはモバイル版を優先してインデックスするため、すべてのページに必要です。
<html lang="en">は、ページの言語をブラウザや検索エンジンに伝えます。スクリーンリーダーが正しく読み上げるのにも役立ちます。
OGPとXカードのタグ
Facebook、LinkedIn、WhatsApp、Slack、Discordでリンクがシェアされると、プレビューはOGP(Open Graph)タグから作られます。Xは独自のtwitter:タグを読み取り、タイトル、説明文、画像についてはOGPを代わりに使います。これらのタグがないと各サービスが内容を推測するため、違う画像が表示されたり、画像がまったく表示されなかったりすることがよくあります。
画像は1200×630ピクセル(比率1.91:1)にし、https://から始まる絶対URLで指定しましょう。チェッカーは画像の先頭部分をダウンロードして実際のサイズを表示し、読み込めない画像、小さすぎる画像、縦横比が合わない画像を指摘します。
<meta property="og:title" content="Page title">
<meta property="og:description" content="One or two sentences about the page.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">Advertisement
タイトルとメタディスクリプションの適切な長さは?
Googleは文字数を数えているわけではありません。タイトルは約600ピクセル、ディスクリプションは約2行で切り詰め、末尾に省略記号を付けます。実際には、デスクトップではタイトルは50~60文字程度、ディスクリプションは最大160文字程度が目安で、モバイルではさらに短くなります。
また、Googleは別のテキストのほうが検索内容に合っていると判断すると、タイトルやディスクリプションを書き換えます。ページのH1と一致する明確で正確なタイトルにすることが、設定したタイトルをそのまま表示させる最善の方法です。
よくあるメタタグの間違い
すべてのページで同じタイトル。 サイト名だけでなく、そのページの内容を表す固有のタイトルを各ページに付けましょう。
`noindex`の消し忘れ。 ステージングサイトが
noindexを設定したまま公開されることがよくあり、サイト全体がGoogleに表示されなくなります。canonicalが間違ったページを指している(トップページやhttp版など)。チェックしているページを無視するようGoogleに伝えることになります。
相対パスの`og:image`。 SNSには
https://から始まる完全なURLが必要です。/images/og.pngでは読み込まれません。小さすぎる画像。 600×315ピクセル未満だと、Facebookでは大きなカードではなく小さなサムネイルで表示されます。
自己参照や相互リンクのないhreflang。 すべての言語版が自分自身と他のすべての言語版を記載していないと、Googleがそのセットを無視することがあります。
meta keywordsに頼る。 Googleは2009年からkeywordsタグを無視しています。害はありませんが、効果もありません。
Advertisement
hreflangタグのチェック
複数の言語で展開しているサイトでは、<link rel="alternate" hreflang="…">を使って各言語版をGoogleに伝えます。チェッカーは見つかったすべてのhreflangリンクを一覧表示し、3つの点を確認します。各コードがen、de-AT、pt-BRのような有効な言語コード(と任意の地域コード)であること、ページが自分自身を記載していること、そしてx-defaultのフォールバックがあることです。
リンクが相互に設定されているかを確かめるには、各言語版を順番にチェックしてください。どの言語版も同じURLのセットを記載している必要があります。