Blog2016.09.05agawa[必見]HTMLのheadタグ内でよく使うタグを再確認!Web制作コーディングシェアTweet皆さんこんにちは!Maromaroの阿川です。9月ですね!ディズニーのおかげですでにハロウィン気分です。ハッピーハロウィン!ハッピーヴィランズ!!さて今回のお話は前回宣言したようにコーディングについてです。charset=UTF-8′′/>このタグは文字コードを設定するもので、「charset」の中に「UTF-8」や「Shift_JIS」などのコードを指定します。推奨されるのが「UTF-8」です。このタグがないとブラウザ上で表示した際、高確率で文字化けしてしまいます。charset=”UTF-8′′>だけでも大丈夫です。content=”ja”/>HTMLで使用する言語を設定します。「Language」の文字があるので何を設定しているかわかりやすいですね。ここでは日本語なので「ja」のタグが入っていますが、各言語でここの設定が変わります。</title>このタグはサイトのタイトルを設定するもので、見出しではありません。ブラウザのタブや検索エンジンで表示されるサイトのタイトル部分です。content=”サイトの説明文”>ディスクリプションを設定するタグです。ディスクリプションとはそのページの説明文です。120字程度がちょうどいいとされています。content=”キーワード”>サイトのキーワードを設定するタグです。結婚式会場のサイトであれば「結婚式,会場,披露宴」などそのサイトに関連するワードを入れます。/>facebookやTwitterでシェアされた時にタイトルや概要などを正確に伝えるためのタグです。例ではタイトルでしたが、propertyの中には「og:description」「og:site_name」などもいれることができます。>robotタグは検索エンジンに指示を与えることのできるタグです。「noindex」としていすればそのページのインデックス登録を拒否することができ、「noarchive」としていればそのページ内でのキャッシュを拒否することができます。href=”ファビコンがある場所の階層”>ファビコンを設定することができます。type=”text/css”>CSSは複数読み込むことができます。CSSを直接記述するstyleタグなどもありますね。</script>スクリプトタグはJavaScriptを読み込んだり、そのまま直接中身に書きこむタグです。最近ではhead内に置くのではなく、bodyの終了タグの手前に置くのが主流になって来ています。場所によって読み込まれる順番が変わってしまい、効果が出なくなってしまうJavaScriptがあるので最後に書いた方がいいんですね。href=”先読みしたいドメイン”>DNSプリフェッチを利用すると、外部ドメイン名(ホスト名)の名前解決(DNSルックアップ)を事前に強制できます。ユーザー(ブラウザ)がそのドメインにアクセスする前にすでに名前解決が完了しているので、読み込み時間の短縮を図ることができるのです。読み込みを早くするためのタグのようです。以上が大雑把ですがよく見かけるheadの中の要素になります。userstitle,description,keyword等を確認するChrome拡張機能!こんにちは、佐々木です!title,description,keyword等を確認する拡張機能が前々から欲しいと思っていたので、少し前に作成してみました!試しに非公開で社内用に使っていたのですが、今回Chrome拡張機能として一般公開しましたので、ご紹介させて頂ければと思います...まとめいかがでしたでしょうか。意味が分かっているのとそうではないのでかなりコーディングに違いが出てくると思います。そのタグが必要か、それとも不必要なのかを判断することが重要です!headの中身は今後、ただ単にコピーするだけじゃなく意味もちゃんと覚えてきたいですね!それではまたお会いしましょう。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。