WordPressでSafariのリーダーモードを無効にするには?ブログ運営者向け

iPhone・iPad及びMacのSafariには「リーダーモード」という専用の閲覧モードが存在し、閲覧中のWebサイトでリーダーモード表示が可能であれば、任意で広告などを廃した簡略化した状態でサイトを閲覧できる。

リーダーモードが有効可能な場合、アドレスバー左に専用のボタンが表示される

ただ、Webサイトがリーダーモード表示が可能かどうかは完全にSafariが自動で決定している他、リーダーモードができるサイトとできないサイトの違いも明確にわかっていない。

サイトやブログによっては意図せずリーダーモードが選択可能な場合があり、仮にリーダーモードで閲覧してもむしろ視認性が落ちることがある。

ここではWordPressなどのブログやサイトで「リーダーモード表示の選択肢(ボタン)を表示させないようにする(リーダーモードを拒否する)」方法をまとめる。

このブログの状況

たとえばこのブログでは数日前にトップページを固定ページに設定したのだが、それ以降Safariのリーダーモードが選択可能な状態になってしまっており、加えてリーダーモードを有効にするとテキストが何も表示されずリーダーモードの意味が全くない状態に陥った。

上記画像の通り、リーダーモードを有効にしてもタイトルとタイムスタンプ以外のテキストは何も表示されない。

これではリーダーモードの意味がないため、リーダーモードの選択肢(ボタン)を表示させないようにしたいのだ。

リーダーモードの選択肢が出るトリガー

国内のブログやサイトではリーダーモードの仕様やトリガーに関する記事はほとんどなかったため、海外のサイトを周ってみたのだがリーダーモードの選択肢が出る条件として以下のようなものが挙げられていた。

  • <div><article>などの要素が最低一つある
  • <ul>や<li>などのタグがメインコンテンツに一定数以上存在しない
  • <time>タグが一定数以上存在しない
  • <a>タグが一定数以上連続していない

他にも多くのトリガーが存在するようだが、概ね上記4つの要素がリーダーモードのトリガーのようだ。

つまりリーダーモードの選択肢の表示を止めるには上記のトリガーと逆のことをやればいい。

なお<h>タグについてはリーダーモードのトリガーではない。

最終的に上手く行った方法

このブログで最終的にリーダーモードの選択肢を止めるのに上手く行った方法は「新着記事数を増やす」あるいは「<time>タグを増やす」というものだった。

リーダーモードは<ul>や<li>、<a>タグ、<time>タグが一定数以上あった場合「このページは記事一覧ページであり、リーダーモードの必要性がない」と判断されるため、単純にそれらのタグを増やしてしまえばリーダーモードを止めることができる。

このブログのトップページでは新着記事をショートコートで4つ出力していたが、これを6つに変更したところリーダーモードの選択肢が出なくなった他、4つ出力している状態でも「おすすめ記事」などに<time>タグを記述すればリーダーモードが無効になった。

新着記事数4つ。リーダーモードボタンが表示されしまう
新着記事数6つ。リーダーモードボタンが表示されなくなる

以上のことから少なくともこのブログ(テーマSANGO)の構造では<a>タグが6つ以上連続した場合、あるいは<time>タグが一定数以上ある場合はSafariは「このページは記事一覧ページであり、リーダーモードに適さない」と判断するようだ。

ただし、実験してみたところ、これらのタグの間に<div>や<article>などの要素を一定数挟むと連続した状態ではなくなるため(もしくは<div><article>要素により記事ページと判定されるため)リーダーモードボタンが表示されてしまう他、<time>タグの記述は新着記事によっては何故かリーダーモードボタンが表示されてしまう場合がある。

また、空の<a>タグや<ul><li>タグなどを設定してもリーダーモードボタンが相変わらず表示されしまったため、実際にタグの中にテキストやリンクが入っていないとリーダーモードが選択可能になってしまうようだ。

更にCSSで「display :none」を表示しても無視されてしまう。

なおリーダーモード登場当初のiOS及びmacOSのSafariでは以下のコードでコンテンツ全体を囲むとリーダーモードを無効にできたが、この方法は少なくともここ5〜6年以内のSafariでは通用しない。

<ol style = "padding:0;margin:0"> 
   my content
</ol>

ただ、上記のコードが有効だったということは、やはりSafariは主にサイト内の<ul><ol>などのリスト要素を基にリーダーモードの可否を判断していると言える。

まとめ

自分のWebサイトやブログでリーダーモードの選択肢を表示させないようにするには下記の点を意識してみよう。

  • 出来るだけ<div>や<article>などのタグを連続させない
  • <ul><li>や<a>タグを連続して記述する(きちんとテキストやリンクが設定されている必要がある)
  • <time>タグを一定数以上記述する
  • <time>タグを記述しても表示されるようなら新着記事数を増やす

大事なのはSafariに「このページは記事一覧ページであり、リーダーモードには適さない」と伝えることと言える。