SEO Tataiso Mohala 9: Ts'ebetso ea Layout

Mohala ona ke Mohala 9 oa Tataiso ea SEO ea Mehato e 13. Ts'ebetso ea layout ke lienjiniere tsa SEO le phetoho — hobane ho ba le maemo a phahameng ha ho na le lebaka haeba baeti ba sitwa ho nka khato.

U ka ba le maemo a #1, u be le mekhahlelo e phethahetseng ea meta, mekhahlelo e potlakang, le lienjiniere tsa sechaba — empa u ntse u ka phetoa. Hobane'ng? Hobane sebaka sa hau sa layout ha se u etsetse banyalani leano la khato eo u batlang hore ba e nke.

Ts'ebetso ea layout e na le lebaleng la SEO le CRO (Ts'ebetso ea Mohala oa Phetho). Google e lekanya matšoao a boiteko ba basebelisi — sekhahla sa ho tlosoa, nako ea ho qetela, pogo-sticking. Layout e sa hlaka e bakang tsena tsohle. Layout e hlakileng le strateji e ntlafatsa tsena tsohle.

Tlhahisoleseling e hlakile: lifaele tse nang le layouts tse ntlafalitsoeng li bona sekhahla sa phetoho se phahameng ho tloha ho 30% ho isa ho 80% ntle le sephethephethe se eketsehileng. Ke chelete e se nang thuso ho tsoa ho baeti ba o se nang.

Seo Ts'ebetso ea Layout e Khethang

Ts'ebetso ea layout e akaretsa mekhahlelo e 8:

Lihlahla tse Kaholimo ho Fold — Seo basebelisi se seeng ha ba ntse ba alima
Hierarchi ea Mofuta — Ho tataisang leihlo ho seo e leng bohlokoa
F-Pattern le Z-Pattern — Kamoo basebelisi ba hlahlobang lifaele
Ho Beha CTA — Moo boto le likhokahano li phetohang hantle
Whitespace le Ho Bala — Sebaka se fokolang se ntlafatsang kutloisiso
Mobile Layout Patterns — Libaka tsa likh'hamphani le phallo e tobileng
Tlhahlobo ea Heatmap — Litlhahiso tse thehiloeng ho data
Moralo o Shebaneng le Phetho — Layout e sisinyang liphetho tsa khoebo

1. Lihlahla tse Kaholimo ho Fold

"Lihlahla tse kaholimo" ke seo basebelisi se seeng pele ho tloha ho alima. Ho desktop, ke hoo e ka bang 600-800px e kaholimo. Ho mobile, ke 500-700px. Ena ke sebaka sa hau se bohlokoa.

Seo se hlokahalang ho hlaha kaholimo ho fold:

Hlogo e hlakileng e arabelang "Se ba bolang ka sehlahisoa sena?"
Tlhahiso ea hau ea boleng bo phahameng kapa molaetsa o moholo
Bonyane CTA e le 'ngoe kapa khato e ke keng ea ba le ntlha
Meharo e bonahalang ea ho bona (logo, maemo, mekurumetso)

Seo u lokelang ho qoba ho hlaha kaholimo ho fold:

Lifoto tse kholo tse se nang mantsoe (li senya sebaka)
Menyu ea navigation e kentsoeng litšoantšo
Liphetho tsa likhukhu tse qhosang sefahleho sa ho etselletsa
Video e tsamaeang e emelang ho hlahisa litšoantšo

Test ea lisec: Hlalosa sebaka sa hau ho motho ka sekontiri sa 5. Na ba ka u joetsa hore sebaka sa hau se etsa eng le hore na ba lokela ho etsa eng ka morao? Haeba che, litlhahisong tsa hau tse kaholimo ho fold li ntse li fosa.

Ntlha e potlakileng: Lekola libaka tsa hau tse 5 tse phahameng ka mobile. Haeba CTA ea pele e hlokahala ho alima, e tsosolose. Libaka tse nang le CTAs tse bonahalang kaholimo ho fold li phetoha ka 17% ho feta boholo ba libaka.

2. Hierarchi ea Mofuta

Hierarchi ea mefuta e laola mokhoa oo basebelisi ba sebetsanang le boitsebiso ka teng. E laoloa ke boholo, 'mala, phapang, sebaka, le boemo.

Tlhahlobo ea hierarchi (holimo = khanya e kholo):

