Как сделать так, чтобы миниатюра предварительного просмотра вашего веб-сайта показывалась на Facebook

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

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

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

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

Шаг 1

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

Шаг 2

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

<сильный>

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

Совет

• Хотя Facebook принимает эскизы изображений размером от 200 x 200 пикселей, рекомендуемый размер составляет 1200 пикселей в ширину и 630 пикселей в высоту.
  
• Чтобы увеличить долю пользователей, нажимающих на ссылку, – это называется коэффициентом кликов. -- попробуйте добавить к изображению призыв к действию, например Нажмите здесь. или Подробнее .
  

Шаг 3

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

Другие теги разметки Open Graph

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