Изображение-миниатюра для соцсетей

Всем привет!

В прошлой статье я приглашал вас потестировать мои новые скользящие социальные кнопки. А позже заметил как выглядит ссылка на “Жизнь с WordPress” в новостной ленте ВКонтакте, после того как ей поделились.

ссылка на wordpress-life.ru в новостной ленте ВКонтакте

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

Если посмотреть исходный код элемента, то можно выяснить, что размер данного изображения к ссылке: 100px x 63px. У других ссылок в новостной ленте ВК я наблюдаю картинки других размеров. Проанализировав несколько изображений, пришел к выводу, что изображения уменьшаются пропорционально, при этом, минимально допустимые ширина и высота, после преобразования – 63px.

Когда человек “лайкает” какую-либо страницу на сайте – скрипт соцсети находит изображение согласно своему алгоритму и забирает его для ссылки. Вот такая ситуация с “обрезанным” изображением получается, когда забирается имейдж, например, из шапки сайта. Такие картинки, обычно, широкие, но имеют небольшую высоту. И после пропорционального уменьшения не влазят в thumbnail.

Такую ситуацию я наблюдаю на сайтах многих блоггеров. И смотрится, это некрасиво и не профессионально. Может, конечно, кого-то это и подтолкнет кликнуть по ссылке, чтобы узнать что же там написано, но, думаю, в большинстве случаев люди просто не захотят посещать сайт, “сделанный на коленке”, и проигнорируют такую ссылку.

Так что же можно с этим сделать?

Оказывается, с помощью специального мета-тега можно указать изображение, которое должны забирать скрипты соцсетей для миниатюр к ссылкам.

Я создал квадратное мини-изображение 200px x 200px с логотипом моего блога специально для соцсетей. Такой размер выбран не случайно – об этом напишу ниже.

Вот код, который необходимо разместить в header.php между тегами <head></head>:

Понятно, что путь к файлу изображения и название файла вы указываете свои.

Теперь вместе с лайком в соцсети будет передаваться именно эта картинка.

Вот что получилось у меня:

новая миниатюра для соцсети

Нужно будет больше текста в описание добавить, чтоб лучше раскрыть тематику сайта и, как раз, справа пустое пространство заполнится.

Обращаю внимание, что при таком размещении кода, со всех страниц вашего сайта в соцсеть будет уходить одно и то же изображение.

Если вы используете миниатюры к статьям и хотите передавать именно их, тогда в коде путь к изображению можно указывать таким образом:

Т.е. у вас должно получиться что-то типа такого:

Также, знаю, что плагин Yoast WordPress SEO plugin сам добавляет необходимый код для миниатюр. Подробней пока написать ничего не могу, поскольку сам использую All in One SEO Pack.

Помимо изображения, вы также можете указывать: урл, заголовок и описание. Но, эти данные соцсети у меня с сайта получают без проблем, поэтому здесь дополнительная настройка не понадобилась.

Для общего развития, привожу пример кода, с помощью которого можно передать в соцсеть информацию для ссылки:

Теперь касательно выбранного мной размера изображения: 200px x 200px. Дело в том, что изначально я сделал изображение размером 100px x 63px, как раз в аккурат такое, какое увидел в коде страницы ВКонтакте.

Когда же добавил нужный код в хедер и начал тестировать, то Фейсбук упорно продолжал брать широкий логотип из шапки сайта, а не это новое изображение, которое вроде как должен был подхватить.

Тогда я нашел его родной инструмент для проверки Open Graph:

Facebook: https://developers.facebook.com/tools/debug/og/object?q=wordpress-life.ru

и он мне выдал:

og:image should be larger

Provided og:image is not big enough. Please use an image that’s at least 200×200 px. Image ‘http://wordpress-life.ru/wp-content/themes/SmartMove/images/logo.png’ will be used instead.

Здесь сообщается, что предлагаемое изображение должно быть больше и нужно использовать  изображение как минимум 200х200 px. А вместо предлагаемой мной миниатюры будет использовать logo.png из шапки сайта.

Именно поэтому пришлось сделать миниатюру размером 200×200 px.

Несмотря на эти изменения, мне не удалось заставить Facebook подбирать для миниатюры нужное изображение. Если найду решение вопроса, то дополню статью. Возможно, кто-то сталкивался с такой проблемой – просьба написать в комментарии.

Гугл+, Вконтакте, Одноклассники берут заданное изображение без проблем.

Очередной пункт в настройке сайта на WordPress частично выполнен.

Не забудьте поделиться с друзьями, если статья понравилась и оказалась полезной =)

Успехов в раскрутке через социальные сети!

P.S. После публикации этой статьи и лайка в Фейсбук – в ленте отобразилась нужная миниатюра. Если же делиться с главной страницы wordpress-life.ru, то Фейсбук по-прежнему берет изображение из шапки. Возможно, информация кешируется, и необходимо время для её обновления.

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

