chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

Cache-Control max-age=0 no-cache

ブラウザのキャッシュを制御するのに設定するのが、Cache-Control

Cache-Control: max-age=N

のようにしてレスポンスヘッダに設定して使います。

設定方法に、Cache-Control: max-age=0Cache-Contro: no-cacheがあるのですが、二つともキャッシュ制限してないようにみられます。

ですが、それぞれ同じようで挙動が違うので書き留めておきます。

max-age=0

validateして最新と判定できたならキャッシュを返します。最新なら304 を返します。

no-cache

no-cacheはcacheを使うことを許していません。なのでvalidateすらせず200で返すように促します。

apple-touch-iconとapple-touch-icon-precomposed

スマートフォンであるwebページをホーム画面に設定するときに表示されるアイコンがapple-touch-iconです。

<link rel="apple-touch-icon" href="hogehoge.png">

のようにhead内に設定する事ができます。

この設定でも問題ないのですが、iOSの古いバージョンの場合に勝手に光沢加工を付けたアイコンにしてしまう仕様になっています。

そこで

<link rel="apple-touch-icon-precomposed" href="hogehoge.png">

のように設定すると、光沢をなくす事ができます。

rel="noreferrer"

先日の記事でrel="noopenerについて記述しました。

今回は補足として、rel="noopener noreferrer"と設定する事がより良い事がわかりました。

noopnenerIE/Edgeやある端末ブラウザで対応していません。

Can I use... Support tables for HTML5, CSS3, etc

代替としてnoreferrerリファラーを送信しなくなるので設定しておくのが望ましいです。

https://caniuse.com/#search=noreferrer

rel="noopener"

aタグにtarget="_blank"を設定している場合は、rel="noopener"をつけておくのがよさそうです。

というのも、遷移先のページのjavascriptで元のページを操作することができてしまうそうです。

遷移先でwindow.opener.location=hogehogeとしてあると元タブのページはでhogehogeのページ飛ばすことができてしまったりします。

そのような悪質な行為を防ぐために、target="_blank"で別タブでページを開く場合はrel="noopener"をつけておく事をオススメします。

Cache-Control immutable max-age

Cache-Controlにmax-ageを指定することで、ブラウザにリソースをキャッシュさせることができます。

ブラウザはmax-ageに満たないキャッシュを持っていてもConditional GETによってキャッシュの有効性の問い合わせを行います。

Immutableは、キャッシュがmax-age内であればリロード時もキャッシュヒットさせることができます。 max-ageの期間内はfreshとみなされ、 freshであればサーバへの問い合わせなく再利用されます。 サーバへの問い合わせが無いため、事実上最速のリソース取得が可能になります。

Cache-Control: max-age=10000, immutable

のように設定されていると、キャッシュをImmutableと指定することができ、ブラウザはキャッシュが fresh であればリロード時でもヒットさせるようになります。

PageSpeed Insightsでもキャッシュの期日設定をした方が良いと言われることもあるので、前向きに設定しましょう。

PageSpeed Insights

nofollow

nofollowについて

クローラーにページ内のリンクを辿らせず、リンク先にページの評価を渡さないために指定する値です。 aタグのrel属性でも指定できる値です。

nofollowの使い方

<meta name="robots" content="nofollow">
<a href="http://sample.jp/" rel="nofollow">サンプル</a>

信頼できないリンク先のページが保証できない、あるいは保証したくない場合にnofollow属性を指定する方法。 検索結果に影響が生じたりユーザーに悪影響が及んだりしないよう、有料リンクnofollow属性を指定する方法。

nofollowSEOの効果

nofollow属性を適切に指定することでリンクの質を高めることができます。 質の低いリンク先は、クローラーにとって価値無い要素と認識される可能性があります。 nofollow指定やリンク削除でページ価値を維持することが大切になってくるでしょう。

noindexタグ

noindexとは

noindexとは、検索エンジンにページを認識(インデックス)させないために指定するmeta要素のcontent属性に指定できる値です。

noindex属性の使い方

<meta name="robots" content="noindex">

のように設定します。

- 検索結果に出したくないページがあるとき
- 複製のコンテンツを扱うのを制御するとき etc

noindexタグが記述されていてもクローリングは実行されています。 アクセスをブロックするわけではないく、検索結果に出ないようになります。

noindexのSEO効果

ページネーションを使用し、2ページ以降はnoindex属性を指定します。 ページを増えれば、同じようなリンク一覧コンテンツがどんどん増えるので、ユーザーにとって価値あるページではなくなってしまいます。 価値のないコンテンツを検索エンジンにインデックスさせないことで、サイトの価値を高める事ができます。

先日書いたページネーションの内容と併用するかどうかのこの記事に載っていました

www.suzukikenichi.com