「HTMLを勉強したいけど、覚えることが多すぎて何から学べばいいのかわからない…」
「タグの解説が専門用語まみれで、結局どういう機能があるのかピンと来ない…」
「SEO対策というのもあるらしいけど、結局何をすればいいかわからない…」
はじめてHTMLに触れた方々は、こういった壁に直面していませんか？このようなお悩みに応えられるよう、基礎的なHTMLタグの使い方とタグの機能を、例え話を交えながらより感覚的に理解できるように解説しています。
こちらのページでは、<head>タグとその中に入るタグの解説、併せてstrong>必要となるSEO対策の要素を解説していきます。
<head>タグでは、主に制作するWebサイトには直接見えない、Webブラウザに指示を行う部分を入力します。
ピンと来ない方のために、制作するWebサイトを「経営する飲食店」に例えます。飲食店を経営する上で、テーブルの配置、料理の提供、会計などは自力で行えますが、どうしても自力だけでは出来ない部分がありますよね？例えば、お店の看板製作、調理器具の製作、メディアでの広告など…それらはどうしても他の業者へ「発注」しなければなりません。
つまりは、自力(WebサイトやWebページ内)で行えないことを他の業者(Webブラウザや検索ロボット)へ発注する「発注書」の役割が、この<head>タグなのです。
<head>タグは、その中にさらに他の様々なタグを内蔵します。このページでは、それら他のタグを「飲食店からの発注」に例えて紹介していきます。
目次
<head>タグの使い方
その他タグを開始タグと終了タグで囲みます。
例：
<head>
(間に様々なタグ)
</head>
開始タグ・終了タグとは
さらっと登場してきたため、軽く説明しておきます。
一部タグは開始タグと終了タグというものが必要になり、開始タグは<〇〇>、終了タグは</〇〇>と「/」がタグ名の前に入り込みます。始まりと終わりをこれらで囲むことにより、その内部が当タグに該当するかを読み込んでくれます。
逆にこれら記述を少しでもミスすると、表示した際に盛大に破綻してしまうということも…
<title>タグとは
お店の「看板」を発注するタグになります。書いてある字の通りページのタイトルですね。
タイトルなら自分のWebページのトップにあるじゃん？と思われるかもしれませんが、こちらはWebサイト内で表示されるタイトルとは別物になります。具体的には、検索結果、ブラウザのタブ部分、ブックマーク、SNSでURLをシェアした際などに表示される部分です。店名と例えた通り、一番閲覧者の目を引く部分になりますので、発注ミス(内容や記述忘れ)が無いように気を付けましょう。
<title>タグの使い方
<head>と</head>の内側に配置し、開始タグと終了タグで文章を囲みます。
例：<title>〇〇〇〇&/lt;title>
こうすることで、Webページのタイトルが〇〇〇〇と表示されるようになります。
ちなみに文字数制限があり、33文字を超過すると、検索結果に表示されるタイトルが略されて後ろに「…」が付くようになります。綺麗に表示させたい場合は気を付けましょう。
<meta>タグとは
他の業者(Webブラウザや検索ロボット)へ発注するタグになります。
説明がざっくりとしすぎてると思ったかもしれませんが、実際、このmetaという部分だけでは機能しません。詳しくは後ほど解説しますが、このmetaに合わせて様々な「属性」を加えることで多様な機能をします。終了タグは必要としません。
<meta charset>とは
「charset」はブラウザに使用する文字コードを指定する属性です。例えるならば、キッチンの道具専門の発注書でしょうか。肝心のここが揃ってないだけで提供自体が台無しになります(文字化け等を起こしてページ自体が機能不全に陥る)。
文字化けを起こさないためにも、指定する文字コードは”UTF-8”が基本となります。”UTF-8”はISOの規格で世界標準のものであり、ブラウザの標準にもなっています。要するに、<meta charset=”UTF-8”>にしておけば間違いありません。
※テキストエディターの基本設定が他の文字コードになって文字化けを起こす場合もあるため、こちらもUTF-8に指定しましょう。
<meta charset>の使い方
終了タグは必要ないため、一つ書き込むだけで完了です。指定する文字コードの部分を=(イコール)で繋ぎ、”(ダブルクォーテーション)で囲みましょう。
例：<meta charset=”〇〇”>
<meta name>とは
「name」は「汎用の発注書」の属性になります。先述の「charset」属性を「専門の発注書」と表現しましたが、その逆ですね。具体的なイメージを挙げるならば、前者がまっさらな発注書ならば、後者はあらかじめ記述がある程度書いてある発注書です。実際、ここに追加で記述を行うことで様々な用途で使えます。
<meta name>の使い方
基本的に「content」という属性を後ろに加えて使用します。name属性で名前を指定し、content属性で値や内容を指定します。こちらも終了タグは必要なく、指定する要素と内容の部分をそれぞれ=(イコール)で繋ぎ、”(ダブルクォーテーション)で囲みましょう。
例：<meta name=”〇〇” content=”△△”>
「name属性で名前を指定し、content属性で値や内容を指定する」と説明しましたが、実際に使用するname属性の名前とそれに付随するcontentの値や内容を紹介します。
<meta name=”viewport”>の意味と使い方
閲覧者の使用するデバイスの幅に合わせてページの表示が変わるようにします。今時はPCユーザーからスマホユーザーだったり、中でも画面の大きさは様々なので必ず記述しましょう。例えば飲食店でも、スペースに制限が無いなら、個人客から団体客まで幅広い顧客が快適に利用できるに越したことはないですからね。
例：<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
“viewport”はサイトを閲覧するユーザーが使うデバイスを差し、それに合わせてcontent内で調整している形になります。今回は表示する上で最低限間違いない属性として、width=device-width(横幅はデバイスの幅に合わせる)とinitial-scale=1.0(幅は比率の1.0で)の要素を追加しました。
※HTMLのみの時点では見た目の変化はありませんが、CSSで必須になる部分です。
※他にもcontentで追加できる様々な属性値がありますが、種類の多さの関係で本稿では割愛させて頂きます。すみません。
<meta name=”description”>の意味と使い方
検索結果に表示される際にタイトルの下に付くページの説明文の部分になります。例えるならば、お店の広告や売り文句に該当する要素です。SNSにシェアされる場合にも表示されます。
例：<meta name=”description” content=”〇〇”>
content内の〇〇には、説明文に表示して欲しい文章を書き込みましょう。ただし、PCかスマホかによって表示される文字数は異なり、PCが124文字程度、スマホが50文字程度が目安になります。目的の閲覧者層に応じて使い分けましょう。
<meta name=”robots”>の意味と使い方
特定の項目の検索表示をコントロールする要素です。具体的には、ページの説明文や画像、ページそのものを検索結果に出ないようにしたり、さらには検索ロボットに評価させないといったことができます。例えるならば、発注書というよりは、検索ロボットさんを口止めする情報漏えい対策の機密保持契約書といったところです。
例：<meta name=”robots” content=”noindex,nofollow”>
content内には検索ロボットにやってほしくない要素を書きます。上の例では、noindex(検索結果にページを表示しない)、nofollow(ページ内のリンク全てを評価対象にしない)といった属性値を追加しています。
※他にもcontentで追加できる様々な属性値がありますが、種類の多さの関係で本稿では割愛させて頂きます。すみません。
可能なSEO対策は
最後になりますが、結局、ここまでやってきた<head>の関連タグでどんなSEO対策ができるの？という点。
間違って使わないことです！
それだけ？と思うかもしれませんが、そこが一番重要なのです。理由は2点あります。
1つは、Googleの検索ロボットは綺麗なコード(HTMLとCSS)で出来たページを好み、検索結果の上位に表示するという点。何故？見た目が綺麗ならいいじゃん？と思うかもしれませんが、端的に例えるならば、キッチンの衛生管理が行き届いていない飲食店は宣伝しにくい、みたいな理由です。詳細に説明するとかなり長くなるため、ここでは割愛し、代わりにGoogle公式のSEOスターターガイドのURLを掲載します。
もう1つは単純で、閲覧者がよく来るページほどSEO的にも評価が高いためです。よく閲覧者が来るページである、イコール閲覧者の需要を満たしたページであると検索ロボットが判断します。よって、閲覧者が寄り付きやすいように整頓されたページが自動的に検索結果の上位に来るようになるのです。
まとめ
いかがでしたでしょうか？感覚で理解しやすいように例え話を多く盛り込み紹介させて頂きました。そのままHTMLに記述できる、とまではいかずとも、何のタグがどう必要になってくるかをなんとなくでも理解の助けになれたら幸いです。
また、当ページで紹介した<head>の関連タグは初心者に最低限必要となるほんの一部です。より理解を深めたい、色んなタグを知りたい、といった方は、様々な方が紹介記事を上げているため、色んなサイトを巡ってみるのも良いと思います。内容は勿論のこと、色んなサイトの構成などを見ることで一石二鳥の学習の機会になると思います。
講師と１対１で学べる資格・PCスキル講座のソフトキャンパス！
リスキリングでお得に資格取得を目指すならマンツーマンレッスン！
分からないところだけをちょっとだけ聞きたい、そんなあなたに！
