Как сделать так, чтобы эскиз вашего веб-сайта отображался на Facebook Поделиться

Когда кто-то делится ссылкой на одну из страниц вашего веб-сайта на своей временной шкале, Facebook автоматически извлекает изображение со связанной страницы и отображает его рядом с именем и URL-адресом страницы. К сожалению, полученное изображение может иногда не иметь отношения к содержимому страницы или даже полностью отсутствовать в общей ссылке. Чтобы Facebook отображал наилучшее возможное изображение, когда кто-то делится вашей страницей - и, следовательно, увеличивайте это рейтинг кликов по ссылке - добавьте несколько строк кода в HTML-код страницы, чтобы Facebook выбрал конкретный изображение.

Добавить разметку Open Graph

Открыть график - это протокол, разработанный Facebook, который, среди прочего, позволяет веб-разработчикам добавлять теги разметки на свои страницы, чтобы настроить способ отображения Facebook ссылок на их веб-сайты.

Видео дня

Добавьте на страницу теги Open Graph, отредактировав ее исходный HTML-код:

Шаг 1

Откройте файл HTML в текстовом редакторе, таком как Блокнот, или в специальном редакторе HTML. Поместите курсор перед закрывающим тегом в верхней части файла и нажмите

Входить для создания новой строки.

HTML-файл в Блокноте с пустой строкой в ​​разделе " Заголовок".

Кредит изображения: Изображение любезно предоставлено Microsoft

Шаг 2

Введите следующий метатег:

Заменять http://www.example.com/thumb.jpg с фактической ссылкой для изображения, которое вы хотите, чтобы Facebook отображал, когда пользователь делится ссылкой на ваш сайт.

Кончик

  • В то время как Facebook принимает миниатюрные изображения размером всего 200 x 200 пикселей, рекомендуемый размер имеет ширину 1200 пикселей и высоту 630 пикселей.
  • Чтобы увеличить процент пользователей, переходящих по ссылке - так называемый рейтинг кликов - рассмотрите возможность добавления призыв к действию к изображению, например Кликните сюда или Узнать больше.
HTML-файл с тегом изображения мета-свойства Open Graph в кружке.

Кредит изображения: Изображение любезно предоставлено Microsoft

Шаг 3

Сохраните файл и загрузите его на свой веб-хост.

В дополнение к миниатюре рассмотрите возможность использования тегов разметки Open Graph, например, для настроить заголовок или описание общей ссылки.

HTML-файл с указанием тегов заголовка и описания Open Graph.

Кредит изображения: Изображение любезно предоставлено Microsoft