Edited at

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

More than 1 year has passed since last update.

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などの値がある。詳しくは参考ページを参照。


  1. 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以上、IE11に対応。

ドメイン単位の設定なので、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/


その他

アプリケーションによって、独自ヘッダーが付いている場合もある。'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


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="キーワード1,キーワード2,キーワード3">


ページに関連するキーワードを記載。

現在では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


js

<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

https://www.google.com/intl/ja_JP/analytics/index.html


Google タグマネージャ

https://www.google.com/intl/ja/tagmanager/


Yahoo!タグマネージャー

http://tagmanager.yahoo.co.jp/