SEO pre Shopify: čo rieši platforma sama a do čoho treba zasiahnuť
Shopify vyrieši veľkú časť technického SEO bez zásahu do kódu, lenže to zvyšné sa nedá doladiť v administrácii, pretože titulok, meta popis a kanonická adresa vznikajú v šablóne témy. Tento článok prechádza miesta, kde sa SEO e-shopu na Shopify skutočne rozhoduje: metadáta v súbore theme.liquid, objekt canonical_url, varianty produktov s parametrom v adrese, šablónu robots.txt.liquid a automatické tagy hreflang pri viacerých trhoch. Všetko vychádza z dokumentácie Shopify pre témy a z dokumentácie Google Search Central, takže pri každom kroku viete, čo platforma robí sama a čo od vás ešte čaká.
1. Čo Shopify rieši sám a kde sa práca začína
Pri hostovanej platforme sa SEO práca prirodzene presúva inam než pri vlastnom riešení, lebo časť technických základov je hotová ešte pred prvým predaným kusom. Súbor robots.txt generuje Shopify predvolene a dokumentácia k šablóne to hovorí priamo, keďže uvádza, že predvolený súbor funguje pre väčšinu obchodov, a preto šablóna robots.txt.liquid nie je v žiadnej téme zahrnutá (robots.txt.liquid). Podobne to platí pri viacjazyčných obchodoch, kde Shopify pridáva tagy hreflang automaticky.
Zvyšok však zostáva na téme a na obsahu, takže bez otvorenia kódu sa vážnejšia oprava nedá dotiahnuť. Dokumentácia k metadátam pre témy vymenúva tri veci, ktoré si má téma pokryť sama, a sú to titulok stránky, meta popis a kanonická adresa, pričom kód k nim má byť v prvku head (Add SEO metadata to your theme). Práve toto je hranica, ktorú si treba pri prevzatom e-shope overiť najskôr, pretože téma z tretej ruky môže mať niektorý z týchto prvkov chybný alebo úplne chýbajúci.
| Prvok | Kto to rieši | Kde to skontrolujete |
|---|---|---|
| robots.txt | Shopify predvolene | adresa /robots.txt, šablóna robots.txt.liquid v téme |
| Titulok a meta popis | téma cez objekty page_title a page_description | súbor layout/theme.liquid, prvok head |
| Kanonická adresa | téma cez objekt canonical_url | zdrojový kód stránky, prvok link s hodnotou canonical |
| Tagy hreflang | Shopify pri použití Markets | nastavenia obchodu, sekcia s možnosťou automatické tagy vypnúť |
| Štruktúrované údaje produktov | téma, prípadne aplikácia | test rozšírených výsledkov a report o produktoch v Search Console |
Rozdelenie zodpovednosti v tabuľke vysvetľuje, prečo dva e-shopy na tej istej platforme dokážu mať úplne odlišnú technickú kvalitu. Platforma je rovnaká, no téma a jej úpravy sa líšia, takže pri audite treba vždy pozrieť na výsledné HTML a nie na to, čo Shopify sľubuje v základnom nastavení. Všeobecný rámec toho, čo si má e-shop skontrolovať bez ohľadu na platformu, rozoberá článok o SEO pre e-shop.
2. Metadáta vznikajú v theme.liquid, nie v administrácii
Titulok, ktorý Google zobrazí, nie je presne to, čo zadáte do poľa v administrácii, pretože téma k nemu ešte niečo pridá. Ukážkový kód v dokumentácii Shopify skladá prvok title z objektu page_title a dopĺňa ho o názov filtrovaného tagu v tvare tagged s výpisom tagov, o číslo strany pri stránkovaní a o názov obchodu, ak ho titulok ešte neobsahuje (Add SEO metadata to your theme). Vďaka tomu vzniká pri filtrovaných a stránkovaných výpisoch odlišný titulok automaticky, čo je dobrá správa, lenže znamená to aj to, že dĺžka titulku v administrácii nie je konečná dĺžka titulku vo výsledkoch.
Meta popis vychádza z objektu page_description a téma ho podľa ukážky vypisuje len vtedy, keď je vyplnený, takže pri prázdnom poli prvok s popisom v kóde jednoducho nie je. Kategórie a produkty bez vyplneného popisu tak nechávajú rozhodnutie o zobrazenom texte na Googli, čo pri kategóriách s dlhým zoznamom parametrov dopadne rôzne.
💡 Najprv si prečítajte výsledné HTML. Tri prvky, ktoré dokumentácia požaduje v prvku head, sa dajú overiť za pár minút vo zdrojovom kóde ľubovoľného produktu, ľubovoľnej kategórie a domovskej stránky. Ak niektorý z nich chýba práve na kategóriách, chyba je v šablóne a nie v obsahu.
Pri prevzatej téme sa vypláca skontrolovať aj to, či sa metadáta nevypisujú dvakrát, čo sa stáva po inštalácii aplikácie, ktorá do hlavičky pridáva vlastné tagy. Dva rôzne titulky alebo dva rôzne popisy v jednom dokumente nie sú technicky neplatné, no Google si z nich vyberie sám a vy stratíte kontrolu nad tým, čo sa vo výsledkoch objaví.
3. Kanonická adresa a objekt canonical_url
Kanonická adresa je na e-shope dôležitejšia než na obsahovom webe, pretože ten istý produkt býva dostupný z viacerých ciest a filtrov. Shopify na to ponúka globálny objekt canonical_url, ktorý dokumentácia opisuje ako kanonickú adresu aktuálnej stránky, a téma ho vypisuje do prvku link s atribútom rel a hodnotou canonical (canonical_url). Ak teda v hlavičke produktovej stránky tento prvok nevidíte, téma ho nevypisuje a rozhodnutie o kanonickej adrese prechádza celé na Google.
Tu sa vypláca vedieť, ako s týmto signálom Google skutočne zaobchádza. Dokumentácia Google Search Central kanonizáciu definuje ako proces výberu reprezentatívnej adresy pre daný obsah a k faktorom, ktoré doň vstupujú, radí protokol HTTP alebo HTTPS, presmerovania, prítomnosť adresy v mape stránok a anotácie rel s hodnotou canonical. Rovnaký dokument dodáva vetu, ktorú je pri e-shopoch dobré mať na pamäti, keďže uvádza, že svoju preferenciu Googlu naznačiť môžete, no Google si môže vybrať inú stránku ako kanonickú, a že naznačenie kanonickej preferencie je nápoveda, nie pravidlo (What is URL Canonicalization).
Ten istý dokument zároveň upokojuje pri obave, ktorá e-shopy stresuje najviac, lebo hovorí, že istá miera duplicitného obsahu na webe je normálna a nie je porušením pravidiel Googlu proti spamu. Problém teda nie je v tom, že sa jeden produkt dá otvoriť z dvoch ciest, ale v tom, keď sa signály rozdelia medzi viacero adries a žiadna z nich nezosilní. Podrobnejšie sa téme venuje článok o duplicitnom obsahu a kanonizácii.
4. Varianty produktov a adresa s parametrom
Farby a veľkosti sú na Shopify varianty jedného produktu a v adrese sa prepínajú parametrom, takže z pohľadu vyhľadávača ide o jednu stránku s premenlivým obsahom. Google má na tento model vlastné pravidlá a opisuje ho ako jednostránkový web, kde sú všetky varianty voliteľné na jednej stránke bez načítania novej, zvyčajne práve pomocou parametrov v adrese (Product variant structured data).
Z tohto dokumentu vyplývajú dve podmienky, ktoré sa na e-shopoch často nesplnia. Prvá hovorí, že pri jednostránkovom riešení musí pre celú skupinu variantov existovať iba jedna kanonická adresa, pričom je to zvyčajne základná adresa vedúca na stránku bez predvoleného variantu. Druhá požaduje, aby web dokázal predvoliť každý variant priamo odlišnou adresou s parametrami, čo Googlu umožní každý variant prehľadať a rozpoznať, a to vrátane zobrazenia správneho obrázka, ceny a dostupnosti aj možnosti pridať daný variant do košíka.
Prakticky to pri Shopify znamená dve kontroly. Kanonická adresa produktu má smerovať na produkt bez parametra variantu, aby sa signály nerozpadli na desiatky takmer rovnakých adries, no zároveň musí odkaz s predvoleným variantom naozaj fungovať a zobraziť jeho cenu a obrázok. Druhá časť sa dá overiť ručne tak, že si adresu s parametrom otvoríte v anonymnom okne a pozriete, či stránka predvolí ten variant, ktorý má.
K samotnému značkovaniu potom vedie dokumentácia Googlu k štruktúrovaným údajom pre e-shopy, ktorá medzi typmi relevantnými pre elektronický obchod uvádza typy Product a ProductGroup a odkazuje na samostatnú dokumentáciu pre varianty produktov (Structured Data for Ecommerce Sites). Či ich téma vypisuje správne, ukáže test rozšírených výsledkov od Googlu a report o produktoch v Search Console, takže na túto kontrolu netreba žiadnu platenú aplikáciu.
5. Kedy zasahovať do šablóny robots.txt.liquid
Predvolený súbor robots.txt od Shopify pokrýva bežné potreby a dokumentácia k šablóne to uvádza priamo, keď hovorí, že Shopify generuje súbor robots.txt predvolene, funguje pre väčšinu obchodov, a preto šablóna nie je súčasťou tém. Skupina pravidiel má pritom tri hlavné časti, teda používateľského agenta, ktorý určuje, na ktorého robota sa pravidlá vzťahujú, samotné pravidlá s konkrétnymi adresami a voliteľnú adresu mapy stránok (Customize robots.txt).
Ak sa do šablóny pustíte, platí jedno odporúčanie, ktoré vám o dva roky ušetrí problémy. Dokumentácia uvádza, že hoci sa celý obsah šablóny dá nahradiť pravidlami v čistom texte, dôrazne sa odporúča používať dodané objekty Liquid vždy, keď je to možné, pretože predvolené pravidlá sa pravidelne aktualizujú, aby boli stále uplatnené odporúčané postupy pre SEO. Predvolené skupiny pravidiel sprístupňuje objekt robots, ktorý dokumentácia opisuje ako predvolené skupiny pravidiel pre súbor robots.txt (robots). Šablóna navyše nesmie byť vo formáte JSON a musí sa volať robots.txt.liquid.
Typickým dôvodom na úpravu je parameter, ktorý plodí tisíce takmer rovnakých adries, a dokumentácia na to dáva aj príklad, keď ukazuje, ako všetkým robotom zakázať prístup k stránkam s parametrom q v adrese. Druhým dôvodom sú viaceré domény pre rôzne trhy, kde sa dajú vytvoriť pravidlá špecifické pre hostiteľa pomocou objektu request.host, no dokumentácia zároveň žiada, aby ste ich zaviedli len pri použití Shopify Markets a len vtedy, keď máte odlišné domény alebo subdomény, ktoré vyžadujú odlišné správanie pri prehľadávaní.
Zákaz prehľadávania však nie je nástroj na odstránenie stránky z výsledkov a pri Shopify to platí rovnako ako inde, takže pri parametroch filtrov treba najprv rozhodnúť, či sa majú vôbec indexovať. Zakázaná adresa sa totiž môže vo výsledkoch objaviť naďalej, len bez toho, aby Google poznal jej obsah.
6. Viac trhov a jazykov: hreflang, podadresáre a mena
Pri viacerých jazykoch alebo krajinách rieši Shopify tú časť, ktorá inde bolí najviac. Dokumentácia uvádza, že ak obchod používa Shopify Markets, tagy hreflang pridáva Shopify do témy automaticky prostredníctvom objektu content_for_header, ktorý téma vykresľuje v prvku head súboru layout/theme.liquid, pričom tieto tagy sa samy aktualizujú pri zmene domén alebo jazykov trhu a zostávajú v súlade s kanonickou adresou každej stránky, aby vyhľadávače chápali lokalizované adresy ako súvisiace verzie tej istej stránky (Use hreflang tags in your theme).
Práve preto sa tu najčastejšie škodí v dobrom úmysle. Ten istý dokument varuje, že pridanie vlastných tagov navrch automatických môže vytvoriť duplicitné alebo protichodné anotácie, ktoré môžu poškodiť pozície obchodu vo vyhľadávaní. Ak teda téma alebo aplikácia už tagy hreflang vypisuje, automatické tagy sa dajú vypnúť v nastaveniach obchodu v sekcii pre sociálne siete a SEO, aby ich vypisoval jediný zdroj. Širšie súvislosti a syntax rozoberá článok o hreflang a medzinárodnom SEO.
Adresy lokalizovaných verzií vznikajú automaticky a ich tvar nie je náhodný. Dokumentácia k viacerým menám a jazykom uvádza, že pri publikovaní ďalšieho jazyka na doméne vytvorí Shopify preň cestu v adrese, takže pri obchode na doméne shop.com a publikovanom francúzskom jazyku pribudne adresa shop.com/fr, a pri vytvorení nového trhu vznikne cesta ako shop.com/en-ca (Support multiple currencies and languages).
Z premenlivej štruktúry adries vyplýva odporúčanie, ktoré sa dotýka aj bežných odkazov v téme. Dokumentácia žiada nezapisovať adresy natvrdo, pretože ak je adresa ako /cart zapísaná v odkaze alebo v požiadavke Ajax natvrdo, návštevníka prehliadajúceho iný jazyk alebo trh to vráti na predvolené hodnoty domény a môže uvidieť nesprávny jazyk alebo menu. Namiesto toho sa v Liquid odporúča stavať adresy z atribútu url príslušných objektov alebo z objektu routes, kým v JavaScripte sa vychádza z hodnoty window.Shopify.routes.root, ktorá vždy končí lomkou a pri kanadskom trhu môže vrátiť napríklad podadresár pre daný trh.
Zostáva detail, ktorý pri viacvalutovom e-shope rozhoduje o tom, či Google zobrazí správnu cenu. Dokumentácia pri štruktúrovaných údajoch pre produkty žiada, aby vlastnosť priceCurrency odrážala menu košíka a nie menu obchodu, čo je presne tá zámena, ktorá vedie k tomu, že návštevník z inej krajiny vidí vo výsledku cenu v cudzej mene. Pri kontrole preto neskúšajte len domovskú menu, ale prepnite trh a pozrite sa na výsledné štruktúrované údaje znovu.
Časté otázky
Kde sa na Shopify nastavuje kanonická adresa?
V šablóne témy, nie v administrácii. Shopify poskytuje globálny objekt canonical_url, ktorý dokumentácia opisuje ako kanonickú adresu aktuálnej stránky, a téma ho vypisuje do prvku link s hodnotou canonical v prvku head. Dokumentácia k metadátam pre témy pritom kanonickú adresu uvádza ako jeden z troch prvkov, ktoré má téma pokryť, takže ak ju v zdrojovom kóde produktu nevidíte, chyba je v šablóne.
Prečo Google zobrazuje inú adresu, než mám v canonical?
Pretože kanonická adresa je pre Google signál a nie príkaz. Dokumentácia Google Search Central k tomu uvádza, že svoju preferenciu naznačiť môžete, no Google si môže z rôznych dôvodov vybrať inú stránku ako kanonickú, a že naznačenie kanonickej preferencie je nápoveda, nie pravidlo. Do voľby vstupujú aj ďalšie faktory, konkrétne protokol HTTP alebo HTTPS, presmerovania a prítomnosť adresy v mape stránok.
Mám na Shopify upravovať súbor robots.txt?
Vo väčšine prípadov netreba. Dokumentácia k šablóne robots.txt.liquid uvádza, že Shopify generuje predvolený súbor, ktorý funguje pre väčšinu obchodov, a preto šablóna nie je v žiadnej téme zahrnutá. Ak ju pridáte, dôrazne sa odporúča používať dodané objekty Liquid vždy, keď je to možné, keďže predvolené pravidlá sa pravidelne aktualizujú, aby boli stále uplatnené odporúčané postupy pre SEO.
Ako riešiť varianty produktov, aby im Google rozumel?
Google model s prepínaním variantov na jednej stránke pozná a opisuje ho ako jednostránkový web, kde sú varianty voliteľné bez načítania novej stránky, zvyčajne pomocou parametrov v adrese. Požaduje pri ňom dve veci: pre celú skupinu variantov má existovať iba jedna kanonická adresa, zvyčajne základná adresa bez predvoleného variantu, a web musí dokázať predvoliť každý variant odlišnou adresou s parametrami vrátane správneho obrázka, ceny a dostupnosti.
Prečo návštevník z inej krajiny vidí nesprávnu menu?
Buď sú v téme adresy zapísané natvrdo, alebo štruktúrované údaje vypisujú menu obchodu. Dokumentácia Shopify k viacerým menám a jazykom žiada, aby vlastnosť priceCurrency odrážala menu košíka a nie menu obchodu, a zároveň upozorňuje, že natvrdo zapísaná adresa ako /cart vráti návštevníka na predvolené hodnoty domény, takže môže uvidieť nesprávny jazyk alebo menu.
Treba pri viacjazyčnom Shopify e-shope dopĺňať tagy hreflang ručne?
Pri Shopify Markets nie. Dokumentácia uvádza, že tagy pridáva Shopify automaticky cez objekt content_for_header, samy sa aktualizujú pri zmene domén alebo jazykov a zostávajú v súlade s kanonickou adresou každej stránky. Zároveň varuje, že pridanie vlastných tagov navrch automatických môže vytvoriť duplicitné alebo protichodné anotácie, ktoré môžu poškodiť pozície obchodu, takže vypisovať ich má jediný zdroj.