[必見]HTMLのheadタグ内でよく使うタグを再確認！

皆さんこんにちは！
Maromaroの阿川です。９月ですね！ディズニーのおかげですでにハロウィン気分です。ハッピーハロウィン！ハッピーヴィランズ！！

さて今回のお話は前回宣言したようにコーディングについてです。皆さんはコーディングを始める際、headの中身を別のサイトからコピペするだけで満足していませんか？
今回はhead内にあるタグを簡単に解説していきたいと思います！

headの中に書くものってどんなもの？

文字コードを設定するタグ

例）<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/>
このタグは文字コードを設定するもので、「charset」の中に「UTF-8」や「Shift_JIS」などのコードを指定します。推奨されるのが「UTF-8」です。このタグがないとブラウザ上で表示した際、高確率で文字化けしてしまいます。HTML5だと＜meta charset=”UTF-8″＞だけでも大丈夫です。

言語を設定するタグ

例）<meta http-equiv=”Content-Language” content=”ja”/>
HTMLで使用する言語を設定します。「Language」の文字があるので何を設定しているかわかりやすいですね。ここでは日本語なので「ja」のタグが入っていますが、各言語でここの設定が変わります。

titleを設定するタグ

例）<title> サイトのタイトル </title>
このタグはサイトのタイトルを設定するもので、見出しではありません。ブラウザのタブや検索エンジンで表示されるサイトのタイトル部分です。

descriptionを設定するタグ

例）<meta name=”description” content=”サイトの説明文”>
ディスクリプションを設定するタグです。ディスクリプションとはそのページの説明文です。120字程度がちょうどいいとされています。

keyword を設定するタグ

例）<meta name=”keywords” content=”キーワード”>
サイトのキーワードを設定するタグです。例えば結婚式会場のサイトであれば「結婚式,会場,披露宴」などそのサイトに関連するワードを入れます。

OGP（Open Graph Protocol）を設定するタグ

例）<meta property=”og:title” content=”ページのタイトル” />
facebookやTwitterでシェアされた時にタイトルや概要などを正確に伝えるためのタグです。
例ではタイトルでしたが、propertyの中には「og:description」「og:site_name」などもいれることができます。

robotを設定するタグ

例）< meta name=”robots” content=”入れたい項目” >
robotタグは検索エンジンに指示を与えることのできるタグです。「noindex」としていすればそのページのインデックス登録を拒否することができ、「noarchive」としていればそのページ内でのキャッシュを拒否することができます。

ファビコンを設定するタグ

例）<link rel=”icon” href=”ファビコンがある場所の階層”>
ファビコンを設定することができます。

CSSをリンクするタグ

例）<link rel=”stylesheet” href=”リンクさせるCSSのパス” type=”text/css”>
CSSは複数読み込むことができます。また、CSSを直接記述するstyleタグなどもありますね。

JavaScriptをリンクするタグ

例）<script src=”リンクさせるJavaScriptのパス”> </script>
スクリプトタグはJavaScriptを読み込んだり、そのまま直接中身に書きこむタグです。最近ではhead内に置くのではなく、bodyの終了タグの手前に置くのが主流になって来ています。場所によって読み込まれる順番が変わってしまい、効果が出なくなってしまうJavaScriptがあるので最後に書いた方がいいんですね。

DNSプリフェッチを設定するタグ

例）<link rel=”dns-prefetch” href=”先読みしたいドメイン”>

DNSプリフェッチを利用すると、外部ドメイン名（ホスト名）の名前解決（DNSルックアップ）を事前に強制できます。
ユーザー（ブラウザ）がそのドメインにアクセスする前にすでに名前解決が完了しているので、読み込み時間の短縮を図ることができるのです。

海外SEO情報ブログ『DNSプリフェッチでウェブページの読み込み速度をスピードアップ』より引用
読み込みを早くするためのタグのようです。

以上が大雑把ですがよく見かけるheadの中の要素になります。
弊社開発の「title」「description」「keyword」「OGP」を簡単に確認できる便利拡張機能を是非試してみてください！

Maromaro Blog

 

44 Shares

8 Users

title,description,keyword等を確認するChrome拡張機能！

こんにちは、佐々木です！title,description,keyword等を確認する拡張機能が前々から欲しいと思っていたので、少し前に作成してみました！試しに非公開で社内用に使っていたのですが、今回Chrome拡張機能として一般公開しましたので、ご紹介させて頂ければと思います。tdk (Chrome拡張)ダウンロードは上記から。使い方は簡単！※ダウンロード前に開いているページで利用する場合には更新を行ってから利用してください。Macの場合：control+shift+command+tで利用できます。Winの場合：control+shift+alt+tで利用できます。なんでこんな...

まとめ

いかがでしたでしょうか。意味が分かっているのとそうではないのでかなりコーディングに違いが出てくると思います。そのタグが必要か、それとも不必要なのかを判断することが重要です！
headの中身は今後、ただ単にコピーするだけじゃなく意味もちゃんと覚えてきたいですね！

それではまたお会いしましょう。阿川でした～（・ω・）ﾉｼ