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" />
と設定するのが正しいようです。
cpコマンドでハマった事
cpコマンドを使ってファイルやフォルダをコピーしようとした時にハマった事です。
cp hoge/assets build
のようにやると、もともとbuildフォルダが存在しないのでエラーになってしまいます。
buildフォルダが作成されbuildフォルダの中にhogeの中のassetsフォルダが作成されてくれればすごい良いのですが。
いったんmkdirコマンドでbuildフォルダを生成することで問題を解決しましたが、他に良い方法があったら知りたいです。
ステータスコード1xx系3xx系
Webを支える技術 ── HTTP，URI，HTML，そしてREST（WEB+DB PRESS plusシリーズ）｜gihyo.jp … 技術評論社
先日購入した本から１つ。
よく見るステータスコードは
- 2xx系のリクエストの成功
- 4xx系のクライアントエラー
- 5xx系のサーバエラー
他に1xx系の処理中と3xx系のリダイレクトの種類があったのでこの２つのついて書きたいと思います。
1xx系
処理が継続していることを示していて、クライアントはリクエストを継続するか、サーバ指示でプロトコルをアップデートして再送信をします。 もうちょっと詳しくやってほしいことや、頼まれたけど時間がかかってしまうというような内容のレスポンスを返します。
3xx系
ほかのリソースへのリダイレクトを示していて、クライアントはステータスコードを受け取ると、レスポンスメッセージのlocationヘッダを見て新しいリソースへ接続をする。 厳密に言うと、リクエストを達成するためにはブラウザ側で追加の処理を実行する必要があるということのようです。
