Safariの新機能に「リーダー」というのがあるのですが、
このボタンをポチッと押すと、ページのテキストだけを抽出して表示してくれるのでニュースサイトなどの記事ページを閲覧するのにとても便利です。

※文字サイズ等も自由に変更できるので、とても読みやすい。

ただこの「リーダー」、表示されるページとされないページがあるのです。
自分で制作したサイトでもしかり。

ふと気になったSafari「リーダー」の表示条件。
これを意図的に表示させることができれば、SEOにも有効なのでは。
ということで自分用の備忘録として調べてみます。


今回はiPadとiPhone版のSafariで確認をします。
（PC版Safariはまた次回にでも。）

Google先生に聞いてもあまりわからなかったのですが、文章型がHTML5でなければいけない、HTMLのバージョンなどには関係がないということだけはわかったので、その辺りは省きます。

まずは文字数が関係あるのか調べます。

●文字数450文字程度
http://nzambi.com/hiraiwk/reader/txt_free_01.html
※表示されない

●文字数1000文字程度
http://nzambi.com/hiraiwk/reader/txt_free_02.html
※表示されない

●文字数2000文字程度
http://nzambi.com/hiraiwk/reader/txt_free_03.html
※表示されない

・・・ということで文字数はあまり関係ないのかもしれません。
実際、文字数が少ない場合でも表示されることがありました。

次に、テキスト要素をdivで囲ってみました。

●テキスト要素をdivで囲う
http://nzambi.com/hiraiwk/reader/txt_box.html

おや！！？
「リーダー」が表示されました！

ですが、ほぼすべてのページのテキストはdivで囲まれているはずなので
表示されない条件がわかりません。
次にこれを調べてみます。
なんとなくboxの幅に関係あるのでは？と仮定してdivボックスの幅を指定してみました。

●divボックス900ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_900.html
※表示されました

●divボックス600ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_600.html
※表示されました

●divボックス300ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_300.html
※表示されました

●divボックス200ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_200.html

あれ！？
divボックスの幅を200ピクセルにしたとたん、表示されなくなりました。

●divボックス100ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_100.html
※表示されず

どうやらボックスの幅にも関係があるようです。
幅の境界線を調べてみます。

●divボックス250ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_250.html
※表示されず

●divボックス260ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_260.html
※表示されず

●divボックス270ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_270.html
※表示されず

●divボックス280ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_280.html
※表示されず

●divボックス290ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_290.html
※表示されず

●divボックス299ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_299.html
※表示されず


ということでiPad版Safariの場合、divボックスの幅が300ピクセル以上あれば「リーダー」にテキストとして認識されるようです。

ちなみにiPhoneでは280ピクセル以上で表示されました。
それぞれ表示条件が違うようですね。

■iPhoneで確認した場合

●divボックス280ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_280.html
※表示されました

●divボックス279ピクセル
http://nzambi.com/hiraiwk/reader/txt_box_279.html
※表示されませんでした

ふぅ～。
なんともアナログチックな調べ方となりましたが、
当たってるかどうかは別として自分で納得できる答えにたどり着きました。
（PC版Safariでも条件は違うような気がします。誰か調べてください。）