Facebook Open Graph image: Вы (вероятно) делаете это неправильно

1. Проблема (среди прочих)
2. Открыть графическое изображение в дикой природе
3. Результаты (** барабанная дробь **)
4. Заключение
5. методология

Если вы используете Facebook, вы должны привыкнуть к таким вещам в своей ленте новостей:

Кто-то (может быть, друг) поделился каким-то контентом, и вот вы с заголовком, описанием, ссылкой, которую нужно нажать. И изображение. Это изображение важно, потому что оно способно привлечь внимание и вызвать визиты.

Это изображение обычно предоставляется совместно используемой страницей через специальные HTML-разметки. Facebook придерживается спецификаций Open Graph и добавляет еще несколько требований, например, относительно размеров изображения.

Для многих сайтов, таких как блоги, изображение Open Graph должно быть классическим, вместе с заголовком и описанием страницы. Facebook часто имеет решающее значение для генерации трафика. Правильно ли создано изображение Open Graph?

Проблема (среди прочих)

Чтобы ответить на этот вопрос, давайте сосредоточимся на конкретном моменте. Facebook отображает 19,1: 10 изображений в своей ленте новостей (например, 1200 × 630, потому что 1200/630 = 1,905; достаточно близко). Когда он находит изображение с другим соотношением, он автоматически обрезает его, чтобы превратить его в 19,1: 10.

Например, давайте рассмотрим это изображение 540 × 619:

Когда соответствующая страница публикуется в Facebook, изображение становится:

Легко понять, как продвигается Facebook. Он просто обрезает изображение настолько, насколько необходимо, чтобы сделать его 19.1: 10. Для этого он обычно удаляет одинаковое количество границ с каждой стороны, чтобы сохранить центр изображения:

Теперь сделка ясна: если вы не предоставите Facebook изображение 19.1: 10, оно будет автоматически обрезано. Что может быть хорошо или просто неправильно, в зависимости от изображения. Возьми это NCB News статья о Macy's , Его изображение Open Graph:

Мы ясно видим название «Macy's» и витрину, так что это, вероятно, хорошая фотография для иллюстрации статьи. Однако, когда они публикуются в Facebook, результат довольно плохой:

«Macy's» был полностью раздет, и фотография теперь довольно темная.

Открыть графическое изображение в дикой природе

Чтобы исследовать, как готовятся изображения Open Graph, было выбрано 40 сайтов, по 10 в каждой из следующих категорий:

• Новостные сайты (Yahoo News, CNN и т. Д.): Это сайты с высоким трафиком, которые все знают. Facebook может быть основным источником трафика для этих сайтов, поэтому они, вероятно, обратят внимание на изображения Open Graph.
• Технические блоги (TechCrunch, Mashable ...): такие же, как новостные сайты, плюс они связаны с технологиями. Не могу ошибаться!
• Блоги о WordPress (WPTavern, wplift…): как блоги, связанные с WordPress, они должны знать о правильных инструментах, чтобы все было правильно, включая изображения Open Graph.
• Блоги в социальных сетях (Buffer blog ...): Поскольку социальные сети являются их основным бизнесом, они должны быть особенно осторожны с материалами, связанными с Facebook.

Результаты (** барабанная дробь **)

А теперь шокирующая правда: из этих 40 сайтов только 3 делают это правильно. Снимаю шляпу перед TechCrunch, Mashable и New York Times. Последний должен иметь специальный инструмент или процесс для этого, потому что его изображения Open Graph не только имеют правильные размеры, они также обрезаются вручную. У меня нет четкого мнения о TechCrunch и Mashable, но я подозреваю, что они автоматически обрезают изображения, делая процесс менее актуальным: цель состоит в том, чтобы сделать это вручную, чтобы достичь наилучшего результата. Не оставлять это автоматизированному инструменту.

А как насчет других сайтов?

Из 40 сайтов только один не имеет изображения (ITBusinessEdge). Все остальные поставляются с разметкой og: image. Это признак того, что редакторы веб-сайтов планируют использовать метаданные Facebook.

Однако, когда речь заходит о деталях, все не так просто: 36 сайтов не соответствуют требованиям Facebook и подвергаются автоматической обрезке.

Следующий вопрос «сколько?». В конце концов, удаление одной строки пикселей не повредит. В среднем 13% поверхности анализируемых изображений обрезается. Это важно, особенно из-за большого трафика и / или специализированных сайтов.

Некоторые сайты, похоже, не имеют определенной политики в отношении размеров изображений Open Graph. Например, в WPTavern из 10 постов средняя обрезанная поверхность составляет 18%, со стандартным отклонением 14% (и максимум 41%). Я подозреваю, что это потому, что показанное изображение (термин, с которым пользователи WordPress должны быть знакомы) используется как изображение Open Graph как есть. С этим шаблоном приходится сталкиваться очень часто.

Некоторые другие сайты, по-видимому, имеют политику «фиксированных размеров», но они не являются точными. И CNN, и NBC News всегда предоставляют одинаковый размер изображения. У CNN систематически 7% обрезанной поверхности, 21% для NBC News. Печальный победитель - HowToGeek с 43%. Изображения Open Graph на самом деле настолько малы, что Facebook их игнорирует и предпочитает выбирать изображения прямо с общих страниц.

Заключение

Это небольшое исследование показывает, как сайты обрабатывают доступ к Facebook: они поддерживают Facebook, но не очень хорошо его поддерживают. Это цель нового RealFaviconGenerator Редактор метаданных Facebook Делай это и делай это идеально.

А для тех, кто знает, что такое RealFaviconGenerator, вы, вероятно, узнаете закономерность: несколько лет назад к поколению фавиконов обращались очень плохо. Но люди привыкли к этому. Однажды RealFaviconGenerator пришел с редактор favicon сообщество заслужило, ожидания начали меняться, и сегодня все хотят «все значки». И умнее среди них использовать RealFaviconGenerator 🙂

методология

Протестированные сайты были получены путем поиска чего-то вроде «самых популярных новостных сайтов» и выбора первого разумного списка. В конце концов, проверенные сайты не гарантируют наибольшую актуальность, но результат должен быть достаточно хорошим.

Затем для каждого протестированного сайта случайным образом выбирался образец сообщения (например, заголовок статьи на новостном сайте, последний пост в блоге WordPress и т. Д.).

Новостные сайты

Технические сайты

Блоги о WordPress

Сайты социальных сетей