minablog

hugo/github/wordpress/プログラミング言語/美容/ビジネス/マーケティングなど、ミレニアム世代やZ世代に有益な情報を共有するブログ。

小学生でもわかるHTML/CSSタグ講座 metaタグ

皆さんこんにちは!

minablog管理人のみなです。

小学生でもわかるHTML/CSSタグ講座ということで、今回はmetaタグについてご紹介します。

HTMLの宣言をしてからすぐに使うmetaタグですが、必ず書かないといけないタグと任意で書くタグの2種類に分かれます。

必須のmetaタグについては確実に覚えるようにしましょう。

そして、任意タグについては知っていれば必ず役に立ちますので、まずは知識として覚えましょう。

それでは、HTML/CSS講座①metaタグについて勉強していきましょう!

 

f:id:mkmkblog:20191217165850j:plain

 

metaタグとは?

Webページの情報を検索エンジンやブラウザに伝えるタグです。

 

《metaタグの特性》

①metaタグは検索エンジンやブラウザに向けて書く。

 (Googleなどの検索エンジン/ブラウザ/SNS

②サイト訪問者がmetaタグを見ることはほとんどなし。

③metaタグは検索エンジンやブラウザに指示を出したり、情報を提供する。

 ※metaタグに直接的なSEO効果はありません。

④head内に書く。

 

metaタグ一覧

<meta charset="utf-8">

これは必須タグです。

文字コードの指定をするタグで、日本語の場合は必ず書く必要があります。

<head>タグのすぐ下に書くようにしましょう。

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

一応必須タグの扱いとなっています。

しかし、個人的な意見としては特に書かなくても問題ないように感じます。

IEむけ最適化を行うもので、インターネットエクスプローラーを互換モードではなく標準モードで表示させます。

 

<meta name="viewport" content="width=device-width, initial-scale=1">

レスポンシブデザインにするなら必須のコードです。

widthをデバイスの幅に合わせているため、デバイス画面に合ったデザインができますが、細かい部分まで表示にこだわろうとすると幅を指定した方がいいです。

幅を指定する際は、 

content="width=〇,initial-scale=1

上記の〇部分を360や1280などに変更すれば幅を指定したうえでデザインすることができます。

 

f:id:mkmkblog:20191217165820j:plain

<meta name="description" content="~">

 必須ではありませんが、書いておくといいことあるかもよっていうタグです。

検索結果のタイトルの下に表示されるページの説明です。

これは書いていなくてもサイトの内容を見て勝手に作られるものなので必須ではありません。

ただし、ページの意図を自分自身の言葉で書きたい人はこちらも記述しましょう。

ちなみに、直接的なSEO効果はありません。

~の中にページの説明を入れましょう。

 

<meta name="robots" content="noindex,nofollow">

検索避けのタグです。

あまり質の良くないページや価値のないページ、アダルトなページに対して指定します。

必須ではありませんが、サイトの評価を下げたくないときには活用すべきタグです。

使わないに越したことはありませんが…。

 

<meta proparty="og:①" content="②">

SNSでよくシェアされるページであれば活用すべきタグですが、必須ではありません。

OGPタグと言われ、SNSでシェアされた場合の表示方法などを設定します。

①の部分にはurl/title/type/image/descriptionなどを記述します。

②の部分にはシェアされたときのページタイトルや説明を記述します。

 

コード日進月歩さんがとても分かりやすくまとめていましたので、 こちらをご覧ください。

shinkufencer.hateblo.jp

 

番外編 <title>~</title>

一応head内に記述する必須タグとしてご紹介します。

タイトルタグとそのページ本来のタイトルは一致する必要はなく、なんとなくSEO対策の一環としてキーワードを盛り込んだタイトルでも問題ありません。

~の中にタイトルにしたい文章を入れましょう。

 

 まとめ

今回は小学生でもわかるHTML/CSSタグ講座①として、metaタグをご紹介しました。

Head内に書くということ、直接的なSEO対策にはならないこと、そして必須のタグさえ覚えてしまいましょう。

任意のタグについてはあまり深く考えなくても大丈夫ですよ!

必要になったら調べればいいだけですから。

次回もぜひご覧ください~☺

 

関連するブログ

 ・AdRegion さん

blog.adregion.jp

SEO対策に焦点をしぼった記事を書かれています。

はてなブログを使っている方は必見です!