Table of Contents
1 Сайты должны сотрудничать
Владельцы сайтов всегда борются за аудиторию. Чем больше посетителей, тем выше прибыль от рекламы и сильнее влияние на социум. Из-за конкуренции многие забывают, что сайты никогда не были обособленными. Перетекание аудитории с одного ресурса на другой — процесс естественный. Информация в интернете всегда была связанной.
В начале девяностых, в первые годы рождения Всемирной сети (англ. World Wide Web), первые сайты уже использовали гиперссылки. Простая и понятная идея — дать возможность людям находить информацию через цепочку связанных ссылками страниц — хорошо работает и поныне, воплощаясь в замечательных продуктах, привносящих в жизнь что-то новое: от Википедии до Гитхаба, от Вконтакте до Снэпчата.
С увеличением количества сайтов до тысяч и миллионов появились новые способы добраться до нужных сведений:
- сайты-каталоги с тематическими списками сайтов;
- поисковые системы, создающие списки ссылок, руководствуясь запросами пользователей сети;
- рекомендательные системы, делающие подборки контента, отвечающие интересам людей.
Всё это так или иначе построено на ссылках. Хотя, конечно, кое-что поменялось со временем. Например, каталоги давно выбросили из-за бесполезности при работе с миллионами сайтов. Находить сведения через поисковые системы проще и быстрей, не так ли? Не нужно просеивать терабайты информации, достаточно ввести запрос и получить список ссылок на искомые страницы.
Кажется, что лучше Гугла и его товарищей быть не может, но прогресс неумолимо движется вперёд: в затылок поисковикам дышат рекомендательные системы. Их сила в том, что они способны работать на опережение, показывая потребителю интересный контент, который он не запрашивал и, наверное, не запросит никогда, но если увидит — обязательно ознакомится.
Именно РС формируют списки статей в Яндекс.Дзене, ленты новостей в Фейсбуке* (прим: Facebook — проект Meta Platforms Inc., деятельность которой в России запрещена) и Вконтакте, списки товаров в интернет-магазинах и много чего ещё. Поисковые системы также взяли на вооружение персонализацию, подстраивая поисковую выдачу под интересы аудитории.
Персонализация — не панацея, иногда возможности рекомендации контента отодвигают на второй план. Например, в сентябре 2018 года в Твитере вернули хронологическую сортировку сообщений. Но в целом у людей появилась возможность получать информацию, не прибегая к поисковику. Достаточно открыть Дзен или глянуть список новостей в любимой соцсети, чтобы наткнуться на интересное чтиво или забавное видео. Хорошо это или плохо — отдельный вопрос. Если вам есть что сказать, добро пожаловать в комментарии.
2 Как продвигать сайт
Существуют два взаимодополняющих способа подружиться с рекомендательными и поисковыми системами, чтобы ваш контент дошёл до аудитории.
Первый — поисковая оптимизация (SEO). Владельцам сайтов нужно правильно оформить контент, сделать его структурированным, чтобы поисковые боты и прочие искусственно-интеллектуальные штуки видели корректное название страницы и получали хоть какое-то понимание о том, что именно за информация там находится. И, конечно, не забыть про удобства для людей: сделать сайт быстро загружающимся, в статьях проставить заголовки, подзаголовки, не забыть об описаниях изображений. Подробнее об оптимизации можете узнать в статье «101 способ сделать ваш сайт лучше». Там нет ничего запредельно сложного.
Второй способ — оптимизация поведенческих факторов — нужен, чтобы люди чаще кликали по ссылкам в социальных сетях. В правильности термина не уверен, потому что в интернете об этом мало пишут. Про поведенческие факторы на отдельно взятых сайтах написана уйма статей и книг, а вот про взаимодействие сайтов и соцсетей советов маловато.
Публикации в соцсетях, ссылающиеся на ресурс, можно и нужно делать более привлекательными для читателей. Это должно увеличить количество переходов по ссылкам на ваш сайт.
Допустим, вы вылизали свой проект настолько, что поисковые системы стали безмерно ценить всё написанное на нём, отображая в поисковой выдаче на первых местах. Вот только если кто-то даст ссылку на сайт в, например, Фейсбуке, по ней перейдет не так много людей. Знаете почему? Потому что, скорее всего, ваш пост в ленте будет выглядеть как-то так:
Скриншот выше — реальный пример из фейсбучной группы очень популярного сайта, посвящённого правильной «готовке» контента. Вроде бы выглядит нормально, но сравните с тем, что предлагаю я.
Пост стал заметнее, не правда ли? Зевающий мужчина подходит по смыслу, но фотография занимает чересчур много места — около четверти ленты на экране популярного разрешения 1920×1080 пикселей.
Чтобы рационально использовать доступное место, можно поставить заголовок прямо поверх тематической фотографии.
С технической точки зрения это невероятно легко. Удивительно, но для WordPress до сих пор не существовало простого средства это сделать. Все рисовали надписи в фоторедакторе, я в том числе. Теперь же появилось простое решение.
3 Еще одно отступление
Мой сайт работает с помощью WordPress. Что это такое, я доступно объяснил в статье «Что такое WordPress и почему он важен». Это самая популярная система в мире, на ней работает 32,4% всех сайтов. Остальные даже близко не подобрались к такому успеху (доля Joomla — 3%, Drupal — 2%, у остальных ещё меньше, — источник).
Новые функции в WordPress легко добавляются плагинами. На каждое хотение сделано несколько бесплатных и не очень решений.
Вот только почему-то среди 55 914 плагинов не нашлось ни одного, который бы создавал картинки с текстом и помещал ссылки на них в Open Graph теги! Поэтому я решил создать 55 915-й, выполняющий эту работу.
4 Плагин Open Graph Images With Caption
Несмотря на то, что обычно в блоге пишу о том, как кто-то создал очередную полезную программу, я вообще-то тоже программист. Часто мои работы не видны глазу — я дорабатываю внутреннюю логику сайтов и создаю серверные решения под специфичные задачи. Созданный мной плагин для системы управления сайтами WordPress — первая публичная программистская работа за последние несколько лет.
Open Graph Images With Caption помогает создать фотографию с надписью прямо в редакторе статей.
Фотография берётся из настройки «Изображение записи», исходник не меняется. То есть блоги работают как обычно, выводя в нужных местах так называемые «featured» изображения без всяких надписей, нарушения дизайна не происходит. Весь результат виден только в социальных сетях и на сайтах типа Pinterest.
Чтобы социальные сети поняли, как отображать ссылки в лентах, моё решение встраивает в страницы сайта Open Graph теги. Результат аккуратен:
Плагин проверен командой WordPress и доступен в официальном каталоге, поэтому можно поставить его из админки сайта, введя в строке поиска установщика плагинов «Open Graph Images With Caption».
Для любителей ковыряться с распаковкой архивов — можете скачать и установить вручную со страницы плагина: https://wordpress.org/plugins/open-graph-images-with-caption/
После инсталляции генератор картинок появится прямо в редакторе текстов сайта. Указывайте стандартными средствами WordPress изображение записи, сохраните пост (иначе плагин не увидит, где лежит исходник для фона) и нажмите кнопку «Create images». Сгенерируются две версии картинки, отличающиеся разрешением: 1024×512 пикселей для Твитера и 1200×630 для Фейсбука, Вконтакте, Pinterest и других сайтов, поддерживающих Open Graph теги. Фон размывается, фокус концентрируется на тексте.
По умолчанию текст надписи берётся из заголовка страницы, но ничто не мешает указать другой. И можно обойтись без фотографий вовсе, тогда плагин просто зальёт фон однотонным цветом.
Код плагина был готов более чем наполовину более полугода назад. Существовал он в виде дополнения к шаблону оформления, требовалось доработать до выхода в свет. И назывался он «Auto Open Graph Images», что доставляет мне проблем и поныне: никак не могу полностью вычистить старое название из кода и сопроводительных файлов.
Слово «Auto» в названии пред-первой версии было не случайным — заголовок и цвета подбирались автоматически на основе содержания статьи и основной фотографии. Подбор гармоничных цветов и привлекательных заголовков — сложная задача с субъективным результатом, поэтому я хотел предоставить делать выбор самостоятельно на основе сгенерированной палитры.
Допилить код до состояния полноценного плагина меня побудили, как ни странно, проблемы с популярным плагином Ultimate Member. Его авторы допустили громадную ошибку в работе самодельного загрузчика изображений, из-за чего более 100 тысяч сайтов с установленным UM оказались под угрозой взлома и заражения вирусами. Ошибку исправили только через месяц, но изображения по-прежнему загружались некорректно. Поэтому я прикрутил свой загрузчик к их плагину, чтобы понять, как исправить оставшиеся проблемы. В итоге я сделал выводы, что
- разработчики Ultimate Member недостаточно компетентны, чтобы писать понятный код;
- писать свой загрузчик нет смысла, когда есть реализация от WordPress;
- я тоже хочу внести вклад в развитие инфраструктуры WordPress.
Тогда я кое-что выкинул, доработал оставшееся, причесал немного код и загрузил в каталог WP. Плагин не идеален, но он работает.
Все цвета настраиваются на странице опций плагина в разделе «Настройки» — «OG Images With Caption».
Стилей заголовков пока 6, они похожи, но я работаю над этим. Шрифт (пока) выбрать нельзя, используется Open Sans Regular.
На той же странице можно изменить принцип работы плагина. Если установлен плагин поисковой оптимизации SEO by Yoast, то на страницах сайта будут дублироваться Open Graph теги (и мой, и указанный плагин будут выводить теги с одинаковыми названиями). Нужно поставить галку на «Enable Yoast SEO compatibility mode» и снять с «Generate all opengraph tags, not only «og:image» and «twitter:image».
При снятой галке с первой опции мой плагин будет выводить только теги «og:image» и «twitter:image», что теоретически должно помочь избежать конфликтов с любыми плагинами, которые добавляют Open Graph в код страниц. Вторая вообще отключает вывод тегов и включает запись ссылок на изображения в настройки SEO by Yoast, чтобы этот плагин сам указывал теги изображений. Именно в таком режиме плагин работает на моих сайтах.
Над интеграцией с другими SEO-плагинами я не работал. Если снять галку с первой опции «Generate all opengraph tags, not only…», теоретически конфликтов быть не должно. Как будет на практике — не знаю, ибо каждый плагин генерирует свою комбинацию тегов OG.
Что плагин может
- Работать со страницами и записями.
- Генерировать текст поверх картинки.
- Добавлять Open Graph теги в код страниц.
Что не может
- Самостоятельно публиковать посты в соцсетях.
- Искать подходящие фоны к надписям.
В планах — сделать загрузку фотографий, не зависящую от главного изображения поста, добавить новые стили оформления и надписи с рубриками, тегами.
5 Почему необходимо дружить с социальными сетями
Многие паблики во Вконтакте, Фейсбуке и Твиттере представляют собой ленты из постов-ссылок на сторонние сайты. Выглядит однотипно: текст, картинка, заголовок страницы.
Важные надписи на карточках-ссылках — заголовок и описательная часть — написаны мелким шрифтом.
Большую часть площади карточек сообщений занимает так называемая «featured» фотография, которая тянет «одеяло внимания» на себя.
Про существование нижних элементов — заголовка страницы, кнопок лайков и репостов, счётчика прочтений — можно забыть. Внимание — ресурс не бесконечный, люди не читают все надписи в поле зрения. Взгляд будет прикован к картинке, именно она работает в качестве «завлекалочки».
Чем ярче фотография, тем выше шанс, что по ней кликнут. Поэтому не удивительно, что «featured» картинку пытаются сделать информативной, добавляя текст и значки. Более-менее приемлемую реализацию я встретил на сайте kg-portal:
Вот только в социальных сетях их вариант не работает. Текстовая часть обрезается:
Подчеркну: я не считаю, что фотографии без текста — плохо. Обычное тематическое изображение — не самый плохой вариант, если помогает понять, о чём речь в статье. Просто в ряде случаев рациональнее доработать графическую часть, добавив надписи, значки, выделив что-то цветом.
Однако многие сайты, в том числе крупные СМИ, которым важно привлекать трафик, вообще не уделяют должное внимание Open Graph изображениям. Например, «Коммерсантъ» за этим не следит, допуская публикацию куцых карточек-ссылок с новостями без заголовка в своём паблике Вконтакте:
Как-то нелепо получается: в соцсетях сидит громадное количество людей, столь небрежное оформление постов выглядит досадным просчётом.
Неужели владельцы сайтов с миллионной аудиторией не могут нанять программиста для небольшой доработки? Посетителям такие картинки не помешают: они прописываются в исходных кодах страниц, в Open Graph тегах и видны только в социальных сетях. Более того, для их создания не нужен человек и Фотошоп — генерировать можно в автоматическом режиме, рисуя заголовок на основной фотографии страницы. Даже модные нынче нейросети тут не пригодятся.
А тем, кто пользуется Вордпрессом, и вовсе не нужно тратить деньги — мой плагин Open Graph Images With Caption бесплатен. Качайте и пользуйтесь на здоровье.
