Как создать превью страницы сайта?

Question

[Геннадий Уваров]

Если мы с копируем ссылку сайта (https://toster.ru) в соц.сети ВК, фейсбук, одновлассников... и т.д, а так же в меседжеры...

Увидем это см. фото





Как это правильно называется ?
Каким образом реализовать в html ?

Comments

[alex]

микроразметка

Answer 1

[FORTY YEARS]

Геннадий Уваров, чтобы это сделать, вам нужно добавить в head страницы теги:

<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">

Далее нужно каждому мета-тегу заполнить параметр content=""

За что отвечает каждый тег:
og:title - заглавие страницы, он же тайтл. Можете скопировать из тега title.
og:site_name - название сайта.
og:url - ссылка страницы, где вы добавляете этот код. Если это однастраничник, то это просто ссылка на главную сайта. Если сайт на CMS или самописный и у него много страниц, то вам придется для каждой указать свой тег, со своей ссылкой.
og:description - описание страницы. Можете скопировать из тега description для страницы, на которую добавляете теги.
og:image - ссылка на картинку, что характеризует страницу. Можете указать ссылку на лого сайта, или нарисовать конкретную картинку для этих целей.

Comments

[Stalker_RED]

Неплохо бы добавить ссылку на полное описание opengraph (en, ru)

[Yurii_Veteran]

Спасибо тебе добрый челевек!

Очень помог.

Answer 2

[Антон]

Opengraph разметка
P.S. Открыли бы код, посмотрели, далее по совпадениями берем код и лезем в гугл.