How to Optimize for Safari Reader

Getting your blog post to play nicely with Safari Reader—my preferred way of consuming blogs—isn’t always obvious. This post documents my findings in how to optimize a blog for Safari Reader if you’re publishing outside of Medium (e.g. Jekyll).

Use the <article> tag

The title should be a <h1> tag

Write enough content

Properly format your byline

<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">{% raw %}{{ site.author }}{% endraw %}</span>
<time datetime="{% raw %}{{ page.date }}{% endraw %}">{% raw %}{{ page.date | date: date_format }}{% endraw %}</time>

All together now

<article>
<h1>{% raw %}{{ page.title }}{% endraw %}</h1>
{% raw %}{%- assign date_format = site.minima.date_format | default: "%B %-d, %Y" -%}{% endraw %}
<span itemprop="author">{% raw %}{{ site.author }}{% endraw %}</span> •
<time datetime="{% raw %}{{ page.date }}{% endraw %}">{% raw %}{{ page.date | date: date_format }}{% endraw %}</time>
<figure>
<img src="{% raw %}{{ page.header_image }}{% endraw %}">
<figcaption>{% raw %}{{ page.header_image_caption }}{% endraw %}</figcaption>
</figure>
{% raw %}{{ content }}{% endraw %}
</article>

Patrick is a software engineer from New England. Today, he resides in Seattle where he enjoys playing chess and ice hockey.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store