SEOとか、セキュリティのために設定しておいた方が良いHTTPヘッダとか、メタタグとかをまとめてみた。
HTTPヘッダ
Vary
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:
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
header('X-Content-Type-Options:nosniff');
Internet Explorerの場合、Content-Typeの値に関わらず勝手に解釈してしまう場合があるので、JSON形式で出力したつもりでも、XSSによってスクリプトが混じっていた場合に勝手にHTMLとして解釈されてしまう。これを防ぐために必要。
設定する事による弊害は無いと思うので全ページに設定。
参考
http://d.hatena.ne.jp/hasegawayosuke/20130517/p1
X-Frame-Options
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
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)
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コンパクトポリシー
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)
//ドキュメントが置かれたホストと 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
//すべてのオリジンからのアクセスを許可する
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 がサポートしているメタ タグ
google-site-verification
<meta name="google-site-verification" content="*************" />
ウェブマスターツールで所有権を確認。Google ウェブマスターツールに登録する際に必要。
参考
http://www.adminweb.jp/wmt/setup/index3.html
description
<meta name="description" content="ページについての説明">
ページの概要を記載する。Googleの検索結果に表示されるスニペットに利用される可能性がある。ページごとで重複しないように。
keywords
<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”
<!--スマホ-->
<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"
<!--現在のページ-->
<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"
<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"
<!--リンク先が、現在の文書に対する「目次」-->
<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
<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
<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
<meta name="google" content="notranslate" />
Google翻訳が自動で起動しないようにする。
参考
http://d.hatena.ne.jp/scientre/20130402/stop_translation_on_google_chrome
shortlink
<link rel='shortlink' href=短縮URL' />
短縮URLを提供。
参考
http://www.moongift.jp/2009/05/shortlink/
http://slackline.jp/2011/01/08193515/
favicon
<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ページピンアイコン
<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
<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
<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
<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
<link rel="apple-touch-startup-image" href="/launch.png">
ネイティブアプリのようなスプラッシュ画面を表示する。iOS 9で使えないらしいので意味なし。
参考
http://qiita.com/ikkou/items/f494347c890c9039fdce
apple-mobile-web-app-capable
<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
<meta name="apple-mobile-web-app-title" content="AppTitle">
ホーム画面に保存したときののtitleをtitleタグとは別のものにする。ためしたがうまくいかなかったバージョンによる？
viewport
<meta content="width=device-width,height=device-height,initial-scale=1" name="viewport" />
表示領域を指定。スマートフォンやタブレット、レスポンシブなサイトで設定する。
参考
http://www.tagindex.com/html5/page/meta_viewport.html
format-detection
<meta content='telephone=no' name='format-detection'>
電話番号の自動リンク機能を制御する。スマートフォンやタブレット、レスポンシブなサイトで設定する。
参考
http://www.tagindex.com/html5/page/meta_format_detection.html
SKYPE_TOOLBAR
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
Skypeの拡張のせいで電話番号がSkypeアイコンに置き換わってしまうのを防ぐ。
参考
http://howtohp.com/2013/04/18/prevent-skype/
Imagetoolbar
<meta http-equiv="Imagetoolbar" content="no">
イメージツールバーを無効にすることができる。IE6用なので必要はなさそう。
参考
http://www.tagindex.com/html_tag/page/meta_imagetoolbar.html
cleartype
<meta http-equiv="cleartype" content="on">
cleartype フォントを on
参考
http://myisland.jp/template/tips/meta.html
msthemecompatible
<meta http-equiv="msthemecompatible" content="no">
視覚テーマの有効/無効
参考
http://myisland.jp/template/tips/meta.html
robots
<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
<meta name="robots" content="index,follow">
index,followは設定しなくても、検索エンジンは通常インデックスするしリンク先をたどる。
参考
http://www.suzukikenichi.com/blog/7-correct-ways-of-using-robots-meta-tag/
referrer
<!-- 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
文書の管理情報
<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
<!--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)
<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)を無効
<meta name="google" content="nositelinkssearchbox">
サイトリンク検索ボックス(Sitelinks Search Box)が表示されないように設定する。
数週間で反映されるらしい。
参考
https://developers.google.com/webmasters/richsnippets/sitelinkssearch
Google 検索用 App Indexing
<!--ページ 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
<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
<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
<link rel="manifest" href="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
<meta name="theme-color" content="#55acee"> <!-- テーマカラー -->
Chrome 39 for Androidから対応。 Chromeのタブの色を変えることが出来る。Twitterに設定されていた。
参考
http://qiita.com/uzuki_aoba/items/dfb33b6242d347a58782
条件付きコメント
<!-- 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
<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）
<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カード
<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
<link rel='search' href='/opensearch.xml' title='検索ボックスに表示するタイトル' type='application/opensearchdescription+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のピン留めサイト
<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
タスクをジャンプ リストに追加
<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へのリンクバナーを表示
<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用
<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"
<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/
はてなアンテナの制御
<!--更新内容をアンテナ画面に表示しない。-->
<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ウェブサイト翻訳ツールの設置
<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 サイトを提出する
<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