copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2018/08/03

HTMLのhead内まとめ

Written by Momoko Tabata

  • HTML

INDEX

    お久しぶりです。tabataです。
    早いもので、入社して5ヶ月が経ちました👏🏻👏🏻👏🏻
    今回はHTMLのhead内に書いておきたいタグについて、
    振り返りも兼ねてまとめていきます✏️

    metaタグ

    文字エンコード

    文字コードを指定します。

    <meta charset="utf-8">
    

    viewport

    レスポンシブデザインに対応させます。(スマホやタブレットでの表示を最適化します。)
    参考:https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

    <meta name="viewport" content="width=device-width,initial-scale=1">
    

    IE用の設定

    IEには過去のバージョンで表示させる「互換モード」という機能があり、それによってページのデザインが崩れてしまう可能性があります。このタグを使うことで、常に標準モードでの表示をさせることができます。

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    

    format-detection

    スマートフォンは電話番号やメールアドレス、住所を自動的にリンクに変換してしまうため、これらを無効化させます。

    <meta name="format-detection" content="telephone=no,address=no,email=no">
    

    title

    検索結果やブラウザのタブに表示させます。

    <title>タイトル</title>
    

    keywords

    ページの内容を示すキーワードを半角カンマ(,)区切りで記載します。
    ※Googleではページの評価基準として keywords を使用していないため、書いてもSEO的な効果は期待できないようです。
    参考:https://support.google.com/webmasters/answer/79812?hl=ja

    <meta name="keywords" content="キーワード1,キーワード2,…">
    

    description

    こちらに書いた文章は検索結果の記事タイトル下に表示されます。
    160字以下(※)にすると良いそうです。※諸説あります

    <meta name="description" content="ページの説明文">
    

    OGP・Twitterカード

    facebook や twitter などでページがシェアされた時に表示させる文章や画像を指定します。

    <meta property="og:title" content="タイトル" />
    <meta property="og:url" content="ページのURL" />
    <meta property="og:type" 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="App-IDを記入">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="Twitterカードの種類" />
    <meta name="twitter:site" content="@Twitterのユーザー名" />
    

    Facebook OGP:https://developers.facebook.com/docs/sharing/webmasters
    Twitter OGP:https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup

    ※Facebook App IDの取得方法はこちらのサイトを参考に

    linkタグ

    canonical

    URLの正規化をします。正式なURLを検索エンジン側に伝えます。
    参考:https://ferret-plus.com/1809

    <link rel="canonical" href="URL">
    

    ファビコン(サイトアイコン)

    アドレスバーやブラウザのタブに表示される画像を指定します。

    <link rel="apple-touch-icon" href=“">
    <link rel="shortcut icon" type="image/png" href="">
    <link rel="icon" type="image/png" href="" sizes="16x16">
    <link rel="icon" type="image/png" href="" sizes="32x32">
    <link rel="icon" type="image/png" href="" sizes="64x64">
    

    参考:https://realfavicongenerator.net/faq#.W2FXA9j7Sup
    参考:https://hail2u.net/documents/favicon-cheat-sheet-ja.html

    CSS

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

    <link rel="stylesheet" href="URL">
    

    scriptタグ

    外部のJavaScriptファイルを読み込みます。
    こちらは、</body> 付近に書くことも多いです。

    <script src="URL"></script>
    

    まとめ

    わたしがコーディングを学び始めた頃のhead内、スカスカでした🙈
    こんなに書く要素があったんだとびっくりしたのを思い出します。
    サイトによって必要なものと不要なものがあると思うので、そこをしっかり見極めて記述すると良いですね。
    それではまた!

    参考サイト

    https://gethead.info/和訳版

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View