How to Enable Safari Reader Mode in Astro Blogs


If you use the default Astro Blog template, Safari will not show the reader view option. Here’s how to fix it:

You need to wrap your blog article content inside a <section itemprop="articleBody"> tag for Safari to properly detect it.

Inside your blog post template, wrap the slot with:

<section itemprop="articleBody">
  <slot />
</section>

You should now see the icon to enable the reader mode in Safari: Safari Reader Mode icon

This solution is not failproof, as Safari still has internal rules to decide whether to show an article in reader mode. I’ve noticed that short articles don’t get the feature for instance.

See this post from ctrl.blog for more details.


Thumbnail adapted from a photo by Mariia Shalabaieva on Unsplash