headの中身を確認してみよう(HTML)
headでよく使われているタグを確認してみましょう!
はじめに
headタグの中身、なんとなくで使っているタグないですか?
今回はよく記載されているものを確認していきます。
headの中身を確認してみよう
文字のエンコード
<meta charset="utf-8">
文字コードを指定します。文字化けの原因になるので必ず記載しましょう。
タイトル
<title>たねっぱ!</title>
webサイト・ページのタイトルになります。ブラウザの検索結果や、ブラウザのタブにも表示されます。
ディスクリプションの設定
<meta name="description" content="">
ディスクリプションに記入したテキストは、検索結果に出る文章としても使われます。(使われない場合もあります)
キーワードの設定
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
サイトに関するキーワードを複数設定できますが、直接的なSEOの効果はありません。
ビューポートの設定
<meta name="viewport" content="width=device-width, initial-scale=1">
スマホやレスポンシブ対応する場合は必須になります。
電話番号などの自動リンク無効化
<meta name="format-detection" content="telephone=no">
ページ内の電話番号(およびその他の番号なども)自動的にリンクしてしまうので、それらを無効化します。
IE対策
<meta http-equiv="X-UA-Compatible" content="IE=edge">
これを入れることで、IE・エッジの最新バージョンで表示されます。互換モードで表示されている場合も、通常表示になります。
SNS対策・OGPの設定
<!-- OGP --> <meta property="og:url" content="ページのURL"> <meta property="og:type" content="ページの種類"> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明文"> <meta property="og:image" content="画像のURL"> <meta property="og:site_name" content="サイトの名前"> <meta property="og:locale" content="ja_JP"> <!-- Facebook --> <meta property="fb:app_id" content="アプリID"> <meta property="article:publisher" content="FacebookページのURL" /> <!-- Twitter --> <meta name="twitter:card" content="Twitterカードの種類" /> <meta name="twitter:site" content="@ユーザー名" /> <meta name="twitter:creator" content="@ユーザー名"> <meta name="twitter:title" content="ページのタイトル"> <meta name="twitter:description" content="ページの説明文"> <meta name="twitter:image" content="画像のURL">
FacebookやTwittertなどでシェアされた時の設定になります。
補足ですが、og:type(ページの種類)は、website・blog・article・profileなどがあります。
twitter:card(カードの種類)は、summaryかsummary_large_imageがあります。
ファビコンの設定
<!-- icoの場合 --> <link rel="icon" href="/favicon.ico"> <!-- pngの場合 --> <link rel="icon" type="image/png" href="/favicon.png"> <!-- gifの場合 --> <link rel="icon" type="image/gif" href="/favicon.gif">
CSSの読み込み
<link rel="stylesheet" href="">
JavaScriptの読み込み
<script src=""></script>
最後に
いかがでしたか?headには大事な情報が詰まっているので、しっかり設定していきたいですね(^^)♪