head要素と関連ファイル

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](http://www.xiconeditor.com/)
[ICO converter](https://www.icoconverter.com/)
[Favicon Generator for perfect icons on all browsers](https://realfavicongenerator.net/)



### 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](https://ogp.me/)




### 共通部分(必須)

```: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](https://developers.facebook.com/) (アプリID登録)


[ウェブ管理者向けシェア機能ガイド](https://developers.facebook.com/docs/sharing/webmasters#markup)

[Facebook Debugger](https://developers.facebook.com/tools/debug/) (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](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started)

[Twitter Card Validator](https://cards-dev.twitter.com/validator) (Twitterのログインが必要)






### 画像サイズ

|SNS|横幅|縦横比|
|---|---|---|
|Twitter|300px～4,096px|2:1|
|Facebook|1,080 px以上|1.91:1|
|両対応|1200px × 630px|1：1.91|
png推奨(jpgも可)

[OGP画像シミュレータ](http://ogimage.tsmallfield.com/)


### デバッグツール
#### Twitterのデバッグツール
[Card Validator | Twitter Developers](https://cards-dev.twitter.com/validator)


#### Facebookのデバッグツール
[シェアデバッガー](https://developers.facebook.com/tools/debug/)
「次のプロパティは必須です: 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](https://www.htaccesseditor.com/)

### 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](https://app-manifest.firebaseapp.com/)


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


[sitemap xml generator](https://www.xml-sitemaps.com/)

[sitemap xml editor](http://www.sitemapxml.jp/)





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

[robots.txtメーカー](http://www.mf-seo.com/tool/robotstxt/)


|命令|必須/任意|内容|
|---|---|---|
|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
http://humanstxt.org/JA/Standard.html

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

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