head内の記述

head内の記述

こんにちは。ひっでもんです。

今回は、いつもなんとなく書いているhead内の記述を解説していきたいと思います。

head内の記述は【 meta 】、【 title 】、 【 link 】の順に書いていきましょう。

文字コード

HTMLの記述形式(文字コード)を正しく設定することによって、ページが読み込まれたときの文字化けを防ぎます。

TDK

ページの【title(題名)】、【description(説明文)】、【keywords(関連する単語)】を設定します。

スマホ

携帯端末でのウェブページの表示方法を制御します。viewportを設定すると、ページの幅や拡大縮小を制御できるようになります。

外部リンク

外部のCSSファイルやJSファイルを読み込みます。

オルタネイト

デスクトップ用ページに対し、代替のURLが存在することを示すのに使われます。
(スマホサイト用のページなどがある場合に、PC用ページにスマホサイト用のページのURLを書く)

カノニカル

マイナス評価を避けるために必要。同じようなページがいくつもある場合に書く。
(スマホ用のページなどがある場合、スマホ用ページにはPC用のページURLを書く。)

SEO

検索エンジンにさまざまな指示を与えることができるタグです。

ファビコン

ファビコンの設定を行う 拡張子は.icoでなければいけない。
(ファビコン(Favicon)とは、Webブラウザのアドレスバーやタブに表示されるアイコンのことです。)

OGP

OGPとは、FacebookやmixiなどにWebページをシェアするとき
そのページの記事のタイトル、URL、代表する画像、サマリーなどを正しく各ソーシャルメディアに伝えるためのメタ要素。

Twitter

ツイート内にURLが含まれている場合に、そのページのタイトルや概要、アイコン写真などを表示する。

1行目はカードのタイプを示すもので、
2行目はそのサイトに対応するTwitterアカウント名を「@」込みで入れます。
あとはOGPの「og:url」「og:title」「og:description」「og:image」を参照してくれます。

※Twitter Cardsを利用するためには申請が必要です。

まとめ

最初に作成したページの記述を元に下層ページを作成することがほとんどだと思うのではじめの段階でhead内の記述を完璧なものにしてしまいましょう。

 


Previous: PC版のWebサイトのテキストボックスにも[type=”tel”]と[type=”email”]を使おう

© 2017 ALL CONNECT Inc. All Rights Reserved.