webサイトを作る時の要素の使い方 4巻 head内の記述

NO IMAGE

前回はmeta要素の書き方について記事を投稿しました。

前回の記事リンク
webサイトを作る時の要素の使い方 4巻 meta要素

今回は少し幅を拡げて、head内の記述について掘り下げていこうと思います。
掘り下げたらびっくり。数が結構あるんですね、、、

head内に必要な要素

head内の要素は主に、以下の4つの系統に分けられます。

  • 外部のファイルを読み込む要素(cssやjs)
  • サイトの情報を表す要素(meta)
  • 紐付けするsnsのデータ
  • スマホなどに関する要素(別記事にて投稿します)

metaやlinkが入り混じって表記するものあり単純に要素で系統分けができないので、内容で割り振りしてみました。
ちなみにこれらの要素。全部入れようとすると頭でっかちになるんじゃないかってくらい、指定できる要素はもうたくさんあります。

ただ、その中には設定する必要が無いものも混じってたりするので、今日は実際に使いそうなモノだけ書いていきますね。

上記metaについては前の記事にまかせるとして、その他の要素について書いてみます。

外部cssとかjavascriptとか指定する

昔はinlineなどで直接ページの中に記載したりもしてましたが今はほぼ100%、外部にスタイルシートを切り分ける構成になってます。
見栄えもそっちの方がいいですしね。


<link rel="stylesheet" href="cssのファイル名">
<script src="javascriptのファイル名">

javascriptはレンダリングを妨げないよう、本来footerに設定するのが望ましいのですが、footerに指定すると、作動しないscriptが出てくる場合があるので、自分はheadにまとめちゃう事が多いです。
この辺さばけるようにもうちょっとjavascript詳しくならないとなぁ、、、。

URL正規化(Googleさんに正しいURLを知らせる)

URLの正規化は今の制作トレンドだと、使う場面は限られてきますね。
スマホ、PCのURLは統一する方向に向かってますし、wwwあり・なしの判別も自動でいけるので、出番は今後、更に減っていく傾向にあるんじゃないでしょうか?


<link rel="canonical" href="設定するサイトのURL">

snsの関連情報を指定する

今ではwebマーケティングに必須のSNS。
meta要素がほとんどなので、meta要素の記事に追記してあります。

webサイトを作る時の要素の使い方 4巻 meta要素

linkで指定するのはGoogle+とoembed関連でしょうかね。
※oembedは、youtubeなんかで使われてる短縮URLに関する要素です。
細かい説明はここでは割愛します。

スマホ関連のmetaタグ、linkタグ

なんだか設定することたくさんあるんじゃないかって予想と、webサイトで指定する事意外と少ねぇんじゃない?って感覚を元に、別枠で紹介しようかと思ってます 笑

ホーム画面のアイコン指定以外は、プログレッシブアプリなんかに関連するものが多いんじゃないだろうか、、、。
※間違ってたら教えて下さい 汗

数はたくさんあるけど軸になる指定は意外と少数なhead内の記述

紐解くとmetaもlink要素も数はありますが、ことwebサイト制作に関して言えば、実務で使うものってそんな多くない。という印象です。
まずは基本の記述をまとめて列記し、必要に応じて追記してくのがいいんじゃないでしょうか?

これをふまえて僕が考えた基本の記述は以下の通り。


<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>ホームページタイトル</title>
<meta name="description" content="こいつがサイトの説明文ですわ">
<link rel="stylesheet" href="style.min.css">
<script src="script.min.js">

いや、これいらないだろ!これは必要だろ!みたいなタグがあれば是非教えて下さい。
すぐ直します 笑

なんやかんやで決められた形がないhead内の記述ですが、できればうまくまとめて簡潔に、ロボットへ伝えたいものですね。

こちらの記事も読まれています

使いどころが分かりにくいhtml要素の使いどころを考えてみる 後編... さて、重い腰を上げてhtml要素の使いどころ 後編いってみたいと思います。 前回分は前の記事でご確認下さい。 使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編 まずは大枠の仕分け コンテンツの埋め込み フォーム ユーザー操作 テーブル要素に...
使いどころが分かりにくいhtml要素の使いどころを考えてみる 前編...   皆さん、コーディングしている時に使わないhtml要素ってありませんか? 僕はhtmlリファレンスを見るとコレ、全然使ってないなあ。なんて要素がかなりあります。 (上手に使ってる方はもちろんいらっしゃるのでしょうが、、、) なので今日は自戒の意味も込めて、htmlの使って...
webサイトを作る時の要素の使い方 3巻 meta要素... htmlってそんなに掘り下げなくてもホームページ作成って意外と出来ちゃいますよね。 でも、文書を正確に機械に読み取ってもらう為にも、なるべく知識は正しく持っといた方が制作の際に迷わないし、正確な仕事が出来ると思うのです。 という訳で今日は人には見えない部分の一つ、「meta要素...
webサイトを作るときの要素の使い方2巻 article section... さて、前回はwebサイトを構成する際、適切に要素を配置するための内容を書いていきました。 前回の記事 今回は残りのsection、article要素について考えてみます。 似ている部分もあるこの二つのセクション。他のセクショニング要素に比べてあやふやな部分が多いこの要素を、一...

htmlカテゴリの最新記事