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でもキャッシュの期日設定をした方が良いと言われることもあるので、前向きに設定しましょう。
nofollow
nofollowについて
クローラーにページ内のリンクを辿らせず、リンク先にページの評価を渡さないために指定する値です。 aタグのrel属性でも指定できる値です。
nofollowの使い方
<meta name="robots" content="nofollow"> <a href="http://sample.jp/" rel="nofollow">サンプル</a>
信頼できないリンク先のページが保証できない、あるいは保証したくない場合にnofollow属性を指定する方法。
検索結果に影響が生じたりユーザーに悪影響が及んだりしないよう、有料リンクにnofollow属性を指定する方法。
nofollowのSEOの効果
nofollow属性を適切に指定することでリンクの質を高めることができます。 質の低いリンク先は、クローラーにとって価値無い要素と認識される可能性があります。 nofollow指定やリンク削除でページ価値を維持することが大切になってくるでしょう。
noindexタグ
noindexとは
noindexとは、検索エンジンにページを認識（インデックス）させないために指定するmeta要素のcontent属性に指定できる値です。
noindex属性の使い方
<meta name="robots" content="noindex">
のように設定します。
- 検索結果に出したくないページがあるとき - 複製のコンテンツを扱うのを制御するとき etc
noindexタグが記述されていてもクローリングは実行されています。 アクセスをブロックするわけではないく、検索結果に出ないようになります。
noindexのSEO効果
ページネーションを使用し、2ページ以降はnoindex属性を指定します。 ページを増えれば、同じようなリンク一覧コンテンツがどんどん増えるので、ユーザーにとって価値あるページではなくなってしまいます。 価値のないコンテンツを検索エンジンにインデックスさせないことで、サイトの価値を高める事ができます。
先日書いたページネーションの内容と併用するかどうかのこの記事に載っていました
history.replaceState
history.replaceStateメソッドは現在の履歴エントリを修正します。
history.replaceState(state, title, url) 第一引数にはstate。 第二引数にはtitle。 第三引数にはurl。
これらを引数に渡して実行することにより、現在の履歴を変更します。
SPAを実装したことのある人にとって、ブラウザバックの挙動は１つの大きな課題だと思います。
このメソッドを使えばstateに好きなデータを持たせることも可能ですし、urlを書き換えることも可能です。
使い方によってすごい便利なメソッドなのではないでしょうか。
safariでbuttonタグにdisplay:flexが効かない問題
buttonタグを使って表現する時に困った事です。
このようなボタンを表現する時に
<button>さらに記事を見る</button>
のように作るとしてcssで
button {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-contente: center;
}
のようにテキストを上下中央にするようにした時に、思ったように言ってくれない場合があります。
Windows 10 – Chrome : ○ Windows 10 – Firefox : ○ Windows 10 – Edge : ○ Windows 10 – IE : ○ macOS 10 – Chrome : ○ macOS 10 – Safari : × Android 7 – Chrome : ○ iOS 10 – Chrome : × iOS 10 – Safari : ×
xのついているのがうまくいかないブラウザです。
対応策としては
<button> <div>さらに記事を見る</div> </button>
のようににして、buttonの子要素のdivにdisplay:flexを設定してあげるようにする方法があります。
ページネーションによるcanonicalタグの対応
ページネーションは一連の長い記事を複数のページに分けたり、いくつかのまとまりに分けたりするときによく使われます。
例えば
1ページ目はhttps://hogehoge?page=1
2ページ目はhttps://hogehoge?page=2
のようなURL設定する場合があるとします。
このようにページネーションを利用していた場合、rel=”canonical”タグを使って2ページ目より後のページを1ページ目に正規化することをGoogleは推奨していません。
解決策として
link rel="next" link rel="prev"
を使います。
例えば
1ページ目の場合 <link rel="next" href="https://hogehoge?page=2" />
2ページ目の場合 <link rel="prev" href="https://hogehoge?page=1" /> <link rel="next" href="https://hogehoge?page=3" />
3ページ目が最後の場合 <link rel="prev" href="https://hogehogepage=2" />
と設定するのが正しいようです。
