HTML・CSS 2018.03.23

こんにちは! HIDEです。

授業でHTMLを習ってから早いものでもう…どれくらいでしょうか(笑)
もうHTMLに関しては完璧だぜ☆ ってちょっとずつ調子に乗りつつある僕ですが
ただ、どうやらHTMLはまだまだ奥が深いようで知らないことがたくさんあります。
それがheadタグ内(ブラウザには表示されない部分)に記述するmetaタグと言うもの。

HTMLを習いたての頃にも
「meta? それはhead内に書くものだし、実際ブラウザでは表示されないわけだから
正直よくわかんないけど無視しよ~(^^)」って(笑)
それが最近になってようやく
「metaって大事だし、なにより俺全く理解できてね~」ってなりまして
ちゃんと勉強しなきゃってなりまして…
自分なりにこのメタタグが重要だということをお伝えできればと思います。

まず初めにHTMLにはたくさんのタグが存在しますが
その中でも最も基盤となる3つのタグが存在します。

まず一つ目が<!DOCTYPE HTML>です。
これは「今からHTMLを書き始めますよ」という宣言のようなものになります。

こちらはHTMLを記述するのにまず一番初めに書かなくてはならないものです。
これを記述して初めてコーティングが開始されることになります。

そして2つ目が<head>です。
こちらが今回のメインテーマにもなってくるのですが、この<head>タグ内に書かれた内容はブラウザで見ても
表示はされません。
なら書かなくてもいいんじゃないの?というのが今回のメインテーマです!
結論から言うとすごく大事なのでちゃんと記述する必要があります。くわしくはまた後程。

そして3つ目が<body>です。
この<body>タグ内に書かれた内容がブラウザでサイトを見たときに実際に表示されるものになります。
ヘッター・フッターをはじめ見出しや段落、画像などがそれにあたります。

では実際に閲覧者が見ても表示されない箇所<head>タグ内には何を記述する必要があるのでしょうか?

全てを必ず記述しなけらばいけないわけではないですが
記述すべきものとその役割を紹介していきます。

基本のメタタグ

おおよそどのサイトにも記述するようなメタタグです。

charset

文字コードの指定を行属性です。

文字コードの属性はいくつかありますがHTML5から、UTF-8の使用が推奨されているそうです。
理由はあらゆるOSに対応している点と世界中の文字をきちんと表示してくれるからです。
この属性を指定することでブラウザで表示した際にそれが外国語であっても文字化けするのを防いでくれます。
ちなみに<title>タグよりも前に記述する必要があります。

 

description

ページの説明文を表記します。

検索した際に記事タイトルのしたに表示される説明文で、100~120文字程度がベストと言われます。
あまり長すぎると表示しきれないので文字数には注意が必要です。
設定しない場合はGoogleが勝手に指定することになっています。
SEO対策として有効という意見と、書いても順位は変わらないという意見と様々あるようですが、自分のページをクリックして訪問してもらうためには魅力的な説明文があったほうが良いのかなと思います。

レスポンシブサイト対応のメタタグ

スマホやタブレット端末でサイトを閲覧する際のレスポンシブ対応に使用するタグです。

viewport

レスポンシブデザインには必須のタグです。

PC画面ではなくスマホやタブレットでサイトを見たときの表示方法を指定できます。
例えばdevice-widthなら使用するタブレットの画面幅いっぱいで表示といった指定になります。
scaleは表示倍率を指定するものです。
レスポンシブデザイン対応のためのメタタグとしては最重要だと言えます。

検索エンジンのクローラーへ向けたメタタグ

robots

サイトを作ってサーバーを契約し一般公開するとGoogleのクローラーというロボットが自分のサイトをチェックしに来ます。
ただ、まだ開発途中のページやテスト的な内容の箇所がある場合はクローラーが回ってくるのを拒否できます。
指定のページを検索エンジンに登録させない場合はnoindex、ページ内のリンク先の巡回させない場合はnofollow、両方同時に設定したい場合は上記のように二つとも記述すればOKです。

その他のメタタグ

keywords

ページのキーワードを指定するものです。

設定してもクローラーは無視するのであまり意味はないとも言われています。

og:title

シェアする際の見出しを指定する。

例えばFacebookやTwitterなどSNSで何かサイトをシェアしたときにこれを設定しておけば
その見出しや画像などがきちんと表示されます。

X-UA-Compatible

IEの動作モードを設定する。

IE11には対応していないサイトでも利用できるように、IE7と同等のレンダリングモードにする機能のことをいいます。

確かにユーザーが見たときにはわからない箇所ではありますが、これをしっかり理解することで
SEOの観点からも強くなりますし
また設定しないことで、レスポンシブデザインがよくなかったり
文字化けして見れないなんてことになってしまうと
せっかく作ったサイトの価値が薄れてしまうのでこのmetaタグをしっかり理解して使いこなすことは非常に重要と言えます。
良かったら参考にどうぞ。

IT留学に関するお問い合わせ
HTMLのメタタグって何?ブラウザで表示されないのに本当に重要なの?

この記事が気に入ったら
いいね!をお願いします(^^)