Превью для Твиттера в Джекилл

🗓️ 25/11/2020 | 🏷️ #100DaysToOffload, блог, мета, сео, джекилл, твиттер

Это Пост 28 из 100 челленджа #100DaysToOffload. Подробнее о челлендже тут.

Вастрик пишет:

Первый обязательный технический шаг — сделать так, чтобы ссылка на ваш пост смотрелась идеально в любых ситуациях. На превью в твиттере, в анонсе на канале телеграма, даже будучи сохранённой в Pocket.

Этим утром я рано встал, в 05:00, заварил кофе и пошёл курить мануалы, постигать сеошную магию.

Гик, сидящий в трусах, копается в компьютере. — Это — редакция нашего блога в 6 часов утра настраивает СЕО для данного блога.

Взял первую попавшуюся статью о том, как сделать Твиттер карточки для Джекилл. ~~Спиздил~~ позаимствовал код для их настройки. Его надо вставить внутрь тега <head>. Вот он:

<!-- Twitter cards -->
<meta name="twitter:site" content="@{{ site.twitter_username }}">
<meta name="twitter:creator" content="@{{ site.author }}">

{% if page.title %}
  <meta name="twitter:title" content="{{ page.title }}">
{% else %}
  <meta name="twitter:title" content="{{ site.title }}">
{% endif %}

{% if page.summary %}
  <meta name="twitter:description" content="{{ page.summary }}">
{% else %}
  <meta name="twitter:description" content="{{ site.description }}">
{% endif %}

{% if page.image %}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="{{ site.url }}{{ page.image }}">
{% else %}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="{{ site.url }}{{ site.title_image }}">
{% endif %}
<!-- end of Twitter cards -->

Тут всё просто: определяете в YAML Front Matter страницы переменные title, summary, и/или image, они же сгенерятся в превью. Если какой-то из переменных нет, то Джекилл возьмет дефолтные значения из конфига.

Вот например Front Matter для моего предыдущего поста. Стрелочкой отметил, что будет взято для Твиттер превью:

---
layout: post
title: 'Игл — лучшее место для ваших сохранёнок' <-----
date: 2020-11-24 03:31 +09:00
tags: ['#100DaysToOffload', 'картинки', 'дизайн', 'шрифты', 'эстетика']
summary: 'Сохраняй ресурсы для дизайна как про.' <-----
image: '/assets/images/eagle/eagle.png'          <-----
---

Стоит ещё отметить, что:

Для картинки в превью идеальные пропорции — это 2:1.
Используйте Validator Tool для проверки превью.
ВК, Телеграм и другие сервисы используют эту жу технологию, поэтому превью для них вы сразу получаете приятным бонусом.

Следующий шаг — это настройка JSON-LD Site и Open Graph. Этим я займусь потом 🤡.

Комментарии