More than 3 years have passed since last update.

WEBページに設定しておくと良いHTTPヘッダとかメタタグとか

Last updated at 2020-05-24Posted at 2014-09-22

SEOとか、セキュリティのために設定しておいた方が良いHTTPヘッダとか、メタタグとかをまとめてみた。

##HTTPヘッダ

###Vary

php

header('Vary: User-Agent');　
header('Vary: Accept-Encoding');
header('Vary: Accept-Language');
header('Vary: Cookie');

プロキシサーバなどのキャッシュを適切に行ってもらうために必要
UserAgentなどの条件によってコンテンツの内容が変わる場合は、別々にキャッシュしてもらう。
HTTP圧縮に対応しているなら、Accept-EncodingをつけるとブラウザがHTTP圧縮したコンテンツを受けてくれる。

参考
http://web-tan.forum.impressrd.jp/e/2013/05/17/15269
http://kaigai-hosting.com/opt_site-specify-vary-header.php

###Cache-Control:

php

header('Cache-Control: private,no-store,must-revalidate');

Webサーバから返されてくるコンテンツをキャッシュさせないようにさせる。
個人情報が出力される等のページに設定。
Cache-Controlはprivate、no-store、must-revalidateなどの値がある。詳しくは参考ページを参照。

Cache-Control: private

Webサーバから返されるコンテンツがただ一人のユーザのためのものであることを示す。このコンテンツは、複数のユーザが共有されるキャッシュに記録されるべきではないことを表している。ただし、これは、一人のユーザのみが利用するキャッシュ（ブラウザのキャッシュ等）への記録を禁じるものではない。Cache-Control: private のみが指定されている場合、何らかのキャッシュへの記録が行われるおそれがある。

Cache-Control: no-store

このヘッダは、Webサーバから返されてくるコンテンツをキャッシュに記録するな、という指示である。

Cache-Control: no-cache

一見「キャッシュを使うな」のように見えるこのヘッダが実際に意味するところは少々ニュアンスが異なる。このヘッダの意味は、いちどキャッシュに記録されたコンテンツは、現在でも有効か否かを本来のWebサーバに問い合わせて確認がとれない限り再利用してはならない、という意味である。

Cache-Control: must-revalidate

このヘッダは、キャッシュに記録されているコンテンツが現在も有効であるか否かをWebサーバに必ず問い合わせよ、という指示である。

post-check=0, pre-check=0などもあるようだが、IE5向けみたいなので気にしなくても良いか？
ちなみに、PHPでsession_cache_limiterを設定すると

session_cache_limiter('nocache');

下記のヘッダが出力される。

Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache

参考
https://www.ipa.go.jp/security/awareness/vendor/programmingv2/contents/405.html
http://k-holy.hatenablog.com/entry/symfony-advent-2012
http://blog.tokumaru.org/2015/03/blog-post_27.html

###X-Content-Type-Options:nosniff

php

header('X-Content-Type-Options:nosniff');

Internet Explorerの場合、Content-Typeの値に関わらず勝手に解釈してしまう場合があるので、JSON形式で出力したつもりでも、XSSによってスクリプトが混じっていた場合に勝手にHTMLとして解釈されてしまう。これを防ぐために必要。
設定する事による弊害は無いと思うので全ページに設定。

参考
http://d.hatena.ne.jp/hasegawayosuke/20130517/p1

###X-Frame-Options

php

header('X-Frame-Options:DENY');
header('X-Frame-Options:SAMEORIGIN');
header('X-Frame-Options:ALLOW-FROM uri');

クリックジャッキング攻撃対策。
外部のサイトからiframeを使って呼ばれる事を防ぐ。

X-Frame-Options:DENYだと、すべてのページから呼べない。
X-Frame-Options:SAMEORIGINだと、同じサイト内からであれば呼べる。
X-Frame-Options:ALLOW-FROMだと指定された生成元に限り、ページをフレーム内に表示できる。

iframeで外部のサイトから呼ばれた方が良いシチュエーションは少ないと思うけれど、設定して問題が起きないかは、確認してから設定すべし。Chrome4.1以上、Firefox3.6以上、IE8以上、Safari4以上

参考
http://buzzwordjp.blogspot.jp/2011/09/iframe-x-frame-options-http.html
https://developer.mozilla.org/ja/docs/HTTP/X-Frame-Options
http://blog.tokumaru.org/2013/03/clickjacking-report-by-IPA.html

###X-XSS-Protection

php

header('X-XSS-Protection:1; mode=block');

XSSフィルタのON/OFFの設定。XSSをブラウザが検知するとレンダリングを止める。
Qiita、Twitter、GithubではON設定されている。Facebookは逆にOFFに
設定されている。XSSフィルタの誤作動を防ぐため？

