whatsapp
Создание сайтов на 1С-Битрикс

Разработка HTML для режима чтения Safari

Простые правила работы HTML-страницы с режимом Safari Reader

Разработка HTML для режима чтения Safari Простые правила работы HTML-страницы с режимом Safari Reader

Apple не дает никаких рекомендаций по проектированию Safari Reader Mode. Может быть, они хотят иметь право изменить его в любое время или, может быть, это для предотвращения злоупотреблений и рекламы. Точно так же практически невозможно найти какие-либо сторонние рекомендации о том, как структурировать ваш HTML. В основном это угадывание, проверка режима чтения, редактирование HTML, перезагрузка до тех пор, пока он не заработает. Но посмотрев исходный код Reader javascript и множество View Source на многочисленных публикациях, я придумал некоторые правила, как структурировать HTML для оптимизации для Reader. Есть, без сомнения, много альтернативных правил и макетов, но это, похоже, работает.

Структурирование основного содержимого

Основное содержимое (включая заголовок и другое содержимое) должно быть в одном теге <main>. Другие тэги, такие как <article>, также работают. Статья должна быть текстовой. Если существует слишком много ссылок, списков или других нетекстовых элементов, Reader может не запуститься. И наоборот, если HTML-узел непосредственно перед статьей имеет большой объем текста, он может просочиться в основную статью.

Структура заголовка

Заголовок статьи должен быть <h1> сразу после тега <main>.

Структурировать подзаголовок

Поместите подзаголовок или краткое описание как <div> под тэгом <h1>.

Похоже, подзаголовок имеет максимальную длину менее 200 символов. Если он превышает это значение, то рассматривается как абзац. 150 символов кажутся безопасными, но неясно каков порог извлечения.

Добавление даты публикации в подпись

Под подзаголовком добавьте тег <div>, который содержит тэг <time> с атрибутом datetime для даты публикации, и Reader создаст подпись с автором и датой. Неясно, откуда берется авторская часть. Возможно, из метаданных Google, Open Graph или Twitter Card.

В PHP битрикса это можно сделать с помощью:

<?
$stmp = MakeTimeStamp($arResult['ACTIVE_FROM'], "DD.MM.YYYY HH:MI:SS");
$stmpActiveFrom = date("c", $stmp); // 2020-02-19MSK11:32:00
?>
<time itemprop="datePublished" datetime="<?=$stmpActiveFrom?>" class="active-date">
    <?=$arResult['DISPLAY_ACTIVE_FROM'];?>
</time>

Работа с подписью

Вы также можете сделать подпись. Если в <div> выше также используется класс byline, Reader использует весь класс <div> в качестве подписи. На заметку: текст должен быть коротким или Reader отклонит его. Класс byline не нужно определять или предоставлять стиль, он просто должен присутствовать. Также можно использовать другие классы CSS, но необходимо включить byline.

Опять же, в PHP:
<?
$stmp = MakeTimeStamp($arResult['ACTIVE_FROM'], "DD.MM.YYYY HH:MI:SS");
$stmpActiveFrom = date("c", $stmp); // 2020-02-19MSK11:32:00
?>
<div class="byline another-class etc">
Автор: <a href="/">Имя автора</a> -
<time itemprop="datePublished" datetime="<?=$stmpActiveFrom?>" class="active-date">
    <?=$arResult['DISPLAY_ACTIVE_FROM'];?>
</time>
</div>

Все вместе

В конце концов, основной HTML для содержимого должен выглядеть следующим образом:

<main>
<h1>Заголовок<h1>
<div>Подзаголовок</div>
<?
$stmp = MakeTimeStamp($arResult['ACTIVE_FROM'], "DD.MM.YYYY HH:MI:SS");
$stmpActiveFrom = date("c", $stmp); // 2020-02-19MSK11:32:00
?>
<div class="byline another-class etc">
Автор: <a href="/">Имя автора</a> -
<time itemprop="datePublished" datetime="<?=$stmpActiveFrom?>" class="active-date">
    <?=$arResult['DISPLAY_ACTIVE_FROM'];?>
</time>
</div>
<p> Содержимое статьи... </p>
</main>

Есть и другие варианты, которые могут работать, но это хорошая основа для начала. Не исследовано, как изображения работают с Reader.

Обновление 2018-04-12: Изменен тэг обертки с <article> на <main>. Использование <main> является более доступным.

Перевод статьи Ника Галбрита.
Источник: https://www.client9.com/designing-html-for-safari-reader-mode/
Логотип SiteBERG
Изменено: 09.06.2021 23:46