Автоматические и насыщенные контентом социальные карты для Twitter, Facebook и LinkedIn с Gatsby и Jimp
Когда вы публикуете сообщение, например, в Twitter, то, чем вы делитесь, может выглядеть так:
Или вот так:
Разница в том, что на одном из них отображается красивое изображение с заголовком и описанием, и оно наверняка привлечет внимание ваших подписчиков лучше, чем другое. Эти карты широко известны как карты обмена в социальных сетях, и почти все основные сайты социальных сетей поддерживают их.
В этом руководстве мы рассмотрим как автоматически создавать эти изображения для публикации в социальных сетях в нашем блоге Gatsby вместо того, чтобы создавать каждое изображение вручную. Для этого мы собираемся создать собственный плагин gatsby, который использует библиотеку обработки изображений Node Jimp. В наших карточках для обмена в социальных сетях будет хорошая функция отображения заголовка, тега публикации и времени, необходимого для ее прочтения. Учебное пособие состоит из трех частей:
- Изменение шаблона сообщения в блоге и компонента SEO для поддержки тегов
- Создание шаблона изображения для публикации в социальных сетях
- Создание плагина gatsby-social-cards
Вы получите максимум пользы от этого учебника, если у вас есть предыдущий опыт работы с Гэтсби. Вы можете узнать больше о настройке вашего сайта Gatsby здесь. Вы можете найти полный исходный код этого проекта здесь. Сайт также размещен на Netlify, и его можно найти здесь.
Настройка React Helmet для поддержки OG-тегов и Twitter-тегов
Давайте начнем с изменения нашего блога gatsby для поддержки тегов og и twitter на страницах наших блогов. Скорее всего, вы собираетесь сделать это в своем собственном блоге, но для этого урока я собираюсь создать новый проект Гэтсби с нуля, используя шаблон для запуска блога со следующей командой:
$ gatsby new social-cards https://github.com/gatsbyjs/gatsby-starter-blog
У нас должна быть хорошая отправная точка для создания функции автоматических социальных карт для нашего блога.
Далее нам нужно изменить компонент SEO и шаблон blog-post, вы можете найти полный код этих компонентов здесь и здесь. В blog-posttemplate и наших компонентах страницы, которые используют компонент SEO, нам нужно передать опору местоположения компоненту SEO. В компоненте SEO мы используем это местоположение, чтобы построить путь к нашим будущим картам обмена в соцсетях:
Нам также нужно добавить правильные теги. Для Twitter это теги twitter:summary_large_image и twitter:image. Для Facebook и LinkedIn нам нужно добавить тег og:image. Внесите следующие изменения в свой компонент SEO (полный пример здесь):
Теперь наши сообщения в блоге готовы к поддержке карточек социального обмена, мы создадим шаблон.
Создание шаблона изображения для публикации в социальных сетях
Мы хотим, чтобы наши карточки для обмена в соцсетях следовали той же теме, чтобы единственное, что изменилось, - это текст на карточке. Для своего блога я разработал следующий стиль:
Как видите, синяя волна, а также имя домена и значки для тегов и времени чтения уже присутствуют в шаблоне. Это потому, что мы хотим Jimp просто взять этот шаблон и распечатать части текста в нужных местах. Чтобы создать свою собственную карточку, вам просто нужно создать изображение размером 1200 пикселей и высотой 600 пикселей. Если вы хотите сделать что-то похожее на то, что я делаю со значками, измерьте смещение от сторон изображения, это поможет вам позже при выравнивании текста.
Добавление тегов к сообщению в блоге
По умолчанию в используемом нами начальном шаблоне Гэтсби нет тегов в сообщениях блога. Так что давайте добавим их во все сообщения. Вы можете сделать это, добавив теги в начале файла разметки следующим образом:
--- title: "New Beginnings" date: "2015-05-28T22:40:32.169Z" tags: ["Example", "Placeholder"] description: "This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter." --- ... rest of the blog post
Создание плагина gatsby-social-cards
Пришло время создать плагин. Мы собираемся создать локальный плагин, который генерирует социальные карты. Начните с создания новой папки plugins в корне проекта, которая будет содержать фактическую папку плагина gatsby-plugin-social-sharing-cards:
Причина, по которой наш плагин имеет package.json, заключается в том, что у нашего плагина будет одна зависимость: Jimp. Вы можете узнать больше о Jimp здесь, но, проще говоря, Jimp - это библиотека обработки изображений, построенная на JavaScript, и вы можете многое с ней сделать. Чтобы использовать Jimp в нашем плагине, перейдите в папку плагина и запустите:
$ yarn add jimp
После этого создайте папку шрифтов и шаблонов и добавьте созданный шаблон в папку шаблонов.
Для рендеринга текста нам понадобятся шрифты, которые нужно добавить в папку шрифтов. В Jimp есть некоторые шрифты по умолчанию, но вы, скорее всего, захотите использовать свои собственные. Однако мы не можем просто указать Jimp использовать веб-шрифты для визуализации текста. Вместо этого нам нужно использовать растровые шрифты. Вы можете преобразовать существующие системные шрифты веб-шрифтов в растровые шрифты одним из следующих способов:
- Hiero
Инструмент на основе Java - TrueType to Bitmap
Веб-инструмент, шрифты в этом проекте были преобразованы с помощью этого
Вы также можете использовать уже преобразованные мной шрифты из семьи Монсеррат. Преобразованный шрифт состоит как минимум из двух файлов, один из которых представляет собой файл карты png с каждым из символов, а другой - файл fnt. Вам нужно, чтобы Jimp работал. Обратите внимание, что цвета шрифтов уже установлены в файлах.
Сборка плагина
Затем давайте напишем код для создания изображений. Нам понадобится только один файл: index.js. Вот что будет содержать index.js:
Здесь происходит следующее: как только Гэтсби запускает этот плагин, мы извлекаем информацию о уценке из markdownNode и используем ее для установки тайла, тегов и времени чтения. После этого загружаем пользовательские шрифты. Затем наш плагин загружает ваш шаблон и распечатывает желаемую информацию, используя нужные нам шрифты, и, наконец, записывает файл в общую папку, где хранятся все результаты выполнения команды gatsby build.
Тексты выравниваются с помощью API Jimp, который использует точки, что позволяет легко перемещать тексты по своему вкусу, а также изменять способ выравнивания текста при печати. Вы также можете заметить, что я убираю некоторые символы из заголовка, это потому, что использование, например, смайлов может привести к отображению некрасивого пустого пространства вместо смайликов, потому что наш файл шрифта не поддерживает смайлики.
Последнее прикосновение
Мы почти на финише. Прежде чем наш плагин начнет генерировать изображения, нам нужно сказать Гэтсби, чтобы он его использовал. Поскольку мы создаем только карточки обмена в соцсетях для наших сообщений в блогах, которые используют уценку, мы собираемся разместить плагин внутри gatsby-transformer-remark параметров плагинов в gatsby-config.js:
Теперь, если мы запустим gatsby build или gatsby develop, мы должны найти социальные карты в общей папке внутри папок страниц.
Заключение
Вот и все, теперь мы автоматически сгенерировали карточки для публикации в соцсетях для всех социальных сетей. Мы можем обновить нашу запись в блоге, изменить теги и заголовок, а настраиваемый плагин автоматически сгенерирует карточки обновлений.
Исправление проблем
«Я сделал все в этом руководстве, но Twitter / Facebook / LinkedIn по-прежнему показывает старую карточку социального обмена»
Это происходит потому, что большинство сайтов кэшируют контент, который они получают с сайта. Чтобы заставить их обновиться, а также посмотреть, как будут выглядеть карты, вы можете использовать следующие инструменты:
Простая вставка ссылки не обновит кеш, вместо этого вам придется немного изменить URL-адрес, например, используя строку запроса, например:
social-cards.lahteenlahti.com?refresh=true
«Гэтсби не может создать сайт / карточки не создаются / заголовок, тег, время чтения не записывается на карточку»
Я заметил, что следующие вещи обычно помогают, если у вас возникают проблемы с получением скрипта для создания карточек:
- Убедитесь, что у вас есть все поля, например теги, заголовок в вашей уценке.
- Поместите кавычки вокруг заголовка в уценке
- Убедитесь, что порядок значений в уценке согласован между сообщениями, т.е. сначала идет заголовок, затем теги и т. Д.
- Запустите gatsby, очистите и восстановите