参考
http://qiita.com/d6rkaiz/items/9f4ebad83b3437a0d2ea
http://hebikuzure.wordpress.com/2011/04/22/ieinternals-xss-%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%82%92%E5%88%B6%E5%BE%A1%E3%81%99%E3%82%8B/

Strict-Transport-Security(HSTS)

php

header('Strict-Transport-Security: max-age=31536000;');

常時SSLのページ対策。
次回以降HTTPの代わりにHTTPS使うようにブラウザ側を動作させる。
Microsoft Edge、Safari(Mavericks)、Chrome4以上、Firefox4以上、IE１１に対応。
ドメイン単位の設定なので、HTTPが混在するサイトでは使えない。
Twitterは常時SSLなので、設定されている。

参考
http://developer.cybozu.co.jp/tech/?p=6096
http://web-tan.forum.impressrd.jp/e/2014/08/22/18072
https://support.microsoft.com/ja-jp/kb/3071338
https://www.owasp.org/index.php/HTTP_Strict_Transport_Security_Cheat_Sheet

P3Pコンパクトポリシー

php

header('P3P: CP="NOI ADM DEV PSAi COM NAV OUR OTR STP IND DEM"');

プライバシーポリシーについての情報をP3P(The Platform for Privacy Preferences)の形式で表記する。
IEのCookieの保存の仕方にも影響があるみたい。
ルールがややこしい。