| Level | Sebaka | Mehlala | |-------|---------|----------| | Phae | Ntho e le 'ngoe eo u batlang hore basebelisi ba e etse | Mofuta oa CTA o moholo, hlogo e kholo | | Sekundari | Boitsebiso bo ts'ehetsang bo matlafatsang ts'epo | Subheadlines, melemo e meng, bopaki ba sechaba | | Tertiary | Mokoana le lintlha bakeng sa basebelisi ba ikhethileng | Mantswe a 'mele, lenane la lits'ebetso, litlhahiso | | Quaternary | Ts'ebetso le tšebeletso | Lihokelo tse ka tlase, breadcrumbs, meta info |

Miso ka forho e sebetsang:

Nako e le 'ngoe ho boloka leihlo le le leng per viewport
Lihlahisoa tsa tlhaho li lokela ho ba 2-3x e kholo ho feta e sekondari
Sebelisa phapang (mala, boima, boholo) ho bopa mekhahlelo e hlakileng
Whitespace ho pota-lekhetlo e eketsa bohlokoa ba eona
Ho robeha mokgwa oa pono ho fa tlhokomelo ea nako

Khetho ea SEO: Hierarchi e matla ea mofuta e ntlafatsa nako ea ho qetela (basebelisi ba fumana seo ba se hlokang kapele) le ho fokotsa pogo-sticking (basebelisi ha ba khutlele ho liphetho).

Ntlha e potlakileng: Tlhapisa sebaka sa hau ho fihlela se hlaha. Na o ntse o ka bona mekhahlelo e 3 e fapaneng ea bohlokoa? Haeba tsohle li shebahala li le tšoana, hierarchi ea hau e flat 'me basebelisi ba ikutloa ba tlohetseng.

3. F-Pattern le Z-Pattern Layouts

Liphetho tsa ho shebella (Nielsen Norman Group, Hotjar) li bonts'a hore basebelisi ba hlahloba lifaele ka mekhahlelo e tsitsitseng. Ho latela layout ea hau le mekhahlelo ena ho etsa bonnete ba hore litšoantšo tse bohlokoa li bonoa.

