Рубрики
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.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 обрежет его снизу:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Связанные записи