尚、Facebookのヘッダーには下が設定されてあり
p3p:CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
上記のURL(http://fb.me/p3p) を見てみると
最新のほとんどのウェブブラウザがP3Pを完全にはサポートしていないことから、数年前にこの標準化作業を中断したとのこと。

参考
http://d.hatena.ne.jp/R-H/20111101
http://www.ark-web.jp/sandbox/wiki/240.html
http://bakera.jp/ebi/topic/3594

Content Security Policy(CSP)

php

//ドキュメントが置かれたホストと trustedscripts.foo.com から読み込まれるコンテンツを許可
header("Content-Security-Policy: default-src 'self' trustedscripts.foo.com"); 

//コンテンツの提供元として使用される data: URI を許可
header("Content-Security-Policy: default-src 'self'; img-src 'self' data:");

XSS、クリックジャッキング対策。インラインJavaScriptを制限したり、細かいアクセス制御ができる。
Facebook、Twitterに設定あり。内部的にJavascript等のコンテンツがどんな風に利用されているか把握してから使用しないといけないので難易度は高め。

Content-Security-Policy-Report-Onlyだと、実際に制限はかけずに、違反があれば指定されたURLにJSONでエラーを報告するので、これで様子見てから試すと良さそう。

参考
http://blog.hash-c.co.jp/2013/12/Content-Security-Policy-CSP.html
http://blog.monoweb.info/blog/2012/03/15/content-security-policy/
https://developer.mozilla.org/ja/docs/Security/CSP/CSP_policy_directives
http://www.ipa.go.jp/security/awareness/vendor/programmingv2/contents/705.html
https://blog.jxck.io/entries/2016-03-30/content-security-policy.html

Access-Control-Allow-Origin

php

//すべてのオリジンからのアクセスを許可する
header('Access-Control-Allow-Origin: *');

XMLHttpRequestでクロスドメイン通信の許可の制御を行う。
特定のサイトからしかAjaxで呼び出しできないように設定する。

参考
http://tadtak.jugem.jp/?eid=59
http://qiita.com/kawaz/items/6a22c2c970c8d932a3a1

Serverヘッダ／X-Powered-Byヘッダ

Server: Apache/2.2.0 (Unix) mod_ssl/2.2.0 OpenSSL/0.9.8 PHP/5.2.0
X-Powered-By: PHP/5.2.6-2ubuntu4

ServerヘッダにWebサーバの情報、X-Powered-Byヘッダに使用しているアプリケーションの情報が表示される。この情報を隠すべきかどうかは色々意見があるようだけど、大体のサイトはWebサーバ名だけか、Server:Apache プラスそのバージョンを出力する程度が多いようだ。Server:Apache/0.0.0
facebookなどのようにServerヘッダ自身を削除しているところもある。
設定方法は、WebサーバやWebアプリケーションごとに異なる。

参考
http://labs.cybozu.co.jp/blog/kazuho/archives/2007/09/re_server_sig.php
http://oinume.hatenablog.com/entry/wp/124
http://blog.code-life.net/blog/2013/04/24/hide-php-version/

Feature-Policy

Feature-Policy: vibrate 'none'; geolocation 'none'

Geolocation APIなどの特定の機能の利用の許可や拒否を行うためのもの。
CSPに似ているが、こちらは機能軸で制御するためのもの。

###その他

アプリケーションによって、独自ヘッダーが付いている場合もある。'X-'接頭辞を使っている場合が多い。
例えば、AWSのロードバランサーが付けるヘッダーとして「Application Load Balancer のリクエストのトレース」というのもある。

X-Amzn-Trace-Id: Root=1-67891233-abcdef012345678912345678

ただし、MDNにも書かれているように、非標準のフィールドが標準になる場合もあるので、'X-' 接頭辞を使うのは現在非推奨となっている。

他にもHTTP ヘッダーは色々ある。MDNに出ているのでそれを見ると良い。大体はWEBサーバやロードバランサなどアプリケーションが自動で出力するものが多いので、自分で意図的に追加するものはあまりなかったと思う。

参考
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers
http://www.cresc.co.jp/tech/java/Servlet_Tutorial/Att_03.htm
http://www.atmarkit.co.jp/fnetwork/rensai/netpro01/header-fields.html
http://web-tan.forum.impressrd.jp/e/2010/01/12/7156

HTMLタグ、メタタグなど

この辺が参考になる。
Google 検索エンジン最適化スターターガイド
[Google がサポートしているメタタグ]
(
https://support.google.com/webmasters/answer/79812?hl=ja
)

google-site-verification

html

<meta name="google-site-verification" content="*************" />

ウェブマスターツールで所有権を確認。Google ウェブマスターツールに登録する際に必要。

参考
http://www.adminweb.jp/wmt/setup/index3.html

description

html

<meta name="description" content="ページについての説明">

ページの概要を記載する。Googleの検索結果に表示されるスニペットに利用される可能性がある。ページごとで重複しないように。

keywords

html

<meta name="keywords" content="キーワード１,キーワード２,キーワード３">

ページに関連するキーワードを記載。
現在ではGoogleはメタキーワードを順位決定の要素には使用していないとのこと。
titleタグ内の内容の方が重要。
Yahoo、Bingも同様。Baidu、Naver、Yandexなどは使用しているらしい。

参考
http://www.allegro-inc.com/seo/716.html
http://info.moravia.com/blog/bid/319869/SEO-Experts-Are-WRONG-on-Meta-Keywords-Descriptions

link rel=”alternate”

html

<!--スマホ-->
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://スマホサイトのページ/page-1" />
<!--携帯-->
<link rel="alternate" media="handheld" href="http://携帯サイトのページ/page-1" />

スマホ端末版ページ、携帯端末版ページのリンク先を記載する。ページごとに適切なURLを指定する。

参考
https://support.google.com/webmasters/answer/2620865?hl=ja
http://www.suzukikenichi.com/blog/building-websites-optimized-for-smartphones-and-feature-phones/

link rel="canonical"

html

<!--現在のページ-->
<link rel="canonical" href="http://www.example.com/article?story=abc&page=2"/>

<!--前ページ-->
<link rel="prev" href="http://www.example.com/article?story=abc&page=1" />

<!--次ページ-->
<link rel="next" href="http://www.example.com/article?story=abc&page=3" />

URL正規化タグ。URLにソート順やページ番号などのパラメータついているため、Googleに別のページとして認識されないように正しいURLを指定する。
複数のページに遷移するページの場合は、rel="next"、rel="prev"を指定して、
ページが全ページクロールされるようにすること。

参考
http://web-tan.forum.impressrd.jp/e/2009/03/05/5112
https://support.google.com/webmasters/answer/1663744?hl=ja
https://support.google.com/webmasters/answer/1663744?hl=ja

link rel="publisher"

html


<link rel="publisher" href="Google+ページなど"  />

ウェブサイトをそのサイトの所有者・発行者と結びつける機能。 Google+ページなどを設置

参考
https://www.suzukikenichi.com/blog/rel-publisher-is-unlikely-to-come-anytime-soon/

link rel="index" or link ref="contents"

html

<!--リンク先が、現在の文書に対する「目次」-->
<link rel="contents" href="example.html">
<!--リンク先が、現在の文書に対する「索引（インデックス）」--> 
<link rel="index" href="example.html">

サイトによって、indexはTOPページで、contentsがサイトマップと言っているところと、
indexがサイトマップと言っているところがある、どっちが本当だろう？

参考
http://www.tagindex.com/html_tag/page/link.html
http://www.deego.co.jp/blog/?p=116
http://www.itti-c.com/web-staff/header-meta.php
http://viral-community.com/html/link-tag-2698/
http://webdesign.cube-net.jp/2012/02/seo/

DNS Prefetching

html

 <meta http-equiv="x-dns-prefetch-control" content="on">
 <link rel="dns-prefetch" href="http://example.com">

DNSの名前解決を事前に行うことが出来る。外部ドメインへの参照リンクがたくさんあるページなどでリンクをクリックした時の待ち時間を減らすのに有効。ChromeとFirefox、Opera、IE10以降で有効。


<meta http-equiv="x-dns-prefetch-control" content="off">

DNS PrefetchingをOFFにすることにもできる。

参考
http://takuya-1st.hatenablog.jp/entry/20121107/1352637176
http://www.suzukikenichi.com/blog/dns-prefetching/
https://developer.mozilla.org/ja/docs/Controlling_DNS_prefetching

Link Prefetching/Prerendering

html


<link rel="preconnect" href="//example.com" crossorigin>
<link rel="prefetch" href="http://example.com/2013/05/hello-world.html" />
<link rel="prefetch" href="http://example.com/assets/images/avatar.png" />

<link rel="prerender" href="http://example.com/2013/05/hello-world.html" />

DNS Prefetchingに似た機能。
preconnectはと同じようにDNSの名前解決をするのに加えて、TCPコネクションも貼っておく。
prefetchは指定したコンテンツをあらかじめfetchしておくことが出来る。
prerenderingだとfetchに加えてレンダリングも行ってくれる。

参考
http://daker.me/2013/05/5-html5-features-you-need-to-know.html
http://hylom.net/2010/06/03/html5_link_prefetch/
http://msdn.microsoft.com/ja-jp/library/ie/dn265039%28v=vs.85%29.aspx
http://qiita.com/Jxck_/items/b89e9635d927e4242aa2
https://hail2u.net/blog/webdesign/dns-prefetch-preconnect-prefetch-prerender-preload.html

notranslate

html

<meta name="google" content="notranslate" />

Google翻訳が自動で起動しないようにする。

参考
http://d.hatena.ne.jp/scientre/20130402/stop_translation_on_google_chrome

shortlink

html

<link rel='shortlink' href=短縮URL' />

短縮URLを提供。

参考
http://www.moongift.jp/2009/05/shortlink/
http://slackline.jp/2011/01/08193515/

favicon

html

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.gif" type="image/gif"><!--動画GIF等-->
<link rel="icon" sizes="any" mask href="favicon.svg">
<link rel="mask-icon" href="./favicon.svg" color="black">

<!-- 複数のサイズを指定しておくことも可能 -->
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">

PCサイトのアイコン。TOPディレクトリにfavicon.icoをおくだけでも良いらしい。
Twitterの場合はSVGファイルが設置されていた。

参考
http://liginc.co.jp/web/design/material/16853
https://css-tricks.com/favicon-quiz/

Safariページピンアイコン

html


<link rel="mask-icon" href="./favicon.svg" color="black">

safariのタブの部分に表示されるピンアイコンに使用する。SVG形式で設置する。

参考
https://wayohoo.com/mac/beginners/how-to-set-icons-for-pinned-tabs-for-safari.html
http://qiita.com/GSSxGSS/items/e6185a518f0c113774a0

image_src

html

<link rel="image_src" href="thumb.jpg" />
<!-- 下記のように併用も出来る？-->
<link rel="apple-touch-icon image_src" href="~.png">

ソーシャルブックマークサイト等に表示されるサムネイル画像を指定する。
OGPタグがない場合にog:imageの代わりに使用されるらしい。
StackOverFlowではapple-touch-iconと併記して書かれていた。

参考
http://www.webcreatorbox.com/tech/css-tips20/
http://tenderfeel.xsrv.jp/memo/1269/

apple-touch-icon

html

<link rel="apple-touch-icon" href="アイコン画像URL" />
<link rel="apple-touch-icon-precomposed" href="アイコン画像URL">

iPhone、iPadのホーム画面に追加するときのアイコン画像。
apple-touch-iconは光沢効果あり、apple-touch-icon-precomposedは光沢なし

参考
http://www.tagindex.com/html5/page/link_webclip.html

apple-mobile-web-app-status-bar-style

html

<meta name="apple-mobile-web-app-status-bar-style" content="default/black/black-translucent">

iOSのSafari上でステータスバーの表示を制御

参考
http://uupaa.hatenablog.com/entry/2013/09/25/180817
http://www.symmetric.co.jp/blog/archives/93

apple-touch-startup-image

html

<link rel="apple-touch-startup-image" href="/launch.png">

ネイティブアプリのようなスプラッシュ画面を表示する。iOS 9で使えないらしいので意味なし。

参考
http://qiita.com/ikkou/items/f494347c890c9039fdce

apple-mobile-web-app-capable

html

<meta name="apple-mobile-web-app-capable" content="yes">

Webアプリモード（フルスクリーンモード）でネイティブアプリのようにする。iOS 9で使えないらしいので意味なし。

参考
http://d.hatena.ne.jp/izit_kosuke/20110219/1298073430

apple-mobile-web-app-title

html

<meta name="apple-mobile-web-app-title" content="AppTitle">

ホーム画面に保存したときののtitleをtitleタグとは別のものにする。ためしたがうまくいかなかったバージョンによる？

参考
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

viewport

html

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

表示領域を指定。スマートフォンやタブレット、レスポンシブなサイトで設定する。

参考
http://www.tagindex.com/html5/page/meta_viewport.html

format-detection

html

<meta content='telephone=no' name='format-detection'>

電話番号の自動リンク機能を制御する。スマートフォンやタブレット、レスポンシブなサイトで設定する。

参考
http://www.tagindex.com/html5/page/meta_format_detection.html

SKYPE_TOOLBAR

html

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">

Skypeの拡張のせいで電話番号がSkypeアイコンに置き換わってしまうのを防ぐ。

参考
http://howtohp.com/2013/04/18/prevent-skype/

Imagetoolbar

html

<meta http-equiv="Imagetoolbar" content="no">

イメージツールバーを無効にすることができる。IE6用なので必要はなさそう。

参考
http://www.tagindex.com/html_tag/page/meta_imagetoolbar.html

cleartype

html

<meta http-equiv="cleartype" content="on">

cleartype フォントを on

参考
http://myisland.jp/template/tips/meta.html

msthemecompatible

html

<meta http-equiv="msthemecompatible" content="no">

視覚テーマの有効/無効

参考
http://myisland.jp/template/tips/meta.html

robots

html

<meta content="noarchive" name="robots" />

検索エンジンのロボットの動きを制御するタグ
更新頻度が高いサイトの場合、Googleの検索結果に出てくるキャッシュリンクで
変更前の情報が見えてしまうのは良くないと思うのでnoarchive(アーカイブを拒否する)
設定を入れた方が良いかもしれない。

参考
https://support.google.com/websearch/answer/1687222?hl=ja
http://www.suzukikenichi.com/blog/7-correct-ways-of-using-robots-meta-tag/

index,follow

html

<meta name="robots" content="index,follow">

index,followは設定しなくても、検索エンジンは通常インデックスするしリンク先をたどる。

参考
http://www.suzukikenichi.com/blog/7-correct-ways-of-using-robots-meta-tag/

referrer

html

<!-- origin(ドメインのみ)/always(URL全体)/never(送らない)/default(デフォルトの挙動)
-->
<meta name="referrer" content="origin/always/never/default" />

referrerの送出の制御。URL情報を参照先のページに伝えるかどうか設定する。Facebookに設定があったがdefaultだった。

参考
http://nanapi.co.jp/blog/2014/08/13/meta-referrer-browser-support/
http://qiita.com/wakaba@github/items/707d72f97f2862cd8000

文書の管理情報

html

<meta name="generator" content="Web作成ツール名">
<meta name="author" content="著者名">
<meta name="copyright" content="著作権者">
<meta name="reply-to" content="メールアドレス">
<meta name="tel" scheme="電話番号">
<meta name="fax" scheme="FAX番号">
<meta name="code" scheme="国番号">
<meta name="title" content="タイトル">
<meta name="build" content="HP開設日">
<meta name="Creation Date" content="作成日">
<meta name="date" content="更新日">
<meta name="language" content="言語">

文章の著者等の管理情報を記載。この情報がどのように活用されるかは不明。

参考
http://www.t-net.ne.jp/~cyfis/html/meta/info.html
http://www.hyperposition.com/ranking/meta.html

X-UA-Compatible

html

<!--Internet Explorer 7 と同様に動作-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<!--互換モードを使用しない-->　
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Internet Explorerで指定したブラウザモードで実行する。HTTPヘッダで指定でも可。
互換モード表示したくない場合は、IE=edgeとする。chrome=1はIEのプラグイン、Google Chrome Frameを使用させる設定ですが、サポート終了するみたいなので設定しなくても良いかも。

参考
http://msdn.microsoft.com/ja-jp/library/cc817574.aspx
http://www.loconoco.info/?p=665

サイトリンク検索ボックス(Sitelinks Search Box)

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "example.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "http://example.com/search?q={q}",
    "query-input": "required maxlength=100 name=q"
  }
}
</script>

