Разъёб.

ϟ  «Лига анонимности»

Мы рассмотрим вопрос комплексно и предоставим методические рекомендации по составлению заголовка и описания, а также по дизайну картинки. Данный материал основан на внутреннем регламенте нашей студии

Термины в статье

• Title (Заголовок) - текст, который отображается на вкладке браузера, в выдаче поисковой системы и как заголовок к ссылке

• Description (Описание) — краткое описание содержимого страницы, отображаемое в выдаче поисковой системы и как описание к ссылке

• Open Graph — протокол метаданных, который позволяет управлять отображением ссылок на сайте в социальных сетях и мессенджерах

• CTA (Call-to-Action) — элемент на веб-странице, который призывает пользователя к определенному действию.

• Head — секция HTML-страницы, содержащая метаданные о странице.

• Кэш — временное хранилище данных, которое ускоряет доступ к ним в будущем.

То как выглядит ссылка, это первое «касание» с сайтом в подразумеваемом Customer Journey

Это первое впечатление, которое формируется, когда мы получаем ссылку от друга в мессенджере. Также эти теги влияют на то, как будет выглядеть сайт в выдаче поисковика. От превью зависит кликнем мы на нее или нет. Это формирует наше ожидание того, что мы увидим на странице и именно в этот момент принимаем решение.

Плохой пример сниппета в мессенджерах

Текст и описание, вопросов нет, но картинка обрезалась

Отсутствует картинка, непонятный текст в описании

Хороший пример сниппета в мессенджерах

Понятные заголовок и описания, большая картинка

Nike. Just Do It

Ссылка это первое «касание», это важно?

По факту, это первое «касание» с сайтом в подразумеваемом Customer Journey, это первое впечатление, которое формируется, когда мы отправляем ссылку другу в мессенджер. Также эти теги влияют на то, как будет выглядеть сайт в выдаче поисковика. От превью зависит кликнем мы на нее или нет. Это формирует наше ожидание того, что мы увидим на странице

Выдача в Google

Выдача в Яндекс

Сниппет в Telegram

Title сообщает поисковым роботам, о чем ваша страница

Именно Title сообщает поисковым роботам, о чем ваша страница, и помогает им «оценить» ее соответствие поисковому запросу пользователя.

Чтобы сделать правильный Title, важно учитывать, как он отобразится:

• В результатах поиска как заголовок сниппета

• В соцсетях и мессенджерах

• Во вкладке браузера

Подумайте, как среди открытых вкладок, пользователю будет проще найти именно ваш сайт

Как прописать Title с максимальной пользой

Каждая страница должна иметь свой уникальный Title

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

Title должен соответствовать содержимому страницы по смыслу

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

Длину Title рекомендуется ограничить 60-70 символами.

Длинные тайтлы обрезаются поисковиками до 60-70 символов с пробелами. Это 600 пикселей (ширина заголовка в выдаче). Поэтому лучше учитывать этот размер при составлении тайтла, иначе пользователи могут увидеть в выдаче неполный заголовок.

Лучше расположить важные для вас ключевые слова в начало тега, а бренд — в конец

Бренд лучше размещать в конце тайтла. Например, «Франшиза | Drinkpoint», «Политика конфиденциальности | Nocodered»

Как прописать Description с максимальной пользой

У каждой страницы вашего сайта должен быть уникальный Description.

Таким образом у вас появляется шанс «предложить» нужный текст для описания и повлиять на кликабельность сниппета, если поисковик не найдет для него более релевантного контента.

Длина Description должна быть не более 160 (для Google)

Поисковики сократят описания до приемлемой для них длины: 150-160 символов – для Google. Поэтому нет смысла прописывать их длиннее этого размера.

Кратко расскажите о реальном содержимом страницы в 2-3 предложениях

Эта информация должна дополнять суть сказанного в тайтл. Именно описание может убедить пользователя перейти по ссылке на сайт — тут вам в помощь CTA (призывы к действию) и ваша фантазия. Главное, описание должно быть лаконичным и четким, чтобы каждый мог понять, какую информацию получит, зайдя на данную страницу.

Вытащить самую суть страницы в описание

Например, если это страница мероприятия, то важно указать: место проведения, дату и время. Если это салон красоты, то адрес, режим работы и телефон.

Картинка для ссылки

Картинка должна быть оформлена в соответствии с требованиями бренда, должна быть либо сделана единой для всех страниц, либо подбираться отдельно под каждую страницу. Например, если это страница продукта, то это должна быть картинка с этим продуктом.

Как отображаются сниппеты в разных соцсетях и мессенджерах?

Telegram

По умолчанию телеграм обрабатывает ссылку и отображает маленькую квадратную картинку (если ваш сайт на Тильде)

Можно сделать так, чтобы телеграм отображал картинку полностью, для этого необходимо в Head страницы добавить мета теги:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://static.tildacdn.com/tild3732-6130-4765-b431-31666238..." />

WhatsApp

VK

Instagram

Методические рекомендации по дизайну картинки

Важно понимать, как обрезают изображения сами соцсети

• Размер изображения Facebook Open Graph = 1200 x 630 px

• Размер изображения для поста Вконтакте = 537 x 240 px

• Вконтакте обрезает изображение по середине (синий квадрат)

• Telegram, Instagram и Twitter обрезают изображение по квадрату

Весь полезный контент, должен быть вписан в прямоугольник 630х536 (зеленый)

Тесты и отладка

Чтобы проверить как отображается ссылка в соцсетях, можно воспользоваться сервисом

OpenGraph — Preview Social Media Share and Generate Metatags

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

Чтобы очистить кэш воспользуйтесь официальными сервисами:

для Facebook

открыть ссылку

для Вконтакте

открыть ссылку в новом окне

для Telegram

открыть бота

Подробнее в блоге Тильды

http://help-ru. tilda. ws/preview-update

Для разработчиков

<!-- HTML Meta Tags -->
<title>Веб-студия Nocodered</title>
<meta name="description" content="Дизайн и разработка веб-приложений, сайтов и сервисов для бизнеса">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://nocodered.ru">
<meta property="og:type" content="website">
<meta property="og:title" content="Веб-студия Nocodered">
<meta property="og:description" content="Дизайн и разработка веб-приложений, сайтов и сервисов для бизнеса">
<meta property="og:image" content="https://static.tildacdn.com/tild3330-3830-4634-b533-66666434...">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="nocodered.ru">
<meta property="twitter:url" content="https://nocodered.ru">
<meta name="twitter:title" content="Веб-студия Nocodered">
<meta name="twitter:description" content="Дизайн и разработка веб-приложений, сайтов и сервисов для бизнеса">
<meta name="twitter:image" content="https://static.tildacdn.com/tild3330-3830-4634-b533-66666434...">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://static.tildacdn.com/tild3330-3830-4634-b533-66666434..." />

На этом всё! Пишите в комментарии ваши вопросы, а также присылайте примеры непотребных сниппетов: )

Всем привет!

Мне так в кайф тут делиться музлом)
Хз почему)
Только что записали и сняли сниппет.