«

»

Размеры картинок для социальных сетей

Размеры картинок для социальных сетей

Размер имеет значение

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

 Вот такая:

Нет картинки в лайках

Особенно удивил Facebook.
Текст под  «замочной скважиной» вообще один и тот же. Всегда.
Даже когда я пыталась  поделиться через кнопки социальных сетей  другой статьей  — всегда появлялось одно и то же: «Как удалить дубликаты…»
Сначала я «грешила» на кнопки соцсетей от сервиса uptolike.  У меня был установлен плагин социальных кнопок от сервиса  uptolike.
Однако установка  блока кнопок социальных сетей от Яндекс проблему не решила.
При размещении прямой ссылки в статус в соцсети или в сообщение друзьям появилась возможность выбрать изображение из тех, что есть в статье.
Эта функция появилась во всех сетях, кроме  Facebook
При попытке поделиться статьей через кнопки социальных сетей от Яндекс  в Facebook, вместо картинки по-прежнему появлялась «замочная скважина».
А в других социальных сетях картинки отображаются не корректно.
Оказалось, что у каждой социальной сети свои настройки размеров изображений в постах.
И причина не в кнопках социальных сетей — они то как раз работают идеально.

Размеры картинок для социальных сетей

 

логотип фейсбук

Оптимальные размеры картинок в Facebook

Обложка страницы/профиля/группы (шапка): 851 х 315
Фотография профиля: 180 х 180
Размер эскиза для вкладки страницы: 111 х 74
Изображение для публикации-ссылки: мин. 600 х 315
Картинка к внешним ссылкам: 1200 x 630 px
Фотография публикации в хронике: мин. 504 х 504
Обложка группы: 801 х 250
Обложка мероприятия: 784 × 295
Картинка для поста: 1200 x 630 px (в статье на блоге 600рх х 325рх)

 

логотип-VKontakte

Картинка к внешним ссылкам: 537 x 240 px
Картинка для поста: 700 x 500 px
Фото профиля: 200 х 500 px

 

логотип-odnoklassniki

Картинка для поста: 1680 х 1680 px

(В статье на блоге 640 х 480 рх)

Обложка: 1340 x 320 px
( правда свою обложку в одноклассниках могут поставить только «заучи и директор» — VIP участники и администрация.)
Фото профиля: 190 х 190 px

 

логотип-twitter

 

Картинка для твитта: 1024 x 512 px

(В статье на блоге мин. 440 х 220рх)

Обложка: 1500 х 500 px
Фото профиля: 400 x 400 px

 

логотип-Instagram

Картинка для поста: 1080 x 1080 px
Чтобы качество было получше, используйте разрешение мин. 640х640
Фото профиля: 110 x 110 px

 

логотип-linkedin

Фотография профиля: 400 х 400 px
Обложка: 646 х 220
Размер логотипа: 100 х 60 для горизонтального или 50 х 50 для квадратного
Картинка к внешним ссылкам: 180 х 110 px
Картинка для поста: 350 x 230 px

 

логотип-Google+

Обложка: 2120 x 1192 px  или 1080 на 608
Фото профиля: 250 х 250 px

 

логотип-youtube

Оформление (обложка) канала: 2560 x 1440рх
Размер картинки видео (экран): 1280 x 720рх
Фото профиля: 800 x 800 px
 логотип-Pinterest
Картинка для пина: 735 x 1102 px
Фото профиля: 165 x 165 px

 

Для красивого, привлекательного отображения поста необходимо придерживаться размеров картинок в статье, ориентируясь на требования социальных сетей.
Почему?
Потому что у вас есть 1  секунда на то, чтобы человек обратил внимание на ваш пост.
ЗадЕржите внимание человека картинкой — значит есть шанс, что он прочитает текст, который сопровождает картинку.
Текст, сопровождающий картинку, поможет человеку принять решение — перейти на ваш блог или не перейти, чтобы прочитать подробности.
А от картинки зависит — заметит ли человек вообще этот текст.
Все начинается с картинки.
Яркая картинка в посте привлекает внимание

Внешность имеет значение.