20 комментариев к записи “Изображение-миниатюра для соцсетей”

  1. Княгиня

    Добрый день.
    У меня, знаете, ещё хуже бывает: если у поста нет картинок, то фейсбук забирает первый смайлик из списка. Поскольку смайлики выводятся плагином, занейтралить их не выходит. А раньше он забирал кнопку соцсетей (потом картинки кнопок я убрала в фоновые изображения, оттуда картинки не вытягиваются).

    Что касается таких мета-тегов, то ещё есть проблема с микроразмёткой: например, красивую подпись из хлебных крошек Гугль берёт для сниппета, а картинку – не хочет. То ли я чего не доцепила, то ли напротив – нацепляла слишком много, но итог один.

    • Алексей Ершов

      Здравствуйте, Юлия!
      Вам как раз нужно прописать вот эти мета-теги, о которых я написал в статье – у вас их нет на сайте.
      Можете назначить одно изображение – свое фото или другое, какое захотите, а можно еще проверять наличие миниатюры к статье. Если миниатюра есть к статье то отдавать её соцсетям, иначе – какое-то одно изображение по умолчанию.
      Вот код проверки наличия миниатюры:

      • Княгиня

        Да, пожалуй, проверка на наличие прикреплённых файлов (типа картинка) – это способ решить проблему. Фейсбук хватает смайлик только в том случае, когда у поста нет картинки; если картинка есть, вопросов нет. У меня, видите ли, два блога, и на одном картинки бывают редко, а на другом намного чаще. Однако вопроса микроразмётки и сниппетов для поиска это напрямую не связано, там другое: не наличие картинки, а способ настучать машине, что эту картинку надо наконец взять в сниппет. Картинка в посте есть, размётка двух типов на неё сто лет как повешена, а воз и ныне там – хотя тот же Гугль+ забирает данные по размётке.

        • Алексей Ершов

          Так вот же ж этот код как раз и “стучит” о том, что нужно взять в сниппет именно эту картинку.

          На greatbattle.ru тоже не увидел у Вас этого мета тега.
          Если данный мета-тег прописан, а Фейсбук все-равно не подхватывает нужное изображение, тогда, думаю, это дело уже не в наших сайтах. Потому что, для новой статьи у меня все ок, для главной страницы – изображение, по прежнему, не из мета-тега.
          Я вчера серфил этот вопрос – у многих такая проблема именно с Фейсбуком. Не зря мне эта соцсеть не нравится =). ВКонтакте, хоть и обвиняют в плагиате, но у них как-то все аккуратно делается даже в мелочах.

          • Княгиня

            Так я размёткой Open Graph и не пользуюсь, у меня везде Schema.org расставлена, а местами – hcard, а местами – вообще RDF. (Это “местами” меня раздражает своей неупорядоченностью, но причесать к единообразию не выходит.) Это во-первых. Во-вторых, моя проблема не с Фейсбуком, а со сниппетами в выдаче Гугля; с Фейсбуком всё ясно – он хватает картинку, если она есть, а “заглушку” на когда нет я ещё не сделала. Сделаю – проблемы не будет, а для Гугля просто непонятно, что делать.

            @
          • Алексей Ершов

            Теперь понял. =)
            Тут рекомендацию не могу дать. =)

          • jl Alice

            Зайдите сюда http://developers.facebook.com/tools/debug укажите url своей ссылки. Появится информация о вашей странице и сбросит кеш изображения для страницы.

            @
  2. Анатолий

    Вот спасибо, обязательно учту. Если много картинок в посте, приходится очень долго щелкать, чтобы выбрать нужную.

  3. Герман

    100500 раз прочитал статью. Но ответа на вопрос – почему мини-изображение получилось ”обрезанным” я так и не нашел. Автор тупо использовал og:image. Подогнав фото под 100 х 63.

    Кто-нибудь знает как управлять размеров миниатюр на стене?

    • jl Alice

      Вроде ни как, делаете миниатюру 200×200 и прописываете в og:image.

  4. Dea

    Добрый вечер
    У меня вопрос в плагине
    All in One SEO Pack появился плагин соц сеть он разве все это не прописывает ?

  5. Виктор

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

    • Алексей Ершов

      Здравствуйте, Виктор!
      Ответ на Ваш вопрос в этой статье.
      Как говорится, лучше поздно, чем никогда. =) Заодно и другие читатели смогут найти решение.

  6. Сергей

    Здравствуйте, не подскажете, как мне разобраться с моей проблемой. При добавлении ссылки в ВК или ФБ вообще ничего не выводится _http://take.ms/vhpMR

    Пользуюсь плагином Yoast WordPress SEO plugin. Пробовал его отключать, а так же все плагины пробовал отключать – но ничего не происходит.

    Проверил через сервис приведенный в статье, выдает _https://developers.facebook.com/tools/debug/og/object?q=naogorode.ru/vyrastit-finikovuyu-palmu-iz-kostochki.html

    Похоже на то, что боты соц.сетей не могут отсканировать страницу. Допустим Гугл+отлично добавляет и заголовок и дескрипшин.

    • Алексей Ершов

      Здравствуйте!
      Попробуйте применить у себя на сайте материал этой статьи или вот этой.

      • Сергей

        Не помогло…

        Думаю, может в файлах системы ВП что-то нарушил, раз перестали записи публиковаться в соц.сетях. Раньше все ок работала. Не знаете какие файлы отвечают за это?

        • Алексей Ершов

          Код, отвечающий за передачу миниатюр, обычно, расположен в header.php

  7. Ильнар

    Здравствуйте Алексей,а мне какой код использовать чтоб Вконтакте миниатюры записей отображались которые в записях имеются?

    1) <meta property="og:image" content="ID), ‘thumb’);?>” />

    2)wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘thumb’);

    я правильно понял что вставлять надо в header.php между тегами ?

  8. Алла

    При постах страниц на одноклассники,фесбук,Вконтакте и тд нет фотографии в анонсах в вместо фотографии стоит путая картинка(тутне могу показать у вас не загрузишьпаином захваченную картинку ),как настроить сайт, чтоб при публикации в соцсетях была видна фотография с сайта

Оставить комментарий

Для размещения кода в комментарии используйте теги <pre> </pre>, например:


Подписаться, не комментируя