Čo je výrez?
Viewport je metaznačka umiestnená v
kódu HTML. Je to viditeľná časť webovej stránky, ktorú môže používateľ vidieť zo svojho zariadenia alebo monitora. Nesprávne zobrazované oblasti budú mať za následok, že používatelia budú musieť pri prehliadaní webovej stránky rolovať do strany namiesto toho, aby sa stránka dokonale zmestila na obrazovky ich zariadenia.Prečo je výrez dôležitý?
Stránky vhodné pre mobilné zariadenia majú vyššie hodnotenie. Na dosiahnutie maximálnej vhodnosti pre mobilné zariadenia s čo najmenšími investíciami musia weby skrátiť čas, ktorý používateľ strávi posúvaním stránky alebo zmenou veľkosti stránky.
Vytvorenie responzívneho dizajnu webových stránok je nevyhnutné, pretože sa očakáva, že ich navštívia všetky typy používateľov a na akomkoľvek zariadení. Je na vás, aby ste poskytli najlepšiu možnú verziu svojho webu pomocou zobrazovanej oblasti pre každé zariadenie.
Vplyv mobilného zobrazenia v SEO
Konfigurácia zobrazovanej oblasti pre mobilné zariadenia je najjednoduchší a najefektívnejší spôsob, ako zvýšiť vhodnosť vašej lokality pre mobilné zariadenia. Google vo svojich prvkoch spomína metaznačky zobrazovanej oblasti základy responzívneho webdizajnua odráža SEO pokyny, ktoré by mala každá stránka dodržiavať. S iniciatívou mobile-first ďalej hovoria: „stránky optimalizované pre rôzne zariadenia musia obsahovať značku meta viewport v hlavičke dokumentu.
Najlepšie postupy zobrazenia
Ak chcete zaistiť, aby sa stránka zobrazovala spôsobom, ktorý je vhodný pre mobilné zariadenia, môžete postupovať podľa týchto tipov:
Vyhnite sa vykresľovaniu stránky na určitú šírku, pretože šírky sa môžu v jednotlivých zariadeniach líšiť.
Vyhnite sa používaniu hodnôt absolútnej šírky v CSS, ako sú cm, mm, in, px, pt alebo pc. Namiesto toho použite skôr relatívne hodnoty šírky ako em, ex, ch, rem, vw, vh vmin, vmax a %. Použitie absolútnych hodnôt môže spôsobiť, že sa prvky vašej lokality načítajú širšie, než umožňuje vaša zobrazovaná oblasť.
Manuálne otestujte odozvu svojho webu a pripravenosť na oblasť zobrazenia
Najjednoduchší a najrýchlejší spôsob, ako zistiť, ako vaša stránka vyzerá na rôznych zariadeniach, je vytvoriť si prehľad Ahrefs a pozrieť si časť Rendering zariadenia v prehľade:
Svoj web budete chcieť otestovať na svojom vlastnom zariadení alebo pomocou funkcie „Inspect“ v prehliadači Chrome, aby ste videli, ako vyzerá vaša lokalita na základe rôznych zariadení poskytovaných spoločnosťou Google. Upozorňujeme, že používanie prehliadača Chrome vám neumožňuje posúvať obrazovku zľava doprava ani používať priblíženie stiahnutím prstov.
Keď začnete prezerať svoju stránku, potiahnutím pravej strany zmeňte šírku a uvidíte, ako dobre je vaša stránka navrhnutá pre používateľov mobilných zariadení.
Môžete tiež vybrať obľúbené zariadenia a určiť, či sa každé zariadenie zobrazuje správne.
Chcete viac zariadení? V závislosti od potrieb vašej lokality môžete v službe Google Analytics určiť, s akými zariadeniami sa vaša lokalita najčastejšie stretáva.
Môžete tiež ísť do publikum > Mobilné > Zariadenia a nájdite najobľúbenejšie zariadenia používané na prezeranie vašich stránok.
Ak uvedené zariadenia nie sú založené na momentálne najobľúbenejších zariadeniach, môžete zariadenie vyhľadať podľa názvu alebo pridať vlastné zariadenia na základe pomeru pixelov.
Ak chcete pridať vlastné zariadenie:
Prejdite do nástroja DevTools nastavenie > Zariadenia > Pridať vlastné zariadenie.
Potom zadajte názov zariadenia, šírku, výšku, pomer pixelov zariadenia a reťazec používateľského agenta.
Ako nakonfigurovať oblasť zobrazenia pre mobilné zariadenia pre vaše stránky
Existujú tri hlavné spôsoby, ako navrhnúť web vhodný pre mobilné zariadenia v závislosti od aktuálneho dizajnu webu pre mobilné zariadenia: dynamický, oddelená adresa URL a responzívny dizajn.
Dynamická konfigurácia dizajnu
Ak máte v súčasnosti dynamický dizajn, musíte vytvoriť celú samostatnú stránku, ktorá bude slúžiť rôznym verziám, a každému používateľskému agentovi povedať, k čomu by mal pristupovať z rovnakej adresy URL. Na stránke budete musieť použiť hlavičku Vary HTTP. Nižšie je uvedený príklad, ako vytvoriť túto požiadavku:
GET /page-1 HTTP/1.1
Hostiteľ: www.example.com
(…zvyšok hlavičiek HTTP požiadaviek…)
HTTP/1.1 200 OK
Typ obsahu: text/html
Varia: User-Agent
Obsah-Dĺžka: 5710
(… zvyšok hlavičiek odpovede HTTP…)
Tu sú ďalšie informácie týkajúce sa dynamická konfigurácia dizajnu.
Konfigurácia samostatných adries URL
Samostatné adresy URL vyžadujú viac zdrojov na vývoj a tiež vyžadujú, aby ste vytvorili úplne novú lokalitu a hostili ju na subdoméne, ako je www.m.example.com. Ak chcete pomôcť vyhľadávacím nástrojom porozumieť samostatným mobilným adresám URL, budete musieť vytvoriť anotácie pre stolné zariadenia www.example.com aj mobilné zariadenia www.m.example.com.
Tu sú príklady, ako anotovať každú adresu URL:
Na pracovnej ploche (http://www.example.com/stranka-1) pridajte:
a na mobilnej stránke (http://m.example.com/stranka-1) by mala byť požadovaná anotácia:
Táto značka rel=”canonical” na mobilnej webovej adrese smerujúcej na stránku pre počítače je povinná.
Anotácia súboru Sitemap musí obsahovať nasledujúce informácie:
xmlns:xhtml=”http://www.w3.org/1999/xhtml”> rel=”alternate” href=”http://m.example.com/stranka-1″ />
media=”iba obrazovka a (max-width: 640px)”
Tu je viac informácií o samostatná konfigurácia adresy URL.
Konfigurácia responzívneho dizajnu
Responzívny dizajn je najjednoduchší a najefektívnejší spôsob, ako vytvoriť webovú stránku odporúčané spoločnosťou Google. Konfigurácia zobrazenej oblasti musí zabezpečiť načítanie stránky so šírkou zodpovedajúcou šírke obrazovky zariadenia, napríklad:
Prvok zobrazenia poskytuje prehliadaču pokyny, ako ovládať rozmery a mierku stránky.
Pridaním kódu width=device-width zabezpečíte zmenu veľkosti stránky tak, aby zodpovedala šírke obrazovky, ktorá sa bude líšiť aj v závislosti od zariadenia používateľa.
Časť initial-scale=1.0 nastavuje počiatočnú úroveň priblíženia pri prvom načítaní stránky prehliadačom.
Po nastavení zobrazovanej oblasti stránky by ďalším krokom malo byť nastavenie veľkosti obsahu stránky. Tu je príklad zobrazovacej oblasti vhodnej pre mobilné zariadenia, ktorá upravila svoj obsah podľa zobrazenia používateľa:
V tomto príklade, ak bol výrez deaktivovaný alebo nakonfigurovaný len na pracovnú plochu, budete ho musieť posunúť nabok alebo priblížiť pomocou prstov, aby ste na zariadení zobrazili celú lokalitu.
Ako nakonfigurovať mobilný výrez vo WordPress
Väčšina témy vo WordPresse by už mala mať zobrazenú oblasť a mala by reagovať na mobilné zariadenia. Ak Ahrefs zistil, že vaša téma WordPress nemá zobrazenú oblasť, najlepším spôsobom je overiť ju v rámci vašej témy WordPress.
Budete musieť ísť do Vzhľad > Editor > Hlavička.php urobiť tak.
The hlavička.php súbor by mal obsahovať:
alebo
Ak momentálne nemáte zobrazenú oblasť v súbore header.php a už ste vykonali kontrolu odozvy, obráťte sa na vývojára témy.
Ak sa vám zdá byť prístup k header.php príliš technický, môžete si nainštalovať plugin “Insert Headers and Footers” z WordPress a zadať zobrazovaciu oblasť do sekcie hlavičky.
Ako nakonfigurovať mobilný výrez vo Wix
Žiaľ, momentálne nemôžete nakonfigurovať ani opraviť výrezy Wix.
Wix používa metaznačku:
.
Takže, keď Ahrefs resp Google mobilný tester skontroluje váš web, stratíte body za mobilnú prívetivosť. To neznamená, že stratíte pozíciu alebo budete musieť prejsť na inú platformu, znamená to len, že detekcia je založená na šírke zariadenia, ktorá je škálovateľná a prispôsobená pre každé zariadenie.
Viac informácií o probléme zobrazenia Wix nájdete tu na nasledujúcom odkaze:
https://support.wix.com/en/article/viewport-configuration-for-mobile-devices
Ako nakonfigurovať mobilný výrez v Shopify
Téma Shopify, podobne ako WordPress, by mala byť pripravená na zobrazenie. Ak však potrebujete overiť alebo pridať vo výreze kvôli téme, môžete prejsť na Téma > Akcie > Upraviť kód.
Nájdite „téma.tekutina” a výrez uvidíte v sekcii
.Ak nemôžete nájsť výrez, môžete kontaktovať vývojára témy alebo pridať výrez a prejsť testom odozvy, aby ste určili ďalšie kroky.
