Optimizing for Safari Reader

How this website looks in Safari Reader
How this website looks in Safari Reader

One of my goals for building this website was to make the best possible Safari Reader experience (how I personally consume blogs). This post documents my findings in how to optimize a blog for Safari Reader.

Use the <article> tag

Safari Reader will look for a couple of container tags, but for a blog post <article> makes the most semantic sense. I recommend wrapping all content that you would want to appear in the reader. For example, You’ll notice that my header image is inside of my <article> tag, which informs Safari Reader to include it.

The title should be a <h1> tag

Additionally, it should be the first text-containing tag that is under the opening <article> tag.

Write enough content

I haven’t diagnosed exactly how many words/characters are required to trigger the Safari Reader button, but I have noticed when there’s only one or two sentences on a page, it will not appear. Usually a chunky paragraph or two smaller ones is enough to trigger the button.

Properly format your byline

In order to get your name and publication date to properly appear in Safari Reader you’ll have to add a few bits of metadata to your HTML. Directly under the <h1> tag, you’ll notice I have the following.

<span itemprop="author">Patrick Brown</span>
<time datetime="2019-06-26 11:40:38 -0700">June 26, 2019</time>

The itemprop property and <time> tag will correctly format your byline. If you’re using Jekyll, you can template it like the following:

<span itemprop="author">{{ site.author }}</span>
<time datetime="{{ page.date }}">{{ page.date | date: date_format }}</time>

All together now

So you scrolled to the bottom of this in hopes to copy/paste the entire template. You’re in luck! Here’s the complete template for a Safari Reader optimized blog post for Jekyll, as used in this website (extraneous tags and classes have been stripped for clarity).

<article>
    <h1>{{ page.title }}</h1>
    {%- assign date_format = site.minima.date_format | default: "%B %-d, %Y" -%}

    <span itemprop="author">{{ site.author }}</span><time datetime="{{ page.date }}">{{ page.date | date: date_format }}</time>

    <figure>
        <img src="{{ page.header_image }}">
        <figcaption>{{ page.header_image_caption }}</figcaption>
    </figure>

    {{ content }}
</article>