Когда вы делитесь ссылкой в соцсетях или мессенджере, она преобразуется в превью сайта. Это очень удобно, так как такую ссылку легко отличить среди прочих. К тому же сразу ясно – о чем речь в статье по ссылке.
Как правильно подготовить превью сайта?
Сперва стоит написать статью, затем проработать SEO по тексту. После этого можно приступать к подготовке превью сайта.
Подготовка страницы сайта для SEO
Чтобы поисковики, соцсети и прочие агрегаторы могли сформировать правильное превью им нужно помочь.
Для этого используется OpenGraph разметка. С помощью OpenGraph вы фактически указываете значимые атрибуты страницы. Если вы определяете данные OpenGraph с помощью тега meta, то формат записи таков:
<meta property="og:title" content="Заголовок моей потрясающей статьи" />Атрибут мета-тега property содержит имя OpenGraph атрибута, а content его значение.
Список необходимых OpenGraph атрибутов:
- og:locale – определяет локаль, в которой находится данная страница. Если статья на русском, то значение должно быть такое:
ru_RU. - og:type – тип публикации. Если это статья, то значение будет
article; - og:title – заголовок статьи;
- og:description – краткое описание статьи;
- og:url – адрес постоянной ссылки на страницу, по которой она доступна;
- og:site_name – имя сайта, не домен, а именно имя, например General Motors Company;
- article:published_time – дата и время публикации в формате
"YYYY-MM-dd'T'HH:mm:ss.SSSXXX"; - article:modified_time – дата и время внесения изменений, в том же формате;
- og:image – полный путь к изображению;
- og:image:width – ширина изображения;
- og:image:height – высота изображения.
Пример
<meta property="og:locale" content="ru_RU" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Заголовок моей изумительной статьи" />
<meta property="og:description" content="Данная статья содержит подробную информацию о том, как стоит вести себя в цивилизованном обществе и вообще жить по совести." />
<meta property="og:url" content="https://mysite.ru/articles/moya-statia.html" />
<meta property="og:site_name" content="General Motors Company" />
<meta property="article:published_time" content="2020-10-22T06:01:31+00:00" />
<meta property="article:modified_time" content="2020-10-21T18:33:05+00:00" />
<meta property="og:image" content="https://mysite.ru/images/life.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />При этом og:image:width и og:image:height стоит указать, если параметры изображения отличаются от 1200×630.
Если вы используете какую-либо CMS, то для нее наверняка есть специальный инструмент для SEO. Этот инструмент избавит вас от написания кода и сделает бóльшую часть работы.
Подготовка изображения для превью сайта
Для превью сайта я использую изображения с определенным размером. Помимо этого мои изображения включают в себя текст.
Текст, который я пишу на картинке, может отличаться от текста в заголовке статьи. Этот прием обычно используют ютюберы. Такой подход может обеспечить дополнительный трафик и увеличить количество кликов.
Если вы планируете писать на миниатюре записи текст, то его следует расположить в центре.
Формирование миниатюры страницы сайта
При формировании изображения я ориентируюсь на то, чтобы оно хорошо смотрелось в Facebook, Vkontakte и WhatsApp. За основу берется формат Facebook – 1200×630.
Если изображение подобного формата поместить во Vkontakte, то VK обрежет его снизу:
В большинстве агрегаторов изображение будет обрезано по краям так, что получится квадрат:
Поэтому следует предусмотреть то, что текст должен влезть в эту область.
Чтобы текст не прилипал к краям получившегося квадрата, следует его уменьшить так, чтобы был отступ:
Если все сделать правильно, то получится так:
Когда мы наложим рамки, мы убедимся, что текст везде влезает корректно:
Чтобы вам было удобней делать миниатюру я подготовил файл в формате PSD, для фотошопа. Накладывая рамки на свое изображение вы поймете, соответствует ли оно всем требованиям.
Скачать его можно тут.
После того, как вы сделали все вышеописанные шаги, перейдите в специальный инструмент от Facebook. В поле ввода введите ссылку, нажмите Enter. Далее нажмите кнопку “Fetch New Information”.
Если превью страницы создавалось ранее, то нажмите “Scrap Again”. Это обновит информацию превью страницы сайта, если вы внесли изменения.