![metaタグとは?SEOへの効果・書き方・表示箇所をご紹介!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/22a2df04bf4b4607a86b41b810093562/Group%20432.png?w=1200&fm=webp)
SEO
更新日: 2023/12/12
metaタグとは?SEOへの効果・書き方・表示箇所をご紹介!
![character_balloon](/media/character/yellow_normal_left.png)
ブルーちゃーん!
どうしたのイエローちゃん?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
SEO対策ではmetaタグを設定するのが大事って聞いたんだけど、metaタグって何のこと?
あー、metaタグね
![character_balloon](/media/character/blue_normal_right.png)
じゃあ今日は、metaタグとはどんなものなのか、SEO対策でどのような効果があるのか、どうやって書けばいいのかについて、解説していくね
![character_balloon](/media/character/blue_normal_right.png)
metaタグとは?
![metaタグとは?SEOへの効果・書き方・表示箇所をご紹介!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/b53bc5515166418caedd9344798aded4/meta1.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
metaタグとは、Webページの情報をGoogleなどの検索エンジンに伝えるためにHTMLに記載するタグのことだよ
![character_balloon](/media/character/blue_normal_left.png)
metaタグの内容は実際のページには表示されないから、訪れたユーザーが見ることはないけれど、Googleのクローラーというサイトを巡回するロボットにわかりやすくページの内容を伝える役割を担っているんだ
![character_balloon](/media/character/blue_normal_left.png)
metaタグには、主にページのタイトル、説明文、文字コードなどの情報を記載するよ
なるほど!ページの表側には表示されないけど、Googleに伝えたい情報を書くためにmetaタグを活用するんだね
![character_balloon](/media/character/yellow_normal_right.png)
metaタグのSEO効果を解説!
![metaタグとは?SEOへの効果・書き方・表示箇所をご紹介!の画像_4枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/9cbdbf7d0edf4a388f7a7256eb11804c/meta2.png?w=1200&fm=webp)
metaタグを設定すると、SEOにどんな影響があるの?
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
metaタグがきちんと設定されていると、サイトの構造が検索エンジンに伝わりやすくなるから、正しいSEO評価を受けやすくなると考えられているよ
![character_balloon](/media/character/blue_normal_left.png)
それに、ページのタイトルや説明文はGoogleの検索画面に表示されるから、的確な内容になっていた方がアクセスする人が増えそうだよね?
![character_balloon](/media/character/blue_normal_left.png)
そうしてクリック率が上がっていけば、検索順位の向上にも繋がるよ
Googleからきちんとページが認識されやすくなることと、クリック率が上がること、2つの面でメリットがあるんだね!
![character_balloon](/media/character/yellow_normal_right.png)
metaタグの書き方と表示される箇所を紹介!
よーし、早速metaタグを設定したくなってきたよ!
![character_balloon](/media/character/yellow_normal_right.png)
でも、どんな風に設定したらいいんだろう?
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
じゃあここからは、SEOに特に重要なmetaタグを、書き方と合わせて紹介していくね
種類1.タイトルタグ
![character_balloon](/media/character/blue_normal_left.png)
タイトルタグは、その名の通り、ページのタイトルを設定するタグだよ
![character_balloon](/media/character/blue_normal_left.png)
狙っている検索キーワードを、なるべくタイトルの左側に含めることが大切だね
![character_balloon](/media/character/blue_normal_left.png)
タイトルタグを設定すると、、、
![character_balloon](/media/character/blue_normal_left.png)
こんなふうに「Google検索結果」や「ブラウザのタブ」に表示されるよ!
種類2.ディスクリプションタグ
![character_balloon](/media/character/blue_normal_left.png)
ディスクリプションタグでは、ページの説明文を記載するよ
![character_balloon](/media/character/blue_normal_left.png)
検索画面でタイトルの下に表示されているスニペットは、多くの場合このディスクリプションタグで設定した内容が表示されているんだ
![character_balloon](/media/character/blue_normal_left.png)
検索画面に表示される文字数はPCだと約120文字、スマホだと約60文字だから、できる限り60文字以内でまとめるといいよ
![character_balloon](/media/character/blue_normal_left.png)
ディスクリプションタグを設置すると、、、
![character_balloon](/media/character/blue_normal_left.png)
こんなふうに「Google検索結果」に表示されるね!
種類3.文字コードタグ
![character_balloon](/media/character/blue_normal_left.png)
文字コードを指定していないと、文字化けが起こってしまって、検索エンジンが正しく情報を収集してくれない可能性があるよ
![character_balloon](/media/character/blue_normal_left.png)
日本語のサイトの場合、「UTF-8」「Shift-JIS」「EUC-JP」の3つがよく使われている文字コードで、HTML5ではUTF-8の使用が推奨されているんだ
種類4.OGPタグ
![character_balloon](/media/character/blue_normal_left.png)
OGPタグでは、ページがTwitterやFacebookなどのSNSでシェアされた時のレイアウトを設定するよ
![character_balloon](/media/character/blue_normal_left.png)
OGPタグを設定しておくと、SNS上でサムネイル画像やタイトル、ディスクリプションがカード型で表示されるんだ
![character_balloon](/media/character/blue_normal_left.png)
実際に例を挙げると、、、
![character_balloon](/media/character/blue_normal_left.png)
例えばTwitterだと、こんな感じで表示されるんだよ!
![character_balloon](/media/character/blue_normal_left.png)
URLの文字列が表示されるだけの場合よりも目を引くし、ページの内容も伝わりやすいから、クリック率の向上が期待できるよ
種類5.ビューポートタグ
![character_balloon](/media/character/blue_normal_left.png)
ビューポートタグは、スマホやタブレットなどの、モバイル端末での表示を最適化するためのタグだよ
![character_balloon](/media/character/blue_normal_left.png)
スマホでインターネットを利用する人も多いから、Googleもレスポンシブ対応を推奨しているんだ
![character_balloon](/media/character/blue_normal_left.png)
パソコン以外の端末でページを閲覧したときに見辛くならないよう、ビューポートタグを忘れずに設定しようね
種類6.noindex/nofollowタグ
![character_balloon](/media/character/blue_normal_left.png)
noindex/nofollowタグは、Googleの検索結果にサイトを表示させなかったり、リンク先の外部のページと自分のサイトを関連付けないようにするタグだよ
![character_balloon](/media/character/blue_normal_left.png)
noindexを設定しておけばGoogleのクローラーにインデックスされないようになるから、検索画面で表示したくない質の悪いページや内容が重複しているページに設定するんだ
![character_balloon](/media/character/blue_normal_left.png)
nofollowは、関連性の低いリンクと自分のページを紐づけたくないような場合に設定するよ
![character_balloon](/media/character/blue_normal_left.png)
noindexとnofollowは、どちらもうまく活用すると、Googleからのマイナス評価を避けるのに役立つよ
![character_balloon](/media/character/blue_normal_left.png)
metaタグについて、今日話した大切なポイントはこんな感じだね
まとめ
◆metaタグは、Googleにわかりやすくページの情報を伝えるために記載するタグのこと
◆metaタグを正しく設定することで、ページがGoogleから評価されやすくなり、クリック率の向上も期待できる
◆SEOでは、タイトル、ディスクリプション、文字コード、OGP、ビューポート、noindex/nofollowの設定が特に重要
ありがとうブルーちゃん!metaタグのことはこれでバッチリだよ!
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
どういたしまして〜
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。