LoginSignup
2
3

More than 3 years have passed since last update.

@takeshisakuma(takeshi sakuma)

head要素と関連ファイル

Last updated at Posted at 2019-12-15

HTMLのhead要素内の記述と、関連ファイルについて毎回調べるのは手間なのでまとめました。

基本

文字コードを指定

html
<meta charset="utf-8" />

IEで標準モードで表示

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

viewportの指定

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

ページタイトル

html
<title>任意のタイトル</title>

ページの説明を約100文字以内で記述

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

クローラーにインデックス拒否(拒否時のみ記述)

html
<meta name="robots" content="noindex,nofollow" />

URLの正規化

html
<link rel="canonical" href="正規化するURL" />

CSSファイルの読み込み

html
<link rel="stylesheet" href="/css/style.css" />

JavaScriptファイルの読み込み

html
<script src="/js/mian.js"></script>

フィードページのURLを指定

html
<link rel="alternate" type="application/rss+xml" title="フィード" href="フィードのURL" />

分割ページ用のタグ

html
<link rel="prev" href="前のページのURL" />
<link rel="next" href="次のページのURL" />

電話番号やメールアドレスの変換設定

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

アンドロイドでタブの色を変更する

html
<meta name="theme-color" content="#2c3e50">

アイコン

favicon

ブラウザのタブやブックマーク時のアイコンとして表示される

※IE対応が必要な場合のみfavicon.pngの読み込みをしてください。

html
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon alternate" href="/favicon.png" type="image/png">

favicon変換ツール

X Icon editor
ICO converter
Favicon Generator for perfect icons on all browsers

apple-touch icon

iPhoneやiPadのsafariや、AndroidでWebサイトをホーム画面に追加した時に表示します。

項目 値
サイズ 180px×180px
ファイル名 apple-touch-icon.png
位置 ルートフォルダ
html
//光沢あり
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">　

//光沢なし
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">

//タッチアイコン用のタイトル半角11文字(全角6文字)まで
<meta name="apple-mobile-web-app-title" content="タイトル半角11文字(全角6文字)まで">

OGP

URLが共有された際に、設定された画像やタイトル・説明文を表示できます。
The Open Graph protocol

共通部分(必須)

html
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <meta property="og:title" content="page title">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:image" content="https://example.com/img/ogp.png">
  <meta property="og:description" content="">
</head>
必須のプロパティ 内容
og:title 表示させたいタイトル　省略時はtitleタグの内容になる
og:type トップページは「website」か「blog」、下層ページは「article」
og:url 表示するページのURL(httpsからはじめてパラメータ無しの正規のURL)
og:image 表示する画像のURL(絶対パス)　縦630px×横1200px 未指定の場合はページ内の画像が選ばれる
og:description ページの説明文

共通部分(任意)

html
<meta property="og:site_name" content="site name" >
<meta property="og:email" content="example@example.com" >
<meta property="og:phone_number" content="xxxx-xxxx-xxxx" >
<meta property="og:locale" content="ja_JP" >
<meta property="og:image:secure_url" content="https://exsmple.com/img/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:updated_time" content="2018-04-09T16:43:43+09:00" />
任意のプロパティ 内容
og:site_name サイト名
og:email 連絡先を設定
og:phone_number 連絡先を設定
og:locale サポートしている言語を設定　日本語のみの場合「ja_JP」　英語のみの場合は「en_US」
og:image:secure_url WebページがHTTPSを必要とする場合のURL
og:image:type 画像のMIMEタイプ(image/jpeg, image/gif, image/png,等)
og:image:width 画像の幅
og:image:height 画像の高さ
og:updated_time データのアップデートが行われた時刻

Facebook用の記述

FacebookのアプリIDは必須にはなっているが、指定がなくてもOGPとして表示はされる

html
<meta property="fb:app_id" content="[app_id]" />

Facebook for Developers (アプリID登録)

ウェブ管理者向けシェア機能ガイド

Facebook Debugger (FBのログインが必要)

Twitter用の記述