F-Pattern (Lifaele tse Ts'oanang)

Basebelisi ba hlahloba ka mohala oa F ho litaba tse amanang le litlhahlobo (meqa, litlhahlobo, lenane la lihlahisoa):

Ho hlahloba ka ho otloloha kaholimo (seboka sa hlogo)
Metsu, hlahloba leline le leng (subheading)
Ho hlahloba ho theoha kapele (ho hlahloba mantsoe a bohlokoa)

Mehlolo:

Beha mantsoe le melaetsa ea bohlokoa ka har'a line tse 2-3 tsa pele
Qala liparagraph ka boitsebiso bo bohlokoa (front-load)
Sebelisa subheadings ka har'a line e 2-3 e le "scannable anchors"
Ho hohlo o potlakela ho fa litlhahiso tse molemo (sehlopha sa 'mele)
Sebelisa lintlha le ho behoa ho etsa mekhahlelo e hlokahalang

Z-Pattern (Lithaele tse nyenyane)

Basebelisi ba hlahloba ka mokhoa oa Z ho lifaele tse lilo (lifaka, mabenkele):

Holimo-hlaba le ho hapisa (logo → navigation/CTA)
Ho potlakisa ho theosa ho theoha (sehlopha sa 'mele)
Ho theoha ho theoha (ho fumana ho qetela)

Mehlolo:

Beha logo le navigation holimo-hlaba le ho hapisa ho pharaletseng
Beha molaetsa oa hau o moholo bohareng
Beha CTA ea hau ka tlase-ho beha li-mosola
Laola litemana tse potlakileng ka ho hlahloba

Ntlha e potlakileng: Mapela layout ea hau ea hajoale ho either F kapa Z pattern. Na CTA ea hau e le holimo ho fihla litlhahiso tseo e ka finyellang ho fihla ka pōpo?

4. Ho Beha CTA

Ho Beha CTA (Call-to-Action) ho ama ka kotloloho sekhahla sa phetoho. Liphetho tse tsoang ho ContentVerve, Unbounce, le data ea rona ka har'a lifaele tse ngata tse sekasekiloeng li bonts'a mekhahlelo e hlakileng.

Lisebelisoa tse phahameng tsa CTA:

| Sebaka | Mokhoa | Hobane e sebetsa | |----------|----------|--------------| | Ka tlasa hlogo | Lifaele tse khuts'oane | Basebelisi ba entse tsebo ka potlako | | Ka mor'a sehlopha sa pele | Lifaele tse amanang | Ts'epo e khonang ho hola pele ho botsa | | Ka mor'a bopaki ba sechaba | Lifaele tse amanang | Ts'epo e fokotsa ho ba le molato | | Ka tlase ho botla | Lifaele, meqhaka | Basebelisi ba ikhethileng ba fihlella qetellong | | Floating/sticky (mobile) | Libaka tsohle tsa mobile | Kamehla e fumaneha |

Miso ka ho beha CTA:

Sebelisa mantsoe a khotsofatso: "Qala sehlopha sa mahala" eseng "Fana"
E etsa CTA e le elementi e nang le phapang e moholo ka holima
E 'ngoe CTAs e le 'ngoe per viewport (CTAs e ngata = ho qetela-ho khetha)
Kenya temana e ntle ea micro-commitment: "Ha ho hlokahale karete" kapa "Lumela liphetho ka matsatsi a 30"
Button ea CTA e lokela ho ba bonyane 44x44px ho mobile (Apple HIG standard)

Mokhoa oa bottom oa bohata: Haeba sebaka sa hau se shebahala se qetella pele ho CTA, basebelisi ba tlohela ho alima. Sebelisa bokhoni bo bonahalang (ho na le litaba tse pharaletseng, liphetho tse amanang, litlhahiso tse senotseng) ho fa maikutlo a bonahalang hore ho na le litaba tse ling.

Ntlha e potlakileng: Kenya CTA ea bobeli ka tlase ho libaka tsa hau tse holimo. Basebelisi ba kenang ka botla ba na le maikutlo a phahameng - ba fa monyetla oa ho fetola ntle le ho tloaelane le ho koja.

5. Whitespace le Ho Bala

Whitespace (sehlala se se nang letho) ha se sebaka se sa lefelloang — ke sesebelisoa sa moralo. Lifaele tse nang le whitespace e meng li sebetsa hantle ka ho fetisisa ho latela mekhahlelo e mengata ea ho baloa.

Seo liphetho li bontšang:

Whitespace ho pota-litšoantšo e eketsa kutloisiso ka 20% (Wichita State University)
Phokotso ea likarolo e ntlafatsa lebelo la ho bala
Margins ho pota-CTAs e eketsa mekhahlelo ea ho tobetsa
Layouts tse tetemetseng li amanang le boleng bo phahameng ba ho tlosoa

Miso ea ho bala bakeng sa SEO:

Bolelele ba line: 50-75 caractères per line (tlohela ho sitwa)
Bolelele ba line: 1.5-1.8 bakeng sa 'mele (sebelisa mantswe a kholisanang)
Bolelele ba Paragraph: 2-4 line e le' ngoe (hlahlobang matlo a litšoantšiso)
Sebaka sa kopanyo: 2-3x line hatellang lipakeng tsa maemo
CTA breathing room: Bonyane 24px padding ho pota-litšoantšo tse ikhethileng

Bolelele ba litlhaku bakeng sa web:

Mofuta: 16-18px bonyane (mobile: 16px base)
Lihlatsuo: Sebelisa sekala se nang le libaka (1.25x kapa 1.333x ratio)
Se ke oa sebelisa ho feta mekhahlelo e 3 per page
Monyetla o minimum oa phapang: 4.5:1 (WCAG AA)

Ntlha e potlakileng: Eketsa padding ka potlako ho pota-CTA e hau e holimo ka 50%. Lifaka tse ngata li senya karolo ea bohlokoa ka likhoele tse ling, ho etsa hore ho be thata ho fumana le ho ama ka mobile.

6. Mobile Layout Patterns

Mobile e na le 60%+ ea sephethephethe sa web. Mobile layout e fapaneng haholo ho tloha ho desktop — eseng feela tse nyane, empa e amanang le mokhoa o fapaneng.

Libaka tsa mmino: Basebelisi ba mobile ba tšoere mohala ka letsoho le le leng. Ho nahana ho joalo ho etsa libaka tse tharo:

Libaka tse bonolo (bohareng bo tlase): Beha CTA ea mantlha mona
Libaka tse ho lokelang (bohareng): Liketso tse sekondari le litaba tse ka sehloohong
Libaka tse thata (liphetho tse holimo): Navigation, mefokotso, litlhahiso tse sa sebelisoe

Linyehelo tse amanang le mobile:

[Hamburger Menu]                [Sehlahisoa]
┌────────────────────────────────────────┐
│  H1: Hlogo e hlakileng                 │
│  Subtext: Tlhaloso e le mong          │
│                                        │
│  ┌────────────────────────────────┐    │
│  │     PRIMARY CTA (botla ba)    │    │
│  └────────────────────────────────┘    │
│                                        │
│  Content block 1                       │
│  ────────────────────────────────      │
│  Content block 2                       │
│  ────────────────────────────────      │
│  Content block 3                       │
│                                        │
│  ┌────────────────────────────────┐    │
│  │    SECONDARY CTA (botla ba)    │    │
│  └────────────────────────────────┘    │
│                                        │
│  [─────── BOTTOM NAV ───────]          │
└────────────────────────────────────────┘

Miso ea mobile layout:

Bopa tsohle ka holimo (ha ho na mekhahlelo e le 'ngoe ka tlase ho 360px)
CTAs li lokela ho ba li button tse pharaletseng (44px+ bophahamo)
Sebelisa lihlahiso tse amanang le holimo (li ja sebaka sa viewport)
Nahana ka navigation ea tlase bakeng sa boiphihlelo bo amanang le mehala
Likarete tse nang le 16px padding le 12px phapang lipakeng tsa tsona
Fokotsa litlhahiso tse amanang (ha di fumanehe ho latela)

Ntlha e potlakileng: Testa lifaele tsa hau tsa mobile ka ho tšoara mohala ka tlhaho ka letsoho le le leng. Na u khona ho finyella CTA ea mantlha ka lehlakoreng leo u selemong? Haeba che, e moved hape.

7. Tlhahlobo ea Heatmap

Heatmaps e bontša hore basebelisi ba sheba, ba tobetsa, le ho alima lifaele tsa hau. Li fetola liqeto tsa layout ho tloha ho liphetho ho ea ho lintho tse sebelisoa.

Mefuta ea heatmaps:

|Type |Seo E se Bontšang |Seo U Lokelang ho Batla | |------|------------------|-----------------| |Click heatmap | Moo basebelisi ba tobetsa/klik | Dead clicks, CTAs tse sa amanang, palo e sa lekanang | |Scroll heatmap | Hore basebelisi ba ntse ba alima | Mehlolo e maqhubu, "fold line," litaba tse ka tlung ho 50% | |Move heatmap | Motho ea nayang (desktop) | Mekgwa e amanang le mokhoa, ho bala ka mokhoa, libaka tse amanang le ho ithuta | |Attention heatmap | Nako e fetileng ka ho sheba libaka | Libaka tse nang le boleng bo phahameng, litaba tse sa amanang |

Kamoo u ka sebelisang data ea heatmap:

Kenyelletsa tracking ea heatmap ka libekeng tse 2-4 (tlhoka litlhahiso tse 1000+)
Batla "dead zones" moo ho se na le qoso — ntša kapa ulosa litaba tseo
Fumana "rage clicks" (ho tobetsa boemong bo seng boto) — etsa bonnete ba hore li tšoerei kapa u li tlosoe
Check scroll depth: haeba 70% ea basebelisi ba sitwa ho fihlella CTA ea hau, e moved
Khetholla maemo a mobile khahlanong le desktop — li fapane haholo

Lisebelisoa bakeng sa tlhahlobo ea heatmap:

Microsoft Clarity (mahala, sephethephethe sa mahala, ho rekota mekhahlelo)
Hotjar (tier ea mahala: 35 sessions/moeketsi)
FullStory (enterprise, ho rekota mekhahlego e tobileng)

Khetho ea SEO: Modu ea layout-scan ea LANGR e lekanya ho beha CTA, boleng ba litaba tse kaholimo ho fold, le boima ba liphetho tsa mobile. E khetholla mathata a layout a amanang le liphetho tse fosahetseng — mekhahlelo e tšoanang e sebelisoang ke Google bakeng sa maemo.

Ntlha e potlakileng: Kenyelletsa Microsoft Clarity (mahala, metsotso e 5). Emisa beke. Lekola scroll heatmap paaeng ea hau e eteloang haholo. Haeba basebelisi ba 95% ba emisa ho alima pele ho CTA ea hau, u na le bothata ba layout.

8. Moralo o Shebaneng le Phetho

Liqeto tsohle tsa layout li lokela ho sebeletsa sepheo sa phetoho. Mona ke moo ho behang lifaele ho fapaneng le liphetho tse fapaneng:

Lifaele tse amanang (meqoqo, litlhahlobo):

Litaba tse pele, CTAs li batla ka libaka tse amanang
CTAs tsa kahar'a litaba ka mor'a mehloli e meholo (eseng ho qhalanyetsa)
"Lihokelo tse amanang" li eketsa ho teba ha lekhetho
Ho bokella imeile ho 50% le 100% e alima

Lafaele tse amanang (sehlahisoa, theko, ngwaga):

Hero e nang le tlhahiso + CTA kaholimo
Bopaki ba sechaba ho lekanngoa ka tlase ho fold (likhothaletso, logo, litlhahiso)
Lisemaha/tlhahiso li matlafatsa CTA
CTA e bonolo mokhahlelong ho qetela ho theosa le hero
FAQ e kenngoa ho fokotsa mekgwa e amanang le CTA ea ho qetela

Lifaele tse amanang (boka, lihlahisoa):

Morero o hlakileng oa lethathamo le mekhoa e amanang
Mekhoa ea fa le ho sebedisa le lebelo la mehopolo
Lihlahisoa tse amanang le lihlahisoa tse bohlokoa
Breadcrumbs bakeng sa ho tšehetsa

Mokhoa oa ratio ea litaba ho CTA: Bakeng sa karolo e 3 ea litaba, kenya monyetla oa CTA. Khetha Sehlopha se amanang — likhokahano tse amanang, CTAs, kapa sticky bars.

The Layout Optimization Checklist

Bolaea tse latelang bakeng sa tlaelo e 'ngoe le e 'ngoe e bohlokoa:

[ ] Molaetsa o moholo le CTA li bonahala kaholimo ho fold (ha ho hlokahala ho alima)
[ ] Hierarchi e hlakileng le litlhahiso tse 3+ tse fapaneng
[ ] Layout e lumellana le F-pattern (litaba) kapa Z-pattern (libs);
[ ] Primary CTA e le karolo e fapaneng ka ho fetisisa ka holim'a leqhelemiso
[ ] Whitespace: 50-75 caractères per line, 1.5+ line height
[ ] Mobile: primary CTA in thumb zone, 44px+ touch targets
[ ] Scroll heatmap e bonts'a 50%+ basebelisi ba fihlella CTA e ka sehloohong
[ ] Ha ho na rage clicks ho lintho tse sa amanang
[ ] Page ha e shebane le "ho qetela" pele ho qetela (false bottom)
[ ] Monyetla oa phapang 4.5:1+ (WCAG AA compliance)

Kamoo LANGR E Fumanang Mathata a Layout

Modu ea layout-scan ea LANGR e sebelisa AI ho hlahloba layout ea hau ho tloha ho viewports tse tharo (mobile, tablet, desktop). E lekanya:

Visibility ea CTA: Na CTAs li bonahala kaholimo ho fold ho lisebelisoa tsohle?
Densiti ea litaba: Na ho na le litaba tse ngata tse nang le bohlale ka har'a viewport ea pele?
Litlhaku tse amanang: Na lisebelisoa tsa mobile li đáp hoop 44x44px?
Visual hierarchy: Na ho na le lehlakore le le lenaneng per viewport?
False bottoms: Na boemo bo shebahala bo qetella hoseng?
Kopano e tiileng: Na margins le padding li tšoana?

Eno ke e 'ngoe ea mekhahlelo e 13 ea LANGR ea SEO. Tlhahlobo e ngoe le e ngoe e lekanya layout ea hau ho se nang mohopolo, hape e khetholla chaos e amanang le bonyane ba baeti.

Liphoso Tse Tsoelang Pele (Li-Ranked ka Ho Ba le Tlhahlobo)

Ha ho na CTA kaholimo ho fold — Basebelisi ba bangata ba sitwa ho alima ho feta screen ea pele
Flat visual hierarchy — Tse hantle kaofela li shebahala li le bohlokoa = ha ho na ntho e amanang le bohlokoa
Dense content blocks — Lifaele tse nang le mantswe a phahameng ka ho sa feleng li bakelletsa ho nyolohe
Mokhoa oa desktop ho mobile — Lihlahisoa tse sebelisang mekhahlelo e le 'ngoe li ka haoleng
CTA e potlakileng ka mor' Ea litaba — Basebelisi ba liphetho (bonyane) ba ka bona
Tiny tap targets — 30px li-button e bakang rage-taps le lifaele tse sa lekaneng
False bottom — Layout e senyang hore ho shebahala ho qetella pele o
Competing CTAs — Li-button tse sa amanang e le 'ngoe ka ho lekana li bakang ho khetha ho tšoaneng

Seo se Latelang?

Mohala 10: Multi-language SEO — Ho fihlela bamameli ba lefatše ka hreflang, boleng ba phetolelo, libaka tsa liqeto, le ho lebisa linaheng ntle le ho fokotsa maemo a hau.

Tataiso ena ke karolo ea mokhatlo oa LANGR oa khatiso ea SEO ea mehato e 13. Run a free audit ho bona hore na sebaka sa hau se eme joang ho nkhono ea mekhahlelo e 13.

SEO Tataiso Mohala 9: Ts'ebetso ea Layout — Moo U Bekang Litemana Ho Grama Ho Fetisisitsoe