Googleの検索結果にサイトの検索ボックス表示されるようになっているが、
何も設定しないと、site: 検索となるが、
これを自分のページの検索ページに連結させるように設定する。
マークアップにはJSON LD、microdata、RDFaがあるが、JSON LDがscriptタグで囲った中に記載すれば良いので簡単そう。
"target"に検索ページのURLと{q}に検索ボックスの値が入るパラメータを指定。
"query-input"で入力必須や、桁数の指定が出来る。

参考
http://googlewebmastercentral-ja.blogspot.jp/2014/09/improved-sitelinks-search-box.html
http://www.suzukikenichi.com/blog/google-sitelinks-search-box/

サイトリンク検索ボックス(Sitelinks Search Box)を無効

html

<meta name="google" content="nositelinkssearchbox">

サイトリンク検索ボックス(Sitelinks Search Box)が表示されないように設定する。
数週間で反映されるらしい。
参考
https://developers.google.com/webmasters/richsnippets/sitelinkssearch

Google 検索用 App Indexing

html

<!--ページ http://example.com/gizmos の HTML に、ディープ リンク http://example.com/gizmos を指定-->
<link rel="alternate" href="android-app://com.example.android/http/example.com/gizmos" />

<!--HTTP 以外のスキーム（例: example://gizmo）を使用する場合-->
  <link rel="alternate" href="android-app://com.example.android/example/gizmos" />

