Как долгосрочный продавец Shopify, я думал, что у меня есть основы SEO под контролем. Я оптимизирую заголовки продуктов, пишу уникальные описания и усердно работаю над своими коллекциями. Поэтому представьте мой шок, когда я недавно обнаружил, что все четыре моих магазина Shopify не имели самого важного on-page SEO элемента на своих главных страницах: H1 тега.
Я провел два разочаровывающих часа, изучая форумы Сообщества Shopify, пробуя различные "быстрые исправления", которые никогда не работали должным образом. Вот почему я пишу это руководство. После множества проб и ошибок я разработал безупречный двухэтапный метод, который аккуратно решил проблему во всех моих магазинах, которые используют популярные бесплатные темы, такие как Ride, Taste и Shapes.
Это руководство проведет вас через мой точный процесс. Мы выясним, почему эта проблема существует, почему вы не должны просто копировать то, что делают другие сайты, и, наконец, реализуем идеальное решение профессионального уровня.
Быстрая заметка: Это руководство сосредоточено специально на главной странице. Большинство тем Shopify правильно назначают H1 теги вашим заголовкам продуктов, заголовкам блог-постов и заголовкам коллекций. Главная страница - это та, которая почти всегда забывается.
Шаг 1: Диагностика – Куда Делся Мой H1 Тег?
Первое, что я узнал, это то, что в большинстве тем Shopify проблема не в том, что у вас нет H1 тега. Проблема в том, что ваш H1 тег тратится на логотип вашего магазина.
Это плохо для SEO. Ваш H1 главной страницы должен быть описательным предложением с вашими основными ключевыми словами, рассказывающим Google, о чем весь ваш магазин. Ваш логотип не может этого сделать. Вот как вы можете проверить свой собственный сайт менее чем за минуту.
Минутная Диагностика:
- Перейдите на главную страницу вашего магазина.
- Щелкните правой кнопкой мыши прямо на логотипе вашего магазина в заголовке.
- Выберите "Исследовать элемент" из выпадающего меню.
- Инструменты разработчика вашего браузера откроются с выделенной строкой кода. Посмотрите на эту строку и прямо над ней. Видите ли вы её обернутой в теги
<h1>?
Диагностика H1 Тега в Инструментах Разработчика
Если вы видите свой логотип обернутым в <h1>, у вас та же проблема, что была у меня. Наша миссия - сначала "освободить" этот H1 тег от логотипа, затем правильно его использовать.
Конечно, вы также можете установить расширение браузера для проверки присутствия и правильной работы вашего H1 тега. Вот так:
Проверка SEO Расширения
Быстрое Отступление: Почему Вы Не Должны Просто Копировать Другие Сайты
Во время моего исследования я нашел другие веб-сайты, которые, казалось, решили эту проблему. Но когда я проверил их код, я понял, что они делают точно такую же ошибку: их H1 все еще был на их логотипе! Ps: Это на самом деле известный бренд DTC. Я обнаружил их через официальные рекомендации Google и Shopify Plus, и я изучаю их маркетинг с тех пор. Вы можете видеть, что их логотип используется как H1 тег, что является ленивым и совершенно неправильным.
Пример H1 Логотипа Бренда
Использование логотипа как H1 предоставляет очень мало информационной ценности поисковым системам и AI-краулерам, таким как Google, ChatGPT или Perplexity. H1 действует как слоган вашего веб-сайта—это должно быть ясное, краткое предложение, которое немедленно говорит краулерам, о чем ваш сайт. Если только вы не Nike, Coca-Cola или Disney—бренды, которые не нуждаются в представлении—это упущенная возможность.
Лучшие Практики H1 Тега
В результате многие из их страниц продуктов и коллекций в итоге повторно использовали H1 главной страницы, что может серьезно вводить в заблуждение Google и AI-краулеры, такие как ChatGPT. Это напрямую влияет на то, как оценивается качество сайта. Это имеет значительное негативное влияние на AI-видимость их веб-сайта. Смотрите следующий скриншот: у них нет H1 тега на очень важной странице коллекции!
Отсутствующий H1 Страница Коллекции
Это критически важный урок: не копируйте просто код другого сайта без понимания SEO принципа за ним. Использование H1 тега для вашего логотипа - это устаревшая практика, потому что:
- Он не богат ключевыми словами. Он содержит только название вашего бренда, а не то, что вы продаете.
- Он не специфичен для страницы. Логотип H1 появляется на каждой отдельной странице, говоря Google, что ваша страница "О нас" и конкретная страница продукта имеют одинаковый заголовок. Это большая SEO ошибка.
Нам нужно лучшее, более профессиональное решение.
Окончательное Исправление: Идеальный Баланс SEO и Дизайна
Наша цель проста:
- Удалить
<h1> с логотипа.
- Добавить новый, богатый ключевыми словами
<h1> на главную страницу, который невидим для пользователей, но совершенно видим для Google, ChatGPT и других AI-краулеров.
Философия: Мы будем использовать специальный CSS класс для визуального сокрытия нашего нового H1 тега. Важно не использовать display: none;, так как Google может это проигнорировать. Вместо этого мы используем современную, дружественную к доступности технику, которая совершенно безопасна для SEO.
Двухэтапный Мастер-План
Шаг 1: Предварительное Условие - Исправление header.liquid
Сначала нам нужно сказать теме перестать использовать <h1> для логотипа.
- В вашем Shopify Admin перейдите в Интернет-магазин > Темы. На вашей текущей теме нажмите ... и затем Редактировать код.
- Откройте папку Sections и нажмите на файл header.liquid.
- Найдите в файле (Ctrl+F или Cmd+F)
<h1. Вы ищете код, который обертывает ваш логотип.
- Ваша задача - изменить открывающий тег
<h1> на <div> и закрывающий тег </h1> на </div>. Возможно, вам нужно сделать это в одном или двух местах в файле.
ДО
Заголовок До Исправления
ПОСЛЕ: h1 в div
Заголовок После Исправления
Специальная заметка: В моих темах Taste, Ride и Shapes этот тег <h1> часто находился внутри оператора {% if template.name == 'index' %}. Это нормально. Исправление такое же: измените h1 на div везде, где вы найдете его обертывающим логотип.
- Нажмите Сохранить. H1 тег теперь свободен.
Шаг 2: Реализация - Изменение theme.liquid
Здесь мы добавляем наш новый, мощный H1. Этот шаг включает редактирование самого важного файла в вашей теме, поэтому, пожалуйста, будьте осторожны.
- Сначала сделайте резервную копию! Перейдите на страницу Темы, нажмите ... на вашей теме и выберите Дублировать. Это создает безопасную копию, которую вы можете восстановить, если что-то пойдет не так.
- В редакторе кода откройте папку Layout и нажмите на theme.liquid.
- Найдите открывающий тег
<body> около верха файла. Он может выглядеть как <body class="gradient"> или что-то подобное.
- Вставьте следующий код на новой строке прямо под открывающим тегом
<body>.
Реализация Theme Liquid
Код для Вставки:
{%- if template.name == 'index' or template == 'index' -%}
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
</style>
<h1 class="visually-hidden">Ваш Потрясающий Заголовок Главной Страницы - Основные Ключевые Слова Здесь</h1>
{%- endif -%}
- Самая Важная Часть: Измените текст "Ваш Потрясающий Заголовок Главной Страницы - Основные Ключевые Слова Здесь" на ваш фактический, желаемый H1. Например: "Рукодельные Кожаные Сумки и Минималистичные Кошельки – Название Вашего Бренда".
- Нажмите Сохранить.
Ваш План Действий и Заключительные Мысли
От первоначального шока открытия до финального, идеального решения, это путешествие преподало мне ценный урок. Оптимизация вашего магазина касается понимания принципов, а не только применения быстрых исправлений.
Вот ваш финальный чек-лист:
- Сначала Диагностируйте: Всегда проверяйте логотип вашего собственного сайта инструментом "Исследовать элемент", чтобы увидеть, обернут ли он в
<h1>.
- Логотип Не H1: Ваш логотип принадлежит в
<div>, а не в теге заголовка. Исправьте это в header.liquid.
- Используйте Визуально Скрытый Метод: Это профессиональный стандарт для добавления H1 без влияния на ваш дизайн.
- Освойте Рабочий Процесс: Процесс "Исправить header.liquid -> Реализовать в theme.liquid" - это самый надежный способ решить это навсегда.
Я надеюсь, что это подробное руководство сэкономит вам два часа разочарования, которые это стоило мне. Правильная настройка вашего H1 тега главной страницы - это большой шаг вперед в вашем SEO путешествии.
Удачи, и не стесняйтесь делиться своими успехами в комментариях!
