Юрий Гец

Как задать фото, которое подтягивается при вставке URL?

Recommended Posts

Как задать через html или css или ещё как-то – изображение, которое автоматически подтягивается при вставке ссылки в поле ввода сообщения (например в VK или Facebook)?

Прикрепил 2 примера.

11.JPG

12.JPG

Share this post


Link to post
Share on other sites

Пропиши opengraph атрибуты в meta-тэгах.

За картинку отвечает тэг og:image

Примеры в листингах по ссылке.

http://ogp.me/

Подробнее по-русски:

https://yandex.ru/support/webmaster/open-graph/intro-open-graph.xml

 

 

Edited by Tilonorrinco

Share this post


Link to post
Share on other sites
В 21.12.2017 в 20:03, Tilonorrinco сказал:

Пропиши opengraph атрибуты в meta-тэгах.

За картинку отвечает тэг og:image

Примеры в листингах по ссылке.

http://ogp.me/

Подробнее по-русски:

https://yandex.ru/support/webmaster/open-graph/intro-open-graph.xml

 

 

Спасибо, вставил в Head сразу под Title:

<meta property="og:image" content="https://i.imgur.com/EfCi3s5.png" />
<meta property="og:image:secure_url" content="https://i.imgur.com/EfCi3s5.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="100px" />
<meta property="og:image:height" content="100px" />
<meta property="og:image:alt" content="Юрий Гец" />

Пока результата не увидел, может нужно время? Или что-то не так?

p.s. пробовал без закрывающих слешей в конце (как у Яндекса) – не помогло. Как и указание размера просто цифрами без пиксел (px).

Можете посмотреть исходник тут:

https://yurii-hets.blogspot.com/

Edited by Юрий Гец

Share this post


Link to post
Share on other sites

Если что-то не работает, можно протестировать в онлайн-сервисах (точно есть у фейсбука и твиттера, обычно если в них все норм, то и на других сайтах тоже). Там обычно все довольно подробно расписано.

Вот ссылка на дебаггер фейсбука: 

https://developers.facebook.com/tools/debug/sharing

На фейсбуке погружается картинка с Мэрилин, ссылка на которую возвращает 404 страницу. Поэтому изображение не отображается.

В телеге все работает норм и подгружает фотографию.

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

Если подгружается старая картинка, можно очистить кэш (на сайте дебаггера для каждой соцсети) или подождать.

Edited by Tilonorrinco

Share this post


Link to post
Share on other sites
В 23.12.2017 в 12:42, Tilonorrinco сказал:

Если что-то не работает, можно протестировать в онлайн-сервисах (точно есть у фейсбука и твиттера, обычно если в них все норм, то и на других сайтах тоже). Там обычно все довольно подробно расписано.

Вот ссылка на дебаггер фейсбука: 

https://developers.facebook.com/tools/debug/sharing

На фейсбуке погружается картинка с Мэрилин, ссылка на которую возвращает 404 страницу. Поэтому изображение не отображается.

В телеге все работает норм и подгружает фотографию.

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

Если подгружается старая картинка, можно очистить кэш (на сайте дебаггера для каждой соцсети) или подождать.

Спасибо! Помогла смена размера фото и возможно типа файла (с .png на .jpg). Возможно кнопка "Повторить скрапинг" тоже помогла.

Правда теперь на этом ФБ дебаггере после скраппинга пишет ошибку:

Цитата

Отсутствуют следующие необходимые объекты монетизации: fb:app_id

Можно в него указать ссылку на мой Facebook профиль или оставить без указания этого параметра или ....?

Но, главное, что фото подтягивается при вставке.

Edited by Юрий Гец

Share this post


Link to post
Share on other sites

Тэг fb:app_id нестандартный, завязан только на фейсбук и нужен, как я понял, для интеграции приложений с open graph.

https://stackoverflow.com/questions/10836135/when-do-i-need-a-fbapp-id-or-fbadmins

Можно его проигнорить.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Nathman999
      В #topmenu есть 4 прямоугольника-ссылки:"Основное","HTML","CSS","Сайт"
      Ссылки выглядят примерно так: http://htmlbook.ru/#main 
      Хотя если на них нажать никаких переходов не происходит(по крайней мере в адресной строке хрома ничего не меняется).
      Но панель под этими прямоугольниками меняется. А именно одна из 4-х панелей становится видимой(display: block;).
      Объясните пожалуйста как реализована такая технология.
    • By AndreyCore
      При нажатии на кнопку в форме, сайт не перезагружается как нужно.
      В чем проблема?
      <div class ='div-form'> <h1>CALC</h1> <form id = 'myform'> <label for = 'inp-1'>Число 1</label> <input class = 'inp' id = 'inp-1' type ='text'></input> <br/><p></p> <label for = 'inp-2'>Число 2</label> <input class = 'inp' id = 'inp-2' type = "text"></input></form><br/> <input id = 'bu-end' type ='submit' value ="Суммировать"></input> <p class = 'sum' id = 'sum'>Сумма: <span class = 'sum-r' id = 'sum-r'></span></p> </form><hr/> </div>  
    • By ashelpakov95
      Помогите, делаю чат-бота по этому уроку и коду https://fokit.ru/kak-sozdat-chat-bota-besplatno/
       
      Есть 6 веток вопросов. Я всё удобно подписал <!--Вопрос 1-->,<!--Вопрос 2-->....
      У меня бот прогоняет все вопросы какие есть.  Как сделать, чтобы после каждой ветки вопросов бот прекращал задавать вопросы? и еще, как сделать, чтобы бот выдавал вариант ответа, при нажатии на который, перекидывало на определенную страницу сайта?
      index-22.html
  • Member Statistics

    46,560
    Total Members
    3,128
    Most Online
    AnnaYa
    Newest Member
    AnnaYa
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.