FluxPrep je rakúska firma na prípravu tovaru pre Amazon FBA: označuje, kontroluje a pripravuje tovar pred odoslaním do skladov Amazonu. Web beží v angličtine a nemčine a práve jazykové nastavenie je nosnou časťou projektu: výskum kľúčových slov osobitne pre každý jazyk, recipročný hreflang a kanonické adresy, ktoré držia obe verzie mimo cesty jedna druhej. Navrhli sme ho vo Figme a postavili v Astro.
V skratke
Východiskový stav
FluxPrep je rakúska prevádzka na prípravu tovaru pre Amazon FBA: prijíma tovar, kontroluje ho a označuje a pripravuje ho pred odoslaním do Amazon fulfillmentu. Predávať to online znamená vysvetliť skladový proces niekomu, kto sklad nikdy neuvidí, v jazyku, v ktorom hľadal, a na zariadení, ktoré práve drží.
Čo sme postavili
Web beží v angličtine a nemčine, pričom anglická vetva sa servíruje pod /en/. Každá stránka nesie kanonickú adresu na seba samu a recipročný pár hreflang, takže vyhľadávačom je jasne povedané, ktorá URL slúži ktorému jazyku, a obe verzie si prestanú konkurovať na tom istom dopyte. Obe jazykové verzie zdieľajú jednu schému smerovania, čo drží stromy konzistentné aj pri zmenách obsahu.
Nemeckú a anglickú verziu sme skúmali zvlášť. Nemecky hovoriaci predajca a anglicky hovoriaci predajca hľadajúci ten istý typ skladu nepíšu tie isté slová a prehnať jednu sadu kľúčových slov prekladačom vyrobí frázy, ktoré nikto nehľadá. Výrazy sme vybrali pre každý jazyk zvlášť a texty sme potom podľa nich písali a upravovali. Odborná slovná zásoba zostala v oboch jazykoch nedotknutá, pretože výrazy, ktoré predajcovia používajú pre prípravu FBA, značenie a kontrolu, sú presne tie, ktoré aj hľadajú.
Rýchlosť načítania bola pri tomto projekte deklarovanou požiadavkou, takže voľba technológie prišla skôr, než sa uzavrel dizajn. Web stojí na Astro. Stránky sa skladajú pri builde a doručujú sa ako HTML s CSS, JavaScript odchádza len tam, kde ho komponent naozaj potrebuje. Šablóna na univerzálnom page builderi by pred vykreslením prvého riadka hero sekcie načítala runtime, vrstvu šablóny a sadu pluginov. Tu je medzi požiadavkou a textom oveľa menej vecí, čo je pri publiku, ktoré často číta na telefóne a na mobilnom pripojení, dôležité.
Celý web sme navrhli vo Figme ešte pred vznikom prvého komponentu. Komponenty sme zadefinovali raz a použili v oboch jazykových vetvách, takže nemecká a anglická verzia dedia rovnaké odsadenia, typografickú škálu a správanie namiesto toho, aby sa pri úpravách obsahu rozchádzali. Neexistuje samostatný nemecký štýl, ktorý by bolo treba udržiavať v súlade.
Dizajn a zariadenia
Najtvrdším obmedzením rozloženia bola pri tomto projekte dĺžka textov. Nemecké popisy bývajú dlhšie než angličtina vedľa nich a navigačná lišta či nadpis karty, ktoré v angličtine sadnú presne, sa po nemeckom texte môžu rozpadnúť. Komponenty sme od začiatku špecifikovali podľa dlhšieho reťazca, takže jedna sada unesie oba jazyky. Pod tým dizajn odpovedá na otázku, s ktorou predajca prichádza: zvládnu títo ľudia môj tovar bez toho, aby mi vyrobili problém s pravidlami Amazonu?
Čo z toho vzišlo
Toto sú veci, ktoré sme odovzdali, a všetky sa dajú overiť otvorením webu. Zámerne tu chýba graf návštevnosti či percento konverzií. Pri tomto projekte nemáme s klientom dohodnuté obdobie na reportovanie z analytiky, takže akékoľvek číslo o raste by sme si na túto stránku vymysleli, len aby sme zaplnili miesto. Radšej vám ukážeme, čo sme postavili. Ak chcete posúdiť prácu na vyhľadávaní, pozrite si obe jazykové vetvy: otvorte nemeckú stránku, otvorte anglickú, prečítajte si zdrojový kód a skontrolujte, či kanonické adresy a hreflang hovoria to, čo majú. To sa falšuje ťažšie ako číslo.
Nezávislé sady kľúčových slovNemčina a angličtina skúmané osobitne, texty potom písané a upravované podľa každej sady.
Jazykové verzie v prevádzkeAngličtina a nemčina, každá s vlastnou kanonickou adresou a s dvojicou hreflang odkazujúcou na svoj náprotivok.
Framework so statickým výstupomStránky sa doručujú ako HTML. JavaScript sa načíta len tam, kde ho komponent potrebuje, čo drží prvé vykreslenie krátke aj na mobilnom pripojení.
Predajcovia na Amazone čoraz častejšie položia úzku prevádzkovú otázku najprv asistentovi a až potom vyhľadávaču a asistent vie odpovedať len z textu, ktorý si prečíta. Astro posiela hotové HTML, takže medzi crawlerom a textom nestojí žiadny krok vykresľovania na strane klienta. Dvojjazyčné nastavenie pomáha z rovnakého dôvodu: recipročný hreflang a kanonické adresy na seba samé modelu povedia, ktorá verzia je smerodajná pre nemecký dopyt a ktorá pre anglický, takže anglická odpoveď nevznikne z nemeckého textu.
Ako sme na tom pracovali
Každý projekt beží podľa písomného plánu. Takto prebiehal tento.
Čo sa so zásielkou naozaj deje, v akom poradí a čo musí predajca poslať. Čo firma prijíma a čo nie. Prípravná služba je opísaná buď presne, alebo zbytočne, takže tento krok prišiel pred akýmkoľvek rozhodnutím o textoch a rozloženiach.
Samostatné sady výrazov pre nemčinu a angličtinu, postavené okolo slovníka predajcov, nie okolo slovníka, ktorý sklad používa interne. Výstupom je mapa stránku po stránke: aké výrazy nesie ktorá sekcia v ktorom jazyku a ktoré nadpisy sa musia zmeniť, aby ich uniesli.
Rozloženie, typografická škála, odsadenia a komponenty, pričom dĺžku textov sme brali ako obmedzenie od začiatku, aby nemecké texty nerozbili rozloženie vyladené pre angličtinu. Mobil sme kreslili súbežne s desktopom.
Komponenty postavené raz a použité v oboch jazykových verziách. HTML výstup, minimum JavaScriptu, obrázky pripravené pre telefóny. Smerovanie jazykov nastavené tak, aby anglická vetva bežala z /en/.
Kanonické adresy na seba samé, recipročné páry hreflang a titulky, meta popisy a nadpisy pre každý jazyk, napísané podľa rešerše z druhého kroku. Texty v každom jazyku upravené podľa jeho vlastnej sady výrazov. Toto je krok, ktorý väčšina dvojjazyčných webov preskočí, a práve on rozhoduje, či si dve verzie pomáhajú alebo sa navzájom oberajú.
Nasadenie, overenie, že obe jazykové vetvy sú indexovateľné a správne spárované, a prevedenie klienta tým, kde v ktorom jazyku meniť texty.
Priame odpovede
Tá vaša bude pravdepodobne podobná niektorej z nich. Ak nie, opýtajte sa priamo.
Opýtajte sa na svoj projektRovnaký tím, rovnaký postup
Napíšte nám, čo predávate a kde to predávate. Dostanete plán ako ten vyššie, s ocenením a termínom prvého kroku ešte pred začiatkom.
