Рубрики
SEO

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

Когда вы делитесь ссылкой в соцсетях или мессенджере, она преобразуется в сайта. Это очень удобно, так как такую ссылку легко отличить среди прочих. К тому же сразу ясно – о чем речь в статье по ссылке.

Как правильно подготовить превью сайта?

Сперва стоит написать статью, затем проработать 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." />
<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 обрежет его снизу:

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

В большинстве агрегаторов изображение будет обрезано по краям так, что получится квадрат:

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

Поэтому следует предусмотреть то, что текст должен влезть в эту область.

Чтобы текст не прилипал к краям получившегося квадрата, следует его уменьшить так, чтобы был отступ:

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

Если все сделать правильно, то получится так:

Как изменить информацию на превью сайта?
страницы сайта в Facebook
Как изменить информацию на превью сайта?
миниатюра страницы сайта в Vkontakte
Как изменить информацию на превью сайта?
миниатюра страницы сайта в Google

Когда мы наложим рамки, мы убедимся, что текст везде влезает корректно:

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

Чтобы вам было удобней делать миниатюру я подготовил файл в формате PSD, для фотошопа. Накладывая рамки на свое изображение вы поймете, соответствует ли оно всем требованиям.

Скачать его можно тут.

После того, как вы сделали все вышеописанные шаги, перейдите в специальный инструмент от Facebook. В поле ввода введите ссылку, нажмите Enter. Далее нажмите кнопку “Fetch Information”.

Если превью страницы создавалось ранее, то нажмите “Scrap Again”. Это обновит информацию превью страницы сайта, если вы внесли изменения.