html
//必須
<meta name="twitter:card" content="summary_large_image">

//任意
<meta name="twitter:site" content="@サイト用のTwitterアカウント" />
<meta name="twitter:creator" content="@製作者のTwitterアカウント" />
twitter:cardの値 内容
summary 通常のサイズの画像
summary_large_image 大きいサイズの画像

Optimize Tweets with Cards

Twitter Card Validator (Twitterのログインが必要)

画像サイズ

SNS 横幅 縦横比
Twitter 300px～4,096px 2:1
Facebook 1,080 px以上 1.91:1
両対応 1200px × 630px 1：1.91

png推奨(jpgも可)

OGP画像シミュレータ

デバッグツール

Twitterのデバッグツール

Card Validator | Twitter Developers

Facebookのデバッグツール

シェアデバッガー
「次のプロパティは必須です: fb:app_id」が表示されても表示はされます。

多言語サイト

hreflang属性

googleは下記は見ていないので、代わりにhreflang属性を使います。

html
<html lang="ja">

hreflang属性は同内容の他言語版を指定するときに使います。
hreflangタグは多言語に対応しているページ全てに記述が必要です。
使用言語が１つだけの場合は「hreflang」の指定は不要です。

html
<link rel="alternate" href="http://ja.example.com/" hreflang="ja" />
<link rel="alternate" href="http://en.example.com/" hreflang="en" />
html
<link rel="alternate" hreflang="ja" href="http://example.com/jp/">
<link rel="alternate" hreflang="en" href="http://example.com/en/">

言語が同じで、地域別にも作る場合はcanonicalが必要です。
例：enとen-ca(カナダ)など

html
<link rel="canonical" href="http://en.example.com/" />
<link rel="alternate" href="http://ja.example.com/" hreflang="ja" />
<link rel="alternate" href="http://en.example.com/" hreflang="en" />
<link rel="alternate" href="http://en-ca.example.com/" hreflang="en-ca" />

言語コード

言語 言語コード
日本語 ja
英語 en
フランス語 fr
スペイン語 es
イタリア語 it
ロシア語 ru
中国語 zh

画像以外のファイル

.htaccess

できること

  • ファイル一覧の拒否
  • ベーシック認証
  • エラーページ
  • デフォルトページ
  • WWW有無統一
  • リダイレクト
  • アクセス制限
  • ファイル一覧の拒否

.htaccess Editor

manifest.json

html
<link rel="manifest" href="/manifest.json">

例

manifest.json
{
  "name": "app name",
  "short_name": "short name",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "browser",
  "Scope": "/",
  "start_url": "/",
  "icons": [{
      "src": "img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Web App Manifest Generator

sitemap.xml

設置場所：http://www.example.com/sitemap.xml

sitemap xml generator

sitemap xml editor

robots.txt

設置場所：http://www.example.com/robots.txt
headへの記述は不要

robots.txtメーカー

命令 必須/任意 内容
User-agent 必須 命令を与えるユーザーエージェントの名称を記入
Disallow 任意 クロールをブロックするディレクトリやページを記入
Allow 任意 クロールを許可するディレクトリやページを記入
Sitemap 任意 sitemap.xmlのURLを記入(複数ある場合は複数記入可)

User-agent

例 内容
User-agent : * 全てのクローラーが対象
User-agent : Googlebot Googlebotのみ対象
User-agent : Baiduspider 百度のみ対象

DisallowとAllow

例 内容
Disallow: / サイト内の全てのページをブロック(/はTOP配下全てを表す)
Disallow: ブロックなし
Disallow: / aaa/bbb.html ページ(/aaa/bbb.html)のみブロック
Disallow : /ccc/ ディレクトリ(/ccc/)配下全てのページをブロック
Allow : /ccc/ddd.html ページ(/ccc/ddd.html)のみクロール許可

humans.txt

html
<link rel="author" href="humans.txt" />

設置場所：http://www.example.com/humans.txt
設置は任意
書式は自由で人が読めるようになっていれば良いようです。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3