Почему это должно вас волновать
Большинство людей нашли полезный (но нишевый) сайт в социальных сетях. Где вы узнали, что существуют сайты, которые могут генерировать CSS-градиенты, если не в Twitter? Помимо блогов и поиска в Google, социальные сети — это большие маркетинговые возможности для многих людей, особенно с ростом влияния кодов.
Ваш сайт может иметь описательные метатеги, чтобы боты Google пускали по вам слюни 🥴. Вы можете вести блог (который может волновать или не волновать людей), рассказывая о превосходстве вашего сайта. Но как только один из ваших последователей опубликует ваш сайт в Twitter, это уже совсем другая игра.
Краткое описание вашего сайта, сопровождаемое интригующей миниатюрой, поможет вам получить эти клики.
Конечно, вы можете написать его сами, но разве не проще, если оно будет взято с вашего сайта автоматически? Это также поможет вашему сайту выглядеть профессиональным, а не просто сделанным в выходные (а вы 🧐?).
Персонализация с помощью тегов Open Graph
Теги Open Graph являются частью протокола Open Graph компании Meta (ранее Facebook). Это фрагмент мета-тегов HTML, изначально использовавшихся Facebook для улучшения представления веб-сайта.
Чтобы распознать эти теги, перед названием свойства у них есть og::
Теги Open Graph используются и на других сайтах, включая LinkedIn и Twitter. Даже некоторые приложения для обмена сообщениями (WhatsApp, iMessage и т.д.) поддерживают эти теги для создания фрагмента вашего сайта.
Meta (мы можем называть ее просто Facebook?) предоставляет 17 различных имен тегов для использования.
Еще одна конвенция, которую нужно изучить.
Ну, для начала работы вам понадобится всего 3-4 таких тега, так что не волнуйтесь.
Указание заголовка сниппета
Заголовок должен создавать хорошее первое впечатление о вашем сайте. Вот как вы можете это сделать:
<meta property="og:title" content="10 Best Bananas to Eat today" />
Это необработанный заголовок, НЕ помещайте сюда название вашего сайта или брендинг. Заголовок должен служить точным представлением того, что вы показываете на сайте.
Убедитесь, что он короткий, чтобы избежать отсечения. Хорошим ориентиром является 40 символов на экране мобильного телефона и 60 на экране настольного компьютера.
*плачет отзывчивый макет*
Да, я чувствую вас…
Указание сочного миниатюры
Изображения, очевидно, являются притягательной силой номер один в любой социальной сети. Просто вставьте их вот так:
<meta property="og:image" content="yourmom.jpg" />
Минимальный рекомендуемый размер — 1200×630. Более крупные изображения должны иметь соотношение сторон 1,91:1.
Определение типа контента
Алгоритмам социальных сетей гораздо проще понять, о чем ваш контент, если вы скажете им, что это такое (ну да 🙄).
Вот как:
<meta property="og:type" content="article" />
Существует довольно много типов, которые можно указать, посмотрите здесь.
Опишите свой сайт
Этот пункт довольно прост, я думаю. Facebook (lol) рекомендует 2-4 предложения, но это определенно будет усечено. Вместо этого сделайте его коротким и милым.
<meta property="og:description" content="Learn how to fight me" />
Заключительные слова
ВСЕ эти вещи не нужны для вашего сайта, но они помогают при маркетинге. Методы увеличения трафика на сайт органическим путем (читай: никаких фальшивых аккаунтов) относятся к теме под названием SEO (Search Engine Optimizations). Вот видео от Fireship, которое поможет вам начать.
И, как всегда, счастливого кодинга 🙌