Данный материал основан на внутреннем регламенте нашей студии. Я заметил, что многие разработчики сайтов и фрилансеры пренебрегают сниппетом и не уделяют ему должного внимания, хотя это базовая вещь. Надеюсь, что эту статью вы сможете использовать и для своей работы, чтобы в интернет-пространстве было больше продуманного для людей людьми.
Данный материал основан на внутреннем регламенте нашей студии. Я заметил, что многие разработчики сайтов и фрилансеры пренебрегают сниппетом и не уделяют ему должного внимания, хотя это базовая вещь. Надеюсь, что эту статью вы сможете использовать и для своей работы, чтобы в интернет-пространстве было больше продуманного для людей людьми.
Мы рассмотрим вопрос комплексно и предоставим методические рекомендации по составлению заголовка и описания, а также по дизайну картинки.
Title (Заголовок)- текст, который отображается на вкладке браузера, в выдаче поисковой системы и как заголовок к ссылке
Description (Описание) — краткое описание содержимого страницы, отображаемое в выдаче поисковой системы и как описание к ссылке
Open Graph — протокол метаданных, который позволяет управлять отображением ссылок на сайте в социальных сетях и мессенджерах
CTA (Call-to-Action) — элемент на веб-странице, который призывает пользователя к определенному действию.
Head — секция HTML-страницы, содержащая метаданные о странице.
Кэш — временное хранилище данных, которое ускоряет доступ к ним в будущем.
Это первое впечатление, которое формируется, когда мы получаем ссылку от друга в мессенджере. Также эти теги влияют на то, как будет выглядеть сайт в выдаче поисковика. От превью зависит кликнем мы на нее или нет. Это формирует наше ожидание того, что мы увидим на странице и именно в этот момент принимаем решение.
Посмотрим ваш сайт и подготовим PDF с SEO-проблемами, замечаниями по дизайну и техническими нюансами.
Наша веб-студия Nocodered существует уже 7 лет и всё это время успешно сотрудничает с российскими и зарубежными бизнесами. При этом мы совсем недавно завели соцсети и начали регулярно постить материалы на площадках. Сегодня мы решили рассказать, как у нас получилось развиваться и привлекать новых клиентов даже без публикации своих кейсов на сайте :)
Читать статьюПо факту, это первое «касание» с сайтом в подразумеваемом Customer Journey, это первое впечатление, которое формируется, когда мы отправляем ссылку другу в мессенджер. Также эти теги влияют на то, как будет выглядеть сайт в выдаче поисковика. От превью зависит кликнем мы на нее или нет. Это формирует наше ожидание того, что мы увидим на странице
Именно 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-316662383265/image.png" />VK
Важно понимать, как обрезают изображения сами соцсети
Размер изображения Facebook Open Graph = 1200 x 630 px
Размер изображения для поста Вконтакте = 537 x 240 px
Вконтакте обрезает изображение по середине (синий квадрат)
Telegram, Instagram и Twitter обрезают изображение по квадрату
Чтобы проверить как отображается ссылка в соцсетях, можно воспользоваться сервисом
После того, как ссылка в первый раз была отправлена в мессенджеры или в соцсети, то информация кэшируется. Чтобы этот кэш очистить и обновить информацию после правок, нужно воспользоваться специальными ссылками для сброса и обновления этих данных
Чтобы очистить кэш воспользуйтесь официальными сервисами:
для Facebook
для Вконтакте
для Telegram
Подробнее в блоге Тильды
<!-- 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-666664343635/Frame_339717.png">
<!-- 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-666664343635/Frame_339717.png">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://static.tildacdn.com/tild3330-3830-4634-b533-666664343635/Frame_339717.png" />На этом всё!
У вас бывали случаи, когда мнения заказчика и дизайнера о созданном решении расходятся? Когда оба считают, что сделали всё возможное, чтобы донести свою точку зрения, но всё равно недопоняли друг друга и не нашли идеальный вариант? У нас такая история приключилась совсем недавно, но заказчиком выступил наш собственный директор. Рассказываем.
Читать статьюПринято думать, что работа – это эдакая каторга, на которую соглашаешься только потому, что не повезло родиться в семье Рокфелера. Мы в Nocodered с этим не согласны, и уверены, что от работы можно получить такое же (а то и большее) удовлетворение, чем от секса. Для этого нужно владеть несколькими приёмами, которыми поделится сооснователь студии, Дамир.
Читать статью