Як відобразити ескіз попереднього перегляду вашого веб-сайту на Facebook Share

Коли хтось ділиться посиланням на одну зі сторінок вашого веб-сайту на її часовій шкалі, Facebook автоматично отримує зображення зі сторінки з посиланням і відображає його поруч із назвою та URL-адресою сторінки. На жаль, отримане зображення іноді може бути не пов’язаним із вмістом сторінки або навіть зовсім відсутнім у спільному посиланні. Щоб Facebook відображав найкраще зображення, коли хтось ділиться вашою сторінкою, і, отже, збільшуйте це рейтинг кліків посилання - додайте кілька рядків коду до HTML-коду сторінки, щоб змусити Facebook отримати певний зображення.

Додайте розмітку Open Graph

Відкрити графік — це протокол, розроблений Facebook, який, серед інших функцій, дозволяє веб-розробникам додавати теги розмітки на свої сторінки, щоб налаштувати спосіб, яким Facebook відображає посилання на їхні веб-сайти.

Відео дня

Додайте теги Open Graph на сторінку, відредагувавши її вихідний код HTML:

Крок 1

Відкрийте файл HTML у текстовому редакторі, наприклад в Блокноті, або у спеціальному редакторі HTML. Розмістіть курсор перед закриваючим тегом у верхній частині файлу та натисніть

Введіть щоб створити новий рядок.

HTML-файл у Блокноті з порожнім рядком у розділі Head.

Авторство зображення: Зображення надано Microsoft

Крок 2

Введіть наступний мета-тег:

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

Порада

  • Хоча Facebook приймає мініатюри розміром до 200 x 200 пікселів, рекомендований розмір має ширину 1200 пікселів і 630 пікселів у висоту.
  • Щоб збільшити відсоток користувачів, які натискають посилання, - так званий рейтинг кліків -- розгляньте можливість додавання a заклик до дії до зображення, наприклад Натисніть тут або Дізнатися більше.
HTML-файл із тегом зображення мета властивості Open Graph, обведеним кружечком.

Авторство зображення: Зображення надано Microsoft

Крок 3

Збережіть файл і завантажте його на свій веб-хост.

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

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

Авторство зображення: Зображення надано Microsoft