У сучасному eCommerce, де конкуренція зростає щодня, технічна оптимізація інтернет-магазину є критично важливою для успішного SEO-просування. У цій статті ми поділимося досвідом вирішення поширених SEO-проблем, з якими стикаються користувачі Shopify, та надамо практичні рекомендації для збереження та покращення вашої SEO-стратегії та вирішення технічних проблем, які пов’язані з провадженням SEO “технічки”. Це необхідний та важливий етап для інтернет-магазинів, адже саме він дозволяє пришвидшити індексацію вашого ресурсу та збільшити трафік та продажів товарів чи послуг.
Структура URL та роутинг у Shopify
Значення структури URL для SEO
Структура URL відіграє ключову роль у SEO для Shopify. Дружні до користувача (SEF) та логічні URL покращують індексацію та ранжування сторінок у пошукових системах. Однак, стандартний Shopify має обмеження через фіксовані префікси, такі як /products/ та /collections/, /pages/, а також усі службові сторінки, наприклад про нас (/about/), сторінка контактів (/contacts/), доставка та оплата , що позбавляє можливості більш гнучко будувати вашу SEO-стратегію Це особливо актуально, якщо ви мігруєте з інших CMS (наприклад, WordPress, Magento, OpenCart або WooCommerce) та прагнете зберегти наявну структуру URL.
Переваги використання Headless Shopify
Як користувач Shopify, ви можете зіткнутися з необхідністю більшої гнучкості у налаштуванні структури URL. Використання Headless Shopify дозволяє відокремити фронтенд від бекенду, надаючи повний контроль над структурою URL та дизайном сайту. Це відкриває можливість створювати довільні та оптимізовані URL, використовуючи сучасні фреймворки, такі як React.js чи Vue.js. Такий підхід не тільки покращує швидкість завантаження сторінок, але й надає гнучкість у впровадженні передових SEO-практик.
Вирішення поширених SEO-проблем у Shopify
Створення довільної структури посилань
Однією з основних проблем, з якими ми стикнулися в Shopify, є неможливість створення довільних URL у стандартному середовищі Shopify. Для вирішення цієї проблеми ми розробляємо інтернет-магазини Headless commerce на базі Shopify, які дозволяють налаштувати власний роутинг та зберегти SEO-цінність сторінок. Це вимагає додаткових технічних знань та ресурсів, але результати повністю виправдовують зусилля, надаючи можливість повністю контролювати структуру URL та покращувати SEO-показники.
Налаштування 301 редиректів при міграції з інших CMS
Якщо ви мігруєте на Shopify з іншої CMS, важливо правильно налаштувати 301 редиректи для збереження позицій у пошукових системах при зміні URL. У стандартних планах Shopify є обмеження щодо кількості редиректів (до 100 000 макс.). Тут варто зазначити, що не усі додатки дозволяють зробити редирект з існучої вже 200-ої сторінки на іншу, для початку потрібно її видалити, щоб вона стала 404, а потім зробити її 404. Цей спосіб НЕ ДІЄ, якщо мова йде про міграцію ресурсу на Shopify.
Для налаштування 301 редиректів можна використати вже вбудований інструмент у Shopify, який дозволяє вказувати звідки > куди перенаправляти користувача.
Для цього необхідно перейти у адмін. Панель -> Online store > Navigation
Далі перейти у пункт “View redirects”
У цьому меню є кілька опцій – експорт діючих, імпорт карти редіректів, це особливо зручно коли їх багато при міграції з інших CMS, а також можливість додати вручну потрібний вам редирект.
Якщо ви мігруєте з іншої CMS на Shopify, то можна використати готові інструменти міграції, наприклад Cart2Cart. Ми описували раніше досвід міграції на прикладі міграції з Magento на Shopify у статті.
Проблеми з дублюванням контенту
У Shopify товари можуть бути доступні за декількома різними URL-адресами, що призводить до дублювання контенту і може негативно впливати на SEO. Наприклад, базова сторінка продукту має адресу виду /product/…, але той самий продукт може бути доступний через сторінки категорій, такі як /collection/1../product/… або /collection/2../product/…, якщо товар входить до декількох категорій одночасно.
Для вирішення цієї проблеми ми використовували атрибут rel=”canonical”, щоб вказати пошуковим системам основну версію сторінки продукту. Зокрема, ми налаштували канонічні посилання так, щоб з усіх сторінок категорій (/collection/…) канонічна вела на базову сторінку продукту (/product/…). Це дозволяє уникнути дублювання контенту та покращити індексацію сторінок у пошукових системах.
Що стосується атрибута rel=”alternate”, він зазвичай використовується разом із атрибутом hreflang для вказівки на альтернативні мовні версії сторінки.
У цьому випадку важливо не змішувати rel=”canonical” із rel=”alternate”, оскільки їх функції є різними: перший вказує на основну версію сторінки, а другий — на її мовні або регіональні альтернативи.
Автоматизація генерації метатегів у Shopify
Використання штучного інтелекту для оптимізації метатегів
Генерація метатегів вручну для великого каталогу продуктів у Shopify може бути трудомісткою задачею. Чим більше товарів у вашому магазині, тим більше часу потрібно для заповнення важливих тегів — SEO meta title та meta description.
Щоб вирішити цю проблему, ми розробили Metagen AI — додаток для магазинів Shopify, який за допомогою штучного інтелекту автоматично створює оптимізовані метатеги. Використання Metagen AI дозволяє значно зекономити час та покращити видимість ваших сторінок у пошукових системах, що особливо корисно для власників магазинів на Shopify.
1. Використання структурованих даних та Schema.org
Що це і чому важливо:
Структуровані дані (Schema.org) допомагають пошуковим системам краще розуміти вміст вашого сайту. Вони можуть покращити відображення вашого магазину в результатах пошуку, додаючи розширені сніпети, такі як зіркові рейтинги, ціни, наявність товару та інші деталі, що можуть підвищити клікабельність (CTR).
Як впровадити в Shopify:
- Перевірте наявність структурованих даних у вашій темі:
- Багато сучасних тем Shopify вже містять базову підтримку структурованих даних. Перегляньте документацію до вашої теми або зверніться до розробника теми.
- Додавання структурованих даних вручну:
- Доступ до коду теми:
- Увійдіть у панель адміністратора Shopify.
- Перейдіть до Online Store > Themes.
- Виберіть вашу активну тему і натисніть Actions > Edit Code.
- Внесення змін у шаблони:
- Відкрийте файли шаблонів, такі як product.liquid, collection.liquid, article.liquid тощо.
- Додайте код структурованих даних у форматі JSON-LD між тегами <script type=”application/ld+json”> і </script>.
- Доступ до коду теми:
Приклад для сторінки продукту:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “{{ product.title | escape }}”,
“image”: [
{% for image in product.images %}
“{{ image.src | img_url: ‘master’ }}”{% unless forloop.last %},{% endunless %}
{% endfor %}
],
“description”: “{{ product.description | strip_html | escape }}”,
“sku”: “{{ product.sku }}”,
“mpn”: “{{ product.variants.first.barcode }}”,
“brand”: {
“@type”: “Brand”,
“name”: “{{ product.vendor | escape }}”
},
“offers”: {
“@type”: “Offer”,
“url”: “{{ shop.url }}{{ product.url }}”,
“priceCurrency”: “{{ shop.currency }}”,
“price”: “{{ product.price | money_without_currency }}”,
“availability”: “{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}”,
“itemCondition”: “https://schema.org/NewCondition”
}
}
</script>
- Автоматизація додавання структурованих даних:
Величезною перевагою Shopify є офіційний магазин застосунків Shopify Appstore, тому можна скористатись пошуком по запиту “schema та встановити спеціалізовані додатки, які зможуть додати мікророзмітку в автоматичному режимі.
Після внесення змін переконайтеся, що всі поля заповнені коректно та відповідають вимогам Schema.org. Після впровадження структурованих даних перевірте їх за допомогою Rich Results Test від Google: https://search.google.com/test/rich-results, або у валідатору Schema.org (https://validator.schema.org/).
Оптимізація зображень та альтернативні тексти
Оптимізація зображень покращує швидкість завантаження сайту, що позитивно впливає на SEO та користувацький досвід. Альтернативні тексти (alt атрибути) допомагають пошуковим системам зрозуміти зміст зображення.
Основна задача ALT-тегів:
- Збільшення рейтингу сторінки в пошукових системах у режимі пошуку картинок;
- Відображення текстового опису, у випадку коли завантаження зображення неможливе, або занадто повільне.
Для оптимізації зображень та стиснення ми заздалегідь готуємо візуальний контент, але тут може бути кілька сценаріїв, зокрема коли вже на готовому ресурсі потрібно провести оптимізацію.
- Сценарій 1: використання сучасних форматів зображень.
- WebP:
- Shopify автоматично конвертує зображення у формат WebP.
- Якщо у вас куплена тема для Shopify, переконайтеся, що вона підтримує .webp формат.
- WebP:
- Сценарій 2, коли потрібно стиснення та оптимізація зображень вже на діючому ресурсі:
- Перед завантаженням:
- стискаємо зображення за допомогою онлайн-сервісів, наприклад таких як TinyPNG.
- Якщо зображень багато, можна скористатись додатками автоматизації для Shopify, наприклад TinyIMG SEO & Image Optimizer.
- Перед завантаженням:
Щодо додавання alt-тексту: якщо у вас багато товарів і вручну це займе занадто багато часу, то можна також скористатись додатками для масового редагування , наприклад Bulk Image Edit. Такі додатки дозволяють масово додавати / редагувати альтернативні (alt’и) тексти та налаштувати шаблони для автоматичного генерування alt-текстів на основі назви продукту, колекції тощо.
Дієві рекомендації щодо alt-текстів:
- Рекомендуємо описувати зображення згідно з тематикою.
- Включайте релевантні ключові слова, але без спаму.
- Не використовуйте загальні фрази на кшталт “зображення 1”.
Заборонити індексацію Заборона сканування службових сторінок та дублікатів
Що це і чому важливо:
Індексація службових сторінок (наприклад, кошик, сторінки входу, пошуку) та дублікатів контенту може призвести до дублювання та розмивання рейтингу вашого сайту в пошукових системах.
Як налаштувати robots.txt.liquid в Shopify:
- Увійдіть у панель адмін.панель Shopify.
- Перейдіть до Online Store > Themes.
- Оберіть вашу активну тему і натисніть Actions > Edit Code.
- У списку файлів знайдіть або створіть файл robots.txt.liquid у папці Layout або Templates.
Приклад:
{% schema %}
{
“disallow_paths”: [
“/cart”,
“/checkout”,
“/search”,
“/account”,
“/orders”,
“/collections/*filter*”,
“/collections/*sort_by*”
]
}
{% endschema %}
User-agent: *
{% for path in section.settings.disallow_paths %}
Disallow: {{ path }}
{% endfor %}
УВАГА! Якщо ви не впевнені у своїх діях, то краще цей пункт пропустіть, адже можна ЗАБЛОКУВАТИ потрібні сторінки від індексації для Google Bot.
Використання hreflang атрибутів для вказівки мовних та регіональних версій сторінок
Що це і чому важливо:
Для мультимовних інтернет-магазинів важливо, щоб пошукові системи відображали користувачам правильну мовну версію сайту існує тег атрибут hreflang, який вказує пошуковим системам, яка сторінка призначена для якої мови / регіону.
Для провадження hreflang тегів у Shopify можна використовувати готові додатки перекладу, наприклад Langify, популярний додаток для створення багатомовних магазинів. Якщо hreflang потрібно налаштувати вручну, то для цього потрібно:
- відкрити файл theme.liquid або відповідний шаблон.
- У секції <head> додайте hreflang теги для кожної мовної версії.
Наприклад:
<link rel=”alternate” href=”https://youstore.com/” hreflang=”x-default”> – щоб вказати мову сторінки за замовчуванням, для яких не знайшлося альтернативних версій сторінок;
<link rel=”alternate” href=”https://youstore.com/” hreflang=”en”>
<link rel=”alternate” href=”https://youstore.com/ua” hreflang=”uk-UA”>
<link rel=”alternate” href=”https://youstore.com/de” hreflang=”de”>
- Переконайтеся, що посилання ведуть на відповідні мовні версії сторінок.
- Для перевірка можна використати підключений до вашого ресурсу Google Search Console або онлайн-сервіси накшталт https://www.hreflangs.com/ для перевірки правильності hreflang тегів.
Висновки для користувачів Shopify
Технічна оптимізація та збереження SEO-структури є ключовими для успіху вашого інтернет-магазину на Shopify. Використання сучасних технологій, таких як Headless Shopify та інструментів автоматизації, допомагає вирішувати складні SEO-задачі та залишатися конкурентоспроможними на ринку. Ми рекомендуємо користувачам Shopify ретельно планувати технічні зміни та впроваджувати рішення на базі Headless, щоб сприяти зростанню та бути незалежним від стандартних обмежень, які є у Shopify. Якщо мова йде про створення інтернет-магазину з нуля, то не треба нехтувати технічним завданням від SEO агенцій, щоб можна було одразу розробляти ваш ресурс з врахування SEO стратегії, і не втрачати позиції у пошукових системах, якщо необхідно буде вносити зміни.