Google検索の結果のリンクを開くとアプリを直接起動させるための機能

参考
https://developers.google.com/app-indexing/webmasters/server?hl=ja
http://internet.watch.impress.co.jp/docs/news/20140626_655400.html

App Links

html


<meta property="fb:app_id" content="【FacebookアプリのID】" />
<meta property="al:ios:url" content="【アプリを起動するためのURLスキーム】" />
<meta property="al:ios:app_store_id" content="【iTunesのストアID】">
<meta property="al:ios:app_name" content="【アプリ名】">

Facebookが発表したアプリ内のコンテンツにリンクする仕組み。アプリから他のアプリにリンクして起動させたりとアプリ間のリンクがしやすくなる。Yahoo知恵袋で設置されていた。

参考
http://blog.lebe.jp/post/85203389095/applinks
https://www.eisbahn.jp/yoichiro/2014/05/app_links.html
http://www.itmedia.co.jp/news/articles/1405/01/news029.html

PICS-Label

html

<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "自サイトURL" r (n 3 s 3 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1) gen true for "自サイトURL" r (n 3 s 3 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1))'>

セルフレイティング（有害情報規制)のためのもの。未成年に見せないようにフィルタリングソフトでブロックしてもらうために設置。楽天e-naviに設置あり。最近の情報が見つからなかったので、フィルタリングソフトの対応状況とか、一般的なのかとか良くわからなかった。