Но вот задача — с одной стороны приходится оптимизировать картинки по весу и размеру для сайта стремясь к тому, чтобы картинки не были тяжелыми и не тормозили загрузку страницы.
С другой стороны для корректного и красивого отображения постов ведущих на блог, необходимо, учитывая стандарты соцсетей, снабдить статью довольно большой картинкой.
В третьих, выходит, что для каждой социальной сети потребуется вставлять в  статью картинку нужного размера.
И что теперь, для каждой социальной сети отдельную картинку в статью вставлять?
Все оказалось не так сложно.
Отдельная картинка потребуется под Facebook
То есть хотя бы одна картинка в статье (не важно где — в начале, середине или в конце) должна иметь размеры 600 х 315 рх.
Почему?
Потому что у Facebook «своя» разметка и в ее настройках жесткое требование к изображению  1200 х 630 рх (или 600 х315 рх).
Картинки меньшего размера Facebook просто не воспринимает всерьез — он их даже не видит.
Картинки размером 1200 х 630 рх немало весят и потребуют время для загрузки страницы.
Нам совсем не надо,  чтобы читатели ждали когда загрузится страница. К тому же скорость загрузки страницы учитывают и поисковики.
Картинки непропорциональные размерам 1200 х630 (600 х315рх) в постах на Facebook отображаются некорректно. С полосами по краям, сдвинутые в одну или другую сторону.

И вторая причина, почему картинки с сайта не отображаются в постах в социальных сетях:

«Замочная скважина» вместо картинки в анонсах статей в социальных сетях (с этой проблемы я и начала эту статью), появляется, если в настройках сайта нет указаний для систем социальных сетей с разметкой OG (Open Graph)
И вот эта самая разметка (протокол Open Graph) создана самим Facebook, но используется и другими социальными сетями.
Для того, чтобы в Facebook мои посты с блога отображались с нужной картинкой из статьи, а не с замочной скважиной, мне пришлось решить 2 вопроса:
  1. На своем сайте задать настройки отображения картинок в Facebook с маркировкой OG. Эти настройки задаются в модуле плагина All in ONE SEO — Социальные мета.
    Как настроить блог под этот самый протокол  Open Graph, чтобы в анонсах статей отображались картинки читайте в следующей статье.
  2. Одну картинку в статью я создаю размером 600 х 315 рх. Специально для его величества Facebook.
Теперь для сравнения покажу в скриншотах как отобразилась картинка с размерами 600 х 315 (для Facebook) в других социальных сетях.

 В Фейсбук

 картинка встала точно по размерам

отображение поста в фейсбук

В «Одноклассниках»

 Изображение немного натянуто — снизу между домиками и краем картинки b и по правому краю появилась дополнительное пространство

отображение картинки в посте в одноклассниках

 

ВКонтакте

Картинка урезана.
Требуемые размеры 700 х 500 рх
Картинка с размерами под фейсбук  в контакте подрезана.

отображение картинки в посте

В других социальных сетях я пока не экспериментирую.
Исходя из результатов сравнения скриншотов я делаю выводы
Если в одноклассниках картинка незаметно будет растянута с этим как-то еще можно смириться.
Но обрезка картинки как «ВКонтакте» совсем никуда не годится.
Поэтому, если есть желание, чтобы в каждой социальной сети пост о вашей статье (ваш или ваших читателей) отображался с красивой картинкой — надо наполнять статью картинками с размерами для каждой из них.
К примеру, в этой статье у меня две основные картинки:
Первая картинка в тексте -Facebook .
Поисковики Facebook найдут именно ее — потому что так задано в настойках модуля «Социальные мета» на моем сайте.
Вторая картинка ( с коровками) — для «Одноклассников»
И видимо придется создавать картинку для соцсети «ВКонтакте».
Подвожу итоги:
1. Оптимального, универсального размера картинок, который помогал бы отображать картинки в постах с блога во всех социальных сетях я не нашла.
Самым требовательным оказался Фейсбук, поэтому под него размещаю в статье одну картинку с размерами 600 х 315 рх.
Другие соц. сети  способны не плохо отобразить картинку с такими размерами.
Но  с учетом того, что «ВКонтакте» картинки подрезает — создавать их так, чтобы важная информация была в верху или в середине изображения.
Или, если статья большая одну из картинок сделать размером 700 х 500 рх ( для «ВКонтакте»)
2. Для отображения анонсов статей, а вместе с ним и картинок в постах через кнопки социальных сетей (или через ссылку) и необходимо присутствие на сайте (блоге) настроек под протокол Open Graph.
3. Или сказать: «Да ну его. Заморачиваться еще этим. Пусть будет как будет!»
И теперь вопросы к вам:
Что вы думаете по этому поводу?
Может быть вы знаете универсальные размеры для картинки в статью на блоге?
Жду ваших ответов, вопросов и мнения в комментариях.
И еще, я буду не против если посты с картинками из этой статьи, появятся в социальных сетях.
Для этого надо просто нажать на кнопочки внизу и написать пару слов. 🙂

 

Подписаться на обновление блога

Введите свой e-mail

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *