Сподобалось, поділися
 
Пошук по сайту

В соцмережах коли ми ділимось будь-якою сторінкою із своїми друзями, разом із посиланням на відповідну сторінку фейсбук підтягує із сайту картинку та короткий опис. Як вказати явним способом фейсбуку та вконтакті, яку картинку та який опис брати з сайту?

 

 

Коли картинки в тексті вставлені через нормальний класичний html тег img, то зазвичай фейсбук знаходить такі картинки на сторінці та навіть пропонує вибрати потрібну. Пропонує вибрати не усі, а декілька варіантів в якісь своїй хоаточній послідовності, не важливо, головне що знаходить. Але якщо картинки вставлені стилями через div, то нажаль фейсбук взагалі нічого не знайде на вашому сайті.

Що стосується опису до посилання, він його бере із description відповідної сторінки. Що також не завжди зручно, бо в дескріпшин деколи сеошники навбивають такого всякого.

Для того, щоб вказати явним способ яку картинку та опис для посилання брати потрібно використати так званий Open Graph protocol, детальніше про OGP. Тобто необхідно на сторінку добавити відповідні мета теги з картинкою та описом.

Теги протоколу Open Graph:

 

тег опис
og:title заголовок вашої статті
og:type тип обєкту
og:site_name назва сайту
og:url канонічний адрес вашої сторінки
og:description опис стрінки
og:image адреса пропонованої картинки. Рекомендується використовувати не менше 1200*630 пікселів

Приклад використання коду 

<html prefix="og: http://ogp.me/ns#">
<head>
<title>Велодень 2016</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.fedun.com.ua/relaks/231-bikeday-2016-ivano-frankivsk.html" />
<meta property="og:image" content="http://www.fedun.com.ua/images/stories/2016/bikeday/bikeday_18.JPG" />
...
</head>
...
</html>

Всі можливості протоколу описувати немає сенсу, більше можна ознайомитися на сайті Open Graph protocol.

 

Додати коментар


Захисний код
Оновити