参考
http://www.nirui.com/2nd/yuu/html/meta.html
http://www.geocities.jp/selflabel/filtering_pics.html

manifest

html

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

manifest.json

{
  "name": "Web Application Manifest Sample",
  "icons": [
    {
      "src": "launcher-icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "launcher-icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Chrome 39から導入。metaタグに書く内容が今後こちらに切り替わっていくらしい。
ホーム画面へ追加の表示をさせたりすることが可能。詳しくは参考サイトで。

そういえば、Googleが以前、iPhoneでホーム画面のポップアップを表示させるJavascript(mobile-bookmark-bubble)を出していたが2011年以降更新がない。

参考
http://qiita.com/niusounds/items/03a0c6b313001f52a188
http://qiita.com/tmtysk/items/2c5da83feec45b4ee36f
https://developer.chrome.com/multidevice/android/installtohomescreen
http://moonglows76.tumblr.com/post/102930578463/web-webapp-manifest

Service Worker

先ほどのmanifest.jsonを使って設定するやり方は、Service Workerの機能で使うらしい。
Androidでかつhttpsページで、manifest.jsonとserviceworker.jsが設定する必要がある。

出来ることは、ホームページに追加するボタンの表示「 add to home screen」や。起動画面アイコンを出したり、スマホアプリのような通知や、オフラインキャッシュを使って、スマホアプリの利点をWEBアプリでも使えるようにできる。

詳細は下記を参考
SUUMOスマホサイトへのService Worker導入 ① add to home screen 編

「ホーム画面に追加」からはじめる『Service Worker』

theme-color

html

<meta name="theme-color" content="#55acee"> <!-- テーマカラー -->

Chrome 39 for Androidから対応。 Chromeのタブの色を変えることが出来る。Twitterに設定されていた。

参考
http://qiita.com/uzuki_aoba/items/dfb33b6242d347a58782

条件付きコメント

html

<!-- IE8の場合に有効なCSSを設定する-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

特定のバージョンのInternet Explorerにだけ有効になるコメント。
IE5〜IE9の場合使える。

参考
https://ja.wikipedia.org/wiki/%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88
http://www.tagindex.com/html5/basic/outdated.html

構造化データ

Webページに記載された項目(商品情報やクチコミ評価とか)について、何を意味するかの情報を付与する仕組み。主にGoogleの検索結果に出てくるリッチスニペットに適切に反映してもらうため使う。

microdataとJSON-LDのやり方がある。

microdata

html

<section itemscope itemtype="http://schema.org/Person">
  Hello, my name is
  <span itemprop="name">John Doe</span>,
  I am a
  <span itemprop="jobTitle">Graduate research assistant</span>
  at the
  <span itemprop="affiliation">University of Dreams</span>
  My friends call me
  <span itemprop="additionalName">Johnny</span>
  You can visit my homepage at
  <a href="http://www.example.com.com" itemprop="url">www.example.com</a>
  <section itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    I live at
    <span itemprop="streetAddress">1234 Peach Drive</span>
    <span itemprop="addressLocality">Warner Robins</span>
    <span itemprop="addressRegion">Georgia</span>.
  </section>
</section>

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "John Doe",
  "jobTitle": "Graduate research assistant",
  "affiliation": "University of Dreams",
  "additionalName": "Johnny",
  "url": "http://www.example.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Peach Drive",
    "addressLocality": "Wonderland",
    "addressRegion": "Georgia"
  }
}
</script>

JSON-LDの方がまとめて記載できるので楽そう。
でもmicrodataだと元々のWebページ構造を生かしつ記載でき、ページサイズも抑えられるので
どちらが良いかは状況に応じてという感じか。

正しく設定されているかはStructured Data Testing Toolを使う。参考に他のサイトを見てみるのもいいかも。

参考
http://web-tan.forum.impressrd.jp/e/2015/07/10/20384/page/1
http://www.lykaon-search.com/seo/schema-org/post-1460/
https://developers.google.com/gmail/markup/reference/formats/microdata?hl=ja

##外部サービス関連

###OGP（Open Graph Protocol）

html

<meta property="og:type" content="article">
<meta property="fb:app_id" content="FacebookのアプリケーションID">
<!-- <meta property="fb:admin" content="Facebookのユーザ"> -->
<meta property="og:title" content="タイトル">
<meta property="og:image" content="画像URL">
<meta property="og:url" content="ページURL">
<meta property="og:description" content="説明">
<meta property="og:site_name" content="サイト名">

サイトの情報をSNSなどに伝えるための仕様。主にFacebookで使用する。
mixi、GREE、Twitterカードでも使われている。
Facebookの場合、fb:app_id、またはfb:adminを指定する必要がある。
いいねボタンを設置したページに指定。

参考
http://d.hatena.ne.jp/amachang/20110117/1295233078
http://nex.fm/ogp/
http://webdesignerwork.jp/web/facebookogp/

###Twitterカード

html

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ツイッターID">

Twitter上にWEBサイトのURLを含むツイートがある場合、補足情報やアイコンを表示する仕組み。申請が必要。

参考
https://dev.twitter.com/ja/cards/overview
http://web-tan.forum.impressrd.jp/e/2012/09/04/13551

###Microformats、RDFa、Microdata
サイトの情報を記載するタグ、こちらはheadタグ内ではなく、本文中の各項目に設定する。Microformats、RDFa、Microdataといくつか方式がある。
Googleショッピングの情報などと連携する。

参考
https://support.google.com/merchants/answer/6069143?hl=ja
https://support.google.com/webmasters/answer/99170?hl=ja
http://design-spice.com/2012/04/19/microformat-rdfa-microdata-schema-org-rich-snippet/

###OpenSearch

html

<link rel='search' href='/opensearch.xml'  title='検索ボックスに表示するタイトル' type='application/opensearchdescription+xml'>

opensearch.xml

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<Url type="text/html" method="get" template="http://検索ページのURL?keyword={searchTerms}"/>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">favicon画像のURL</Image>
<ShortName>検索エンジンの短い名前</ShortName>
<Description>検索エンジンの簡単な説明</Description>
</OpenSearchDescription>

FireFoxの検索バーに自分のサイトの検索ページを追加する事が出来る。
GitHubやStackOverflow、Cookpadで実装されている。
favicon画像のURLはBase64エンコードの文字でも良いらしい。

FireFoxだけでなく、Chromeでも、設定＞検索＞検索エンジンの管理で検索バーの設定を変えられるんだけど、あまり使っている人はいなそう。

参考
http://qiita.com/naoty_k/items/ed7b4d78975d61f1c674
https://developer.mozilla.org/ja/docs/Creating_OpenSearch_plugins_for_Firefox
https://support.google.com/chrome/answer/95426?hl=ja

###Windows8のピン留めサイト

html

<meta name="msapplication-TileImage" content="144ピクセル×144ピクセルの正方形のPNGのタイル画像"/>
<meta name="msapplication-TileColor" content="#d83434"/>

Windows8のスタート画面にピン留めしたサイトのアイコンと背景を設定する。
GitHubで実装されている。詳細は参考サイトで。

参考
http://blogs.msdn.com/b/ie_ja/archive/2012/06/13/high-quality-visuals-for-pinned-sites-in-windows-8.aspx
http://blogs.msdn.com/b/ie_ja/archive/2012/04/12/pinned-sites-in-windows-8.aspx

タスクをジャンプリストに追加

html

<meta content="name=Check Order Status;
      action-uri=./orderStatus.aspx?src=IE9;
      icon-uri=./favicon.ico" name="msapplication-task" />

Windows7/8のピン留めサイトを選んだときに出てくるタスクにジャンプリストを追加。
詳細は参考を参照。

参考
http://msdn.microsoft.com/ja-jp/library/gg491725%28v=vs.85%29.aspx
http://allabout.co.jp/gm/gc/390598/4/

###App Storeへのリンクバナーを表示

html

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Safariの画面上部にApp Storeへのリンクをバナー表示する。

参考
http://blog.excite.co.jp/spdev/18870453/
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

###Blackberry用

html

<meta name="HandheldFriendly" content="true" >
<meta name="viewport" content="width=device-width" >

BlackBerry Browser向けに表示

参考
http://docs.blackberry.com/fr-fr/developers/deliverables/15185/feature_browser_views_438278_11.jsp

link rel="fluid-icon"

html

   <link rel="fluid-icon" href="https://example.com/fluidicon.png" title="example">

WEBページをアプリのように使うことができるMac用のアプリ「Fluid」で使用するアイコンを設定する。Githubで設定されていた。

参考
http://webmasters.stackexchange.com/questions/23696/whats-the-fluid-icon-for
http://fluidapp.com/

はてなアンテナの制御

html

  <!--更新内容をアンテナ画面に表示しない。-->
  <meta name="hatena" content="nodiff" />
  <!--表示される更新内容の最大文字数を指定する-->
  <meta name="hatena" content="difflength" />
  <!--はてなアンテナの検索結果*9に表示されないようにする -->
  <meta name="hatena" content="noindex" />

はてなアンテナの挙動を制御。詳しくは参考サイトで。

参考
http://128bit.blog41.fc2.com/blog-entry-184.html
http://b.hatena.ne.jp/help/entry/nocomment

Googleウェブサイト翻訳ツールの設置

headタグ内

<meta name="google-translate-customization" content="ツールで生成される文字列"></meta>

プラグインを表示する位置

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ca', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

自分のサイトにウェブサイト翻訳ツールを設置して他言語対応にする。
埋め込むタグは参考サイトで自動生成する。

参考
http://wind-mill.co.jp/iwashiblog/2014/05/google-translate/
https://translate.google.com/manager/website/

ノートンセーフウェブに Web サイトを提出する

headタグ内

<meta name="norton-safeweb-site-verification" content="認証コード" />

ノートンセーフウェブに自分のサイトを評価してもらうことができる。
認証コードをHTMLファイル、またはメタタグで設置する。
DeNAショッピングに設置されていた。

Internet Explorerのダウンロード処理

　<meta name="DownloadOptions" content="noopen">

開くボタンを表示させないようにする。

ダウンロードエクスペリエンスのカスタマイズ

参考
https://support.norton.com/sp/ja/jp/home/current/solutions/kb20090410134005EN_EndUserProfile_ja_jp

サイト解析、広告ツールなど

Google Analytics

Google タグマネージャ

Yahoo!タグマネージャー

450

461

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

WEBページに設定しておくと良いHTTPヘッダとかメタタグとか

Strict-Transport-Security(HSTS)

P3Pコンパクトポリシー

Content Security Policy(CSP)

Access-Control-Allow-Origin

Serverヘッダ／X-Powered-Byヘッダ

Feature-Policy

HTMLタグ、メタタグなど

google-site-verification

description

keywords

link rel=”alternate”

link rel="canonical"

link rel="publisher"

link rel="index" or link ref="contents"

DNS Prefetching

Link Prefetching/Prerendering

notranslate

shortlink

favicon

Safariページピンアイコン

image_src

apple-touch-icon

apple-mobile-web-app-status-bar-style

apple-touch-startup-image

apple-mobile-web-app-capable

apple-mobile-web-app-title

viewport

format-detection

SKYPE_TOOLBAR

Imagetoolbar

cleartype

msthemecompatible

robots

index,follow

referrer

文書の管理情報

X-UA-Compatible

サイトリンク検索ボックス(Sitelinks Search Box)

サイトリンク検索ボックス(Sitelinks Search Box)を無効

Google 検索用 App Indexing

App Links

PICS-Label

manifest

Service Worker

theme-color

条件付きコメント

構造化データ

microdata

JSON-LD

タスクをジャンプ リストに追加

link rel="fluid-icon"

はてなアンテナの制御

Googleウェブサイト翻訳ツールの設置

ノートン セーフウェブに Web サイトを提出する

Internet Explorerのダウンロード処理

サイト解析、広告ツールなど

Google Analytics

Google タグマネージャ

Yahoo!タグマネージャー

タスクをジャンプリストに追加

ノートンセーフウェブに Web サイトを提出する