общий инструмент / 33

Генератор SEO-метатегов и предпросмотра SERP для Shopify

Создавайте оптимизированные для поиска title и метаописания Shopify с предпросмотром SERP по ширине в пикселях, Liquid и статическим HTML.

Генератор SEO-метатегов и предпросмотра SERP для Shopify: TOEA оценивает ширину заголовка и описания (~600px и ~960px — максимальная ширина на компьютерах), а затем создаёт сниппет Liquid для выбранного типа страницы, который считывает объекты Shopify во время отображения. Панель статического HTML показывает значения, введённые здесь, и не заменяет метаданные всей темы. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория: Веб-инструменты
Запуски: В вашем браузере
Стоимость: Бесплатно · без регистрации
Доступность: Готово к использованию

Данные о странице и мета-данные Shopify

Тип страницы

Заголовок страницы

Название магазина Shopify

Мета-описание

Основное ключевое слово

Цена (только для товара)Используется только для статического превью товара.

Валюта

Предпросмотр карточки в выдаче Google в реальном времени

https://apexcoffeeroasters.myshopify.com› products ›-

Органические зёрна эспрессо ручной работы | Apex Coffee Roasters

US$24.99 • Попробуйте органические зёрна эспрессо небольшой партии, обжаренные на месте, с насыщенными нотами тёмного шоколада и фундука. Закажите свежий кофе онлайн уже сегодня!

Ширина заголовка в пикселях503px / 600px

64 символов ✓ В пределах допустимой длины заголовка

Ширина мета-описания1021px / 960px

167 символов ⚠️ Текст сниппета может быть обрезан

Мета-сниппет Shopify Liquid

{% comment %} Shopify SEO Tags — reusable product output. Render this snippet from layout/theme.liquid <head> and remove overlapping title/meta tags. Values come from Shopify objects, not this preview. {% endcomment %}
{% if request.page_type == 'product' and product %}
{% assign seo_title = page_title | default: product.title %}
{% assign seo_description = page_description | default: product.description | strip_html %}
{% assign seo_og_type = 'product' %}
<title>{{ seo_title | escape }}{% if shop.name != blank and seo_title != shop.name %} | {{ shop.name | escape }}{% endif %}</title>
{% if seo_description != blank %}<meta name="description" content="{{ seo_description | escape }}" />{% endif %}

<meta property="og:site_name" content="{{ shop.name | escape }}" />
<meta property="og:type" content="{{ seo_og_type | escape }}" />
<meta property="og:title" content="{{ seo_title | escape }}" />
<meta property="og:description" content="{{ seo_description | escape }}" />
{% if product.selected_or_first_available_variant.price != blank %}
<meta property="og:price:amount" content="{{ product.selected_or_first_available_variant.price | money_without_currency | strip_html | escape }}" />
<meta property="og:price:currency" content="{{ cart.currency.iso_code | default: shop.currency | escape }}" />
{% endif %}
{% endif %}

Результат статического HTML-превью

<!-- Static preview only; use the Liquid output for theme templates. -->
<title>Органические зёрна эспрессо ручной работы | Apex Coffee Roasters</title>
<meta name="description" content="Попробуйте органические зёрна эспрессо небольшой партии, обжаренные на месте, с насыщенными нотами тёмного шоколада и фундука. Закажите свежий кофе онлайн уже сегодня!" />
<meta property="og:site_name" content="Apex Coffee Roasters" />
<meta property="og:type" content="product" />
<meta property="og:title" content="Органические зёрна эспрессо ручной работы | Apex Coffee Roasters" />
<meta property="og:description" content="Попробуйте органические зёрна эспрессо небольшой партии, обжаренные на месте, с насыщенными нотами тёмного шоколада и фундука. Закажите свежий кофе онлайн уже сегодня!" />
<meta property="og:price:amount" content="24.99" />
<meta property="og:price:currency" content="USD" />

Где Shopify уже добавляет эти теги

Большинство тем, включая Dawn и множество созданных на её основе тем, уже выводят заголовок, метаописание и теги Open Graph из layout/theme.liquid и такого фрагмента, как meta-tags.liquid. Если добавить этот фрагмент тоже, появятся два заголовка и два описания. Закомментируйте или удалите собственные теги темы для типов страниц, которые покрывает фрагмент, затем просмотрите исходный код страницы и убедитесь, что каждого тега остался только один.

Заголовки и описания из админ-панели

В админ-панели Shopify для каждого товара, коллекции и страницы есть раздел поискового сниппета, а Liquid предоставляет эти значения как page_title и page_description. Фрагмент сначала читает их, поэтому поисковые системы видят сниппет, вручную заданный в админ-панели, а пустой сниппет заменяется собственными заголовком и описанием товара. Если позже изменить сниппет, достаточно отредактировать его в админ-панели — менять тему не нужно. Счётчики админ-панели допускают 70 символов в заголовке и 320 в описании, что больше отображаемого на странице результатов, поэтому задавайте сниппет с учётом пиксельных индикаторов здесь.

Описание товара может быть намного длиннее сниппета, и поисковые системы просто обрезают его. После публикации проверьте результат с помощью проверки метатегов.

Как пользоваться

Выберите Product, Collection или Page, затем введите заголовок, название магазина, описание и основное ключевое слово.
Проверьте предпросмотр URL для выбранного типа страницы, цену товара с учётом валюты и индикаторы обрезки по ширине в пикселях.
Сохраните Liquid для повторного использования как сниппет темы и подключите его из layout/theme.liquid либо скопируйте отдельный статический HTML для тестирования.

Конфиденциальность и ограничения

Данные вашего магазина и товаров полностью остаются в браузере.

Часто задаваемые вопросы

Почему заголовки измеряются по ширине в пикселях, а не по количеству символов?

Google обрезает заголовки в SERP по ширине контейнера в пикселях (~600px), а не по точному количеству символов. Широкие символы ('W', 'M') занимают больше места, чем узкие ('i', 'l').

Куда вставить сниппет Liquid?

Сохраните его как сниппет, например snippets/toea-meta-tags.liquid, а затем подключите этот сниппет внутри <head> файла layout/theme.liquid. Во время отображения он считывает объекты товара, коллекции, страницы, магазина и валюты, поэтому значения из предпросмотра не зашиваются в код. Замените пересекающиеся метаданные темы, а не добавляйте второй тег title или description.

Можно ли вставить статический HTML в theme.liquid?

Используйте панель статического HTML только для предпросмотра или контролируемого тестирования. Она содержит значения, введённые в этом инструменте; для рабочей темы используйте Liquid для повторного использования, чтобы каждая страница получала собственные данные Shopify.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен