【イラスト付き】metaタグとは？SEOへの効果・書き方・表示箇所をご紹介！

ブルーちゃーん！

SEO対策ではmetaタグを設定するのが大事って聞いたんだけど、metaタグって何のこと？

metaタグとは、Webページの情報をGoogleなどの検索エンジンに伝えるためにHTMLに記載するタグのことだよ

metaタグの内容は実際のページには表示されないから、訪れたユーザーが見ることはないけれど、Googleのクローラーというサイトを巡回するロボットにわかりやすくページの内容を伝える役割を担っているんだ

metaタグには、主にページのタイトル、説明文、文字コードなどの情報を記載するよ

metaタグがきちんと設定されていると、サイトの構造が検索エンジンに伝わりやすくなるから、正しいSEO評価を受けやすくなると考えられているよ

それに、ページのタイトルや説明文はGoogleの検索画面に表示されるから、的確な内容になっていた方がアクセスする人が増えそうだよね？

そうしてクリック率が上がっていけば、検索順位の向上にも繋がるよ

じゃあここからは、SEOに特に重要なmetaタグを、書き方と合わせて紹介していくね

タイトルタグは、その名の通り、ページのタイトルを設定するタグだよ

狙っている検索キーワードを、なるべくタイトルの左側に含めることが大切だね

タイトルタグを設定すると、、、

こんなふうに「Google検索結果」や「ブラウザのタブ」に表示されるよ！

ディスクリプションタグでは、ページの説明文を記載するよ

検索画面でタイトルの下に表示されているスニペットは、多くの場合このディスクリプションタグで設定した内容が表示されているんだ

検索画面に表示される文字数はPCだと約120文字、スマホだと約60文字だから、できる限り60文字以内でまとめるといいよ

ディスクリプションタグを設置すると、、、

こんなふうに「Google検索結果」に表示されるね！

文字コードを指定していないと、文字化けが起こってしまって、検索エンジンが正しく情報を収集してくれない可能性があるよ

日本語のサイトの場合、「UTF-8」「Shift-JIS」「EUC-JP」の3つがよく使われている文字コードで、HTML5ではUTF-8の使用が推奨されているんだ

OGPタグでは、ページがTwitterやFacebookなどのSNSでシェアされた時のレイアウトを設定するよ

OGPタグを設定しておくと、SNS上でサムネイル画像やタイトル、ディスクリプションがカード型で表示されるんだ

実際に例を挙げると、、、

例えばTwitterだと、こんな感じで表示されるんだよ！

URLの文字列が表示されるだけの場合よりも目を引くし、ページの内容も伝わりやすいから、クリック率の向上が期待できるよ

ビューポートタグは、スマホやタブレットなどの、モバイル端末での表示を最適化するためのタグだよ

スマホでインターネットを利用する人も多いから、Googleもレスポンシブ対応を推奨しているんだ

パソコン以外の端末でページを閲覧したときに見辛くならないよう、ビューポートタグを忘れずに設定しようね

noindex/nofollowタグは、Googleの検索結果にサイトを表示させなかったり、リンク先の外部のページと自分のサイトを関連付けないようにするタグだよ

noindexを設定しておけばGoogleのクローラーにインデックスされないようになるから、検索画面で表示したくない質の悪いページや内容が重複しているページに設定するんだ

nofollowは、関連性の低いリンクと自分のページを紐づけたくないような場合に設定するよ

noindexとnofollowは、どちらもうまく活用すると、Googleからのマイナス評価を避けるのに役立つよ

metaタグについて、今日話した大切なポイントはこんな感じだね

どういたしまして〜