Ngwaga ya 9 ya SEO: Tshegetso ya Layout

Se ke Ngwaga ya 9 ya 13-Step SEO Guide. Tshegetso ya layout ke fa SEO le conversion di kopanang — ka gonne go berwa ga sebaka go fapogela fa baeti ba sa tsamae ka borai.

O ka bega #1, o na le meta tags e e kgethegileng, nako e e potlakileng ya go carga, le backlinks e amanang — mme o ka bo o palelwa. Ke eng? Ka gonne layout ya gago e sitwa baeti go etela tshono e o batlang go e tsaya.

Tshegetswa ya layout e nna mo borai jwa SEO le CRO (Tshegetswa ya Seemo sa Conversion Rate). Google e lekanya mekgwa ya go etela tshedimosetso ya baeti — bounce rate, dwell time, pogo-sticking. Layout e e ratanang e baka diphetho tse tharo. Layout e e hlakileng le e amanang e ntsha diphetho tse tharo.

Datha e hlakile: diphetho ka fa go amanang le layout e amanang di bona diphetho tse di kwa godimo ga 30-80% ntle le tshwaetso e e oketsegileng. Se ke sediriswa se se se kgethegileng mo go baeti ba o nang le bone.

Se Tshegetswa ya Layout e Kgetsang

Tshegetswa ya layout e kgetsang mekhwa e me eight:

Tshedimosetso ya Ka mo Go Foldo — Se baeti ba se bonang ntle le go fologa
Borai ba Pono — Go etela borai go ya mo go amanang
F-Pattern le Z-Pattern — Goi baeti ba seka ka ga diphetho
Belegwa go CTA — Fa mekgwa le mekgwa ya bias e di etela ka botlalo
Whitespace le Go Bontsha Go Bonwa — Molaetsa o o oketsegileng o kgethegileng
Mobile Layout Patterns — Phethagalo ya ditaelo le go fologa mo go borai
Tlhahlobo ya Heatmap — Melemo e amanang le dikhutlo go ya mo go e amanang
Moralo o Lebelang go Fetola — Layout e e amanang le mekgwa ya borai

1. Tshedimosetso ya Ka mo Go Foldo

"Ka mo go foldo" ke se baeti ba se bonang pele ba fologa. Mo desktop, go gaisang e le 600-800px. Mo mobile, ke 500-700px. Se ke sebaka sa gago sa borai se se kgethegileng.

Se se tshwanetseng go bonala ka mo go foldo:

Pale e e hlakileng e e arabang "Se ke se mo lekwaneng?"
Ya gago ya ntlha ya mekgwa e amanang le boleng
Bolekane bo le bongwe mo CTA kgotsa mo go amanang
Borai bo amanang le tshedimosetso ya borai (logo, rating, ditlhopho)

Se se tshwanetseng go lekanyediswa ka mo go foldo:

Ditaele e kgolo tse di se nang borai (ke se se senogolo)
Ditlhopho tsa navigation tse di bobang tshedimosetso
Banners ya cookie e amanang le borai ka bongwe
Video ya go tshenngwa ka boitshwaro e e sa bogoang ka boete

Tlhahlobo ya sekunde e 5: Nya fa le lekwaneng le mongwe ka sekondete tse 5. A bokgoni ba gagwe go go itsise ka ga lekwaneng le le amanang le eng le se a tshwanetseng go se dira? Fa a sitwa, tshedimosetso ya gago ya ka mo go foldo e a palelwa.

Panola e potlakileng: Lekola diphetho tseno tse di gaisang mo mobile. Fa CTA ya ntlha e tlhoka go fologa, e tsamaye ka godimo. Diphetho tse di amanang le CTA ka mo go foldo di fetola 17% ka botlalo.

2. Borai ba Pono

Borai ba pono bo kgethegile borai mo go amanang mekgwa e amanang ka ga diphetho mo lekwaneng ya gago. Bo lemogwa ka go kgona, mmala, go farologana, sebaka, le go leswa.

Piramidi ya borai (top = mo go amanang ka botlalo):

| Level | Mokgwa | Mehlala | |-------|---------|----------| | Primary | Se se amanang le go dirwa ga baeti | CTA ya ntlha, pale e e amanang | | Secondary | Tshedimosetso le borai bo amanang le go itira | Subheadlines, mekgwa e amanang, borai bo amanang | | Tertiary | Matshwenyego le dintlha go baeti ba ba ikutlwileng | Tsenyana ya tlhaloso, la dimakgolo, diphetho | | Quaternary | Navigation le ditlhopho | Links mo footer, breadcrumbs, meta info |

Mekgwa ya borai e amanang le mekgwa:

Se se le ngwaga ya boikaelelo go amanang le imaphetha ka borai
Borai ba ntlha bo tshwanetse go nna 2-3x mo go golokgolo go amanang le boine |
Sebe o farologane (mmala, bogolo, mmala) go bopa borai bo amanang
White space ka borai bo amanang bo oketsa khumo ya yona e amanang le yona
Go sitwa borai jwa pono go kgona go diperetse ya borai

SEO impact: Borai bo amanang le mekgwa bo oketsa dwell time (baeti ba bona se ba se batlang ka potlako) le go fokotsa pogo-sticking (baeti ba a seka ba kgona go leketlhong).

Panola e potlakileng: Lela le le sekereng mo lekwaneng la gago go fitlhwa fa le tlhalosa. A o ka seka wa bona mekgwa e meraro go amanang le mekgwa e amanang go amanang? Fa se sengwe se se amanang le se se amanang, borai ba gago bo a sitwa le baeti ba ikutlwa ba le mo go sitwa.

3. F-Pattern le Z-Pattern Layouts

Dihlalosi ka ga borai di seka go supa melomelo e amanang le go supa mekgwa e amanang le diphetho. Go tlhomamisa layout ya gago ka ga mekgwa e amanang go netefatsa tshedimosetso e amanang.

F-Pattern (Diphetho Tsa Kgolo)

Baeti ba seka ka ga diphetho mo diphetho tse di amanang (diphetho, ditlhokwa, listings ya sehlahisoa):

Sekhwanngwa sa borai ka go rotloetsa go lekgwa (pale ya ntlha)
Lela go simolola, ba bona se se amanang (subheading)
A rotloetsa go seka mo sekhwanngwa sa losuba (go kalefa go sebelisa mekgwa)

Dikhui:

Belega borai bo amanang mo diphetohwo tsa 2-3 tsa mekgwa ya borai
Simolang diphetho ka go amanang (front-load)
Dirisa subheadings mo diphetho tsa 2-3 jaaka "scannable anchors"
Mo leftAlign se se amanang le diphetho (se sengwe sona sa body text)
Dirisa bullet points le borai go amanang le mekgwa e amanang

Z-Pattern (Diphetho Tse di Seke)

Baeti ba seka mo ka ga diphetho ka mo mang a se a goganang (diphetho tse di amanang, diphetho):

Top-left go top-right (logo → navigation/CTA)
Diagonal go bottom-left (go sekaseka borai)
Bottom-left go bottom-right (go fitlha mo ga CTA)

Dikhui:

Belega logo ya gago le navigation mo top-left le top-right
E belega phetoho ya gago mo boeleng
Belega CTA ya gago mo bottom-right ya diphetho
Kgopego ya dichi mo go amanang le felá

Panola e potlakileng: Nya lekwaneng le le baswang go F kgotsa Z pattern. A CTA ya gago e tenegang go di amanang ka borai go amanang ka borai?

4. Belegwa go CTA

Belegwa go CTA (Call-to-Action) go amanang le diphetho tse di amanang go a siènte go amanang. Tlhahlobo ya ContentVerve, Unbounce, le datha ya rona ka ga dikgotlhang di na le mekgwa e amanang.

Mekgwa ya go lefa e amanang le CTA:

| Position | Best For | Why It Works | |----------|----------|--------------| | Ka ntlha ya pale | Diphetho tse di amanang | Baeti ba lemoga ka fa kgethegileng | | Morai morai | Diphetho ya ga borai | Go dumalelwa go kgothaletsa go seka gaotlhe | | Ka fa tlase ga borai | Diphetho tse di amanang, ditlhopho | Baeti ba ba lemogang go fitlha mo borai | | Go simologa go content | Diphetho, borai | Baeti ba ba lemogang ba fitlha mo borai | | Go spanish| CTA e amanang ka mobile | Ditshegelo di le fa gotswa di amanang |

Mekgwa ya CTA:

Dirisa mekgwa ya go iketlee: "Simolola pego e e setlhopho" eseng "Fa go setlhopa"
Bopa CTA e amanang ka borai go le kgethegileng mo lekwaneng
One primary CTA mo borai (multiple CTA = go palelwa go amana)
Include micro-commitment text: "A go na le khomphutara go amogela" kgotsa "E boloka 30 sekonde"
CTA button e tshwanetse go ikaeleng go 44x44px mo mobile (Apple HIG standard)

Bothi jwa mageng: Fa lekwaneng la gago le bonala go sitwa go oketsegileng, baeti ba a simolola go bula. Dirisa melGa ya borai (moragasing lona, scroll indicators, content teasers) go ntsha ditlhoko go fara go amanang.

Panola e potlakileng: Nya go hinkwanya go banale ya gago ka go le fa tlase ga dikhutlo. Baeti ba ba foloogang ba ka be ba le kwa tlase — bona ba ba tleleng go tseregong go a amanang go fa se a tshwanetseng go se direla.

5. Whitespace le Go Bontsha Go Bonwa

Whitespace (negative space) ga se sebaka se se se nang mekgwa — ke sediriswa sa borai. Diphetho tse di amanang le whitespace di ama di ka fa go amanang le ditlhopho.

Se se amanang ka ga borai:

Whitespace e amanang le diphetho e okeletsa comprehension ka 20% (Wichita State University)
Segolo se se amanang se oketsa go bala
Margins mo CTAs di kgethegile go fologa
Dense layouts di amanang le diphetho di di amanang

Mekgwa ya borai go amanang le SEO:

Plength: 50-75 characters ka borai (fokotsa khumo ya borai)
Length height: 1.5-1.8 mo semetswana (eseng go se mekwenya)
Paragraph length: 2-4 dikarolo go oketsa (segolo se se di amanang)
Section spacing: 2-3x line height go amanang mo big differences
CTA breathing room: Motse o o amanang le 24px go amanang le mekgwa e amanang

Font sizing for web:

Mo dikarolo: 16-18px motle (mobile: 16px)
Dikgopolo: Dirisa modular scale (1.25x kgotsa 1.333x)
Se se na go na le mekgwa e meraro go amanang mo lekwaneng
Minimum contrast ratio: 4.5:1 (WCAG AA)

Panola e potlakileng: Oketsa go gole go potlako go CTA ya gago e amanang ka 50%. Diorama tse di seka di anamela go tsentle go tsena mo go amanang ga baeti.

6. Mobile Layout Patterns

Mobile e amanang le 60%+ ya ga web. Mobile layout e amanang fetoga ka ga boikgono le se se amanang di sa na mekgwa e amanang.

The thumb zone: Mobile e amanang le go na mekgwa ya go go amogela ka go lemoga le le mekgwa. Borai bo amanang bo kgethegile mo ga borai:

Molaetsa o o boikakgobogolo (bottom center): Fa primary CTAs
Molaetsa o o otlhagatlhileng (center): Melemo ya mekgwa le borai
Molaetsa o o boikhutlhile (top corners): Navigation, ditlhopho, ditlhopho tse di amanang le borai

Mekhudi ya mobile e amanang:

[Hamburger Menu]                [Action]
┌────────────────────────────────────────┐
│  H1: Clear headline                    │
│  Subtext: One line explanation         │
│                                        │
│  ┌────────────────────────────────┐    │
│  │     PRIMARY CTA (full width)   │    │
│  └────────────────────────────────┘    │
│                                        │
│  Content block 1                       │
│  ────────────────────────────────      │
│  Content block 2                       │
│  ────────────────────────────────      │
│  Content block 3                       │
│                                        │
│  ┌────────────────────────────────┐    │
│  │    SECONDARY CTA (full width)  │    │
│  └────────────────────────────────┘    │
│                                        │
│  [─────── BOTTOM NAV ───────]          │
└────────────────────────────────────────┘

Mekgwa ya mobile layout:

Fokotsa go beye tlhogo ka fa godimo (eseng go leme ka nwaka motshegare o amanang)
CTAs di tshwanetse go nna le borai go amanang (44px ka go amanang)
Dirisa sticky headers ka borai (ba a ja borai mo view port)
Akanya ka bottom navigation go dira se like-go
Cards le 16px padding le 12px gapa mo go amanang
Fokotsa hover effects (ga se a le olemaso)

Panola e potlakileng: Dira ditlhopho ka mobile diphetho ya gago ka go kaama telefoneng ka ga borai. Akani geregego go fa go amana mo CTA ya gago ka borai? Fa go sitwa, e tsamaye ka fa tlase.

7. Tlhahlobo ya Heatmap

Heatmaps di supa fa baeti ba se thakgwa, ba kgetha, le go fologa mo lekwaneng la gago. Ba fetoga melemo go amanang ka mekgwa e amanang le data.

Ditsela tsa heatmap:

| Type | Se se supang | Se se amanang le | |------|---------------|-----------------| | Click heatmap | Fa baeti ba a isetsa | Dead clicks, CTAs tseo di sa ama, şey been e amanang | | Scroll heatmap | Go fa baeti ba a fologa | Drop-off points, "fold line," borai ka tlase ga 50% | | Move heatmap | Motsamao wa mouse (desktop) | Borai ba amanang, borai ba okunyang, le mafelo a go kgethega | | Attention heatmap | Nako e amanang le go bona mekgwa | Dikhonlama tse di amanang, borai bo amanang |

Ka ga go dirisa datha ya heatmap:

Fokotsang datha ya heatmap go 2-4 beke (go fitlhwa 1000+ sessions)
Lekola "dead zones" mo baete ba a seka ba alemang — tlosiwa’ se se amanang
Ntsha “rage clicks” (go bega le go rotloetsa mekgwa) — dirang mekgwa ya borai ka boeeng ka borai
Lekola scroll depth: fa 70% ya baeti ba baeng ba sa fitlhe mo CTA ya gago, le go send siya ga gagwe
Bontsha mobile go desktop patrones — ba a amanang le go farologana go nganang

Ditsela di le maphatlalatsong ya heatmap:

Microsoft Clarity (free, unlimited traffic, session recordings)
Hotjar (free tier: 35 sessions/day)
FullStory (enterprise, full session replay)

SEO connection: LANGR's layout-scan module e lekgothaletsang CTA e amanang, go kgetha ba le fold mo borai le go iketlee go fa bo half o o gakanang go amanang.

Panola e potlakileng: Go instal Microsoft Clarity (free, 5 minutes). Santhe beke. Lekola scroll heatmap mo lekwaneng la gago le amanang ka borai. Fa most users ba kgetha go fologa go merai go lla, o na le layout problem.

8. Moralo o Lebelang go Fetola

Diphetho tsotlhe di tshwanetse go sebeletsa moralo o amanang. Fa o le ngwaga, ke mekgwa e me amanang:

Diphetho tse di amanang (blog di le tse di amanang):

Se se amanang ebile gabonwe, CTAs mo mekgwellego
Go fa morai CTAs ka morago ga borai tse di amanang (eseng go kgotlisa)
"Diphetho tse di amanang" widgets di simolola borai jo bo amanang
E-mail ya 50% le 100% go fologa go amanang

Diphetho tse di amanang (diphetho, mekgwa, ditlhopho):

Hero mo mekgwa e amanang + CTA ka ga fold
Social proof fa go ntsa mo fold (testimonials, logos, diphetho)
Borai ya se se amanang go tlhaela CTA
CTA bar a le fa tlase mo mobile le go fologa
FAQ e amanang le mekgwa ya le below

The content-to-CTA ratio rule: Go bakwe diphetho tsa tharo di amanang ka ga morai e le ngwaga. Eseng go seka go amanang ga ba ba kgethegileng — ngwaga e amanang le mekgwa, inline CTAs, kgotsa sticky bars.

The Layout Optimization Checklist

Tlhola se go le lekwaneng le le amanang:

[ ] Molaetsa o amanang le CTA o bonwa go fold (eseng go fologa)
[ ] Borai e amanang le borai ka go amanang mo mekgwe e amanang
[ ] Layout e amanang e le mo F-pattern (content) kgotsa Z-pattern (landing page)
[ ] CTA ya ntlha ke mo go amanang ka borai mo lekwaneng
[ ] Whitespace: 50-75 char lekgwa, 1.5+ line height
[ ] Mobile: CTA ya ntlha mo thumb zone, 44px+ touch targets
[ ] Scroll heatmap e supa 50%+ baeti ba ba kgethegileng mo CTA
[ ] Go se na rage clicks mo mekgwa e amanang
[ ] Le lekwaneng la gago le se bonale go ends ka fa tlase ga boikgono
[ ] Borai contrast ratio 4.5:1+ (WCAG AA compliance)

How LANGR Detects Layout Issues

LANGR's layout-scan module e dirisa AI go sekaseka layout ya gago ka fa borai (mobile, tablet, desktop). E lekanya:

Takane go CTA: A CTAs di amanang mo ga fold mo dikarolo tsotlhe?
Content density: A go na le tshedimosetso e amanang mo go ngwaga ya go bona?
Tap targets: A dikarolo mo mobile di na le borai go 44x44px?
Borai ba Pono: A go na le borai e amanang go menya pamusoro ka borai?
False bottoms: A lekwaneng la gago le bonala go sitwa?
Spacing consistency: A dikarolo le padding di netefatsa go amanang?

Se ke ngwaga ya LANGR's 13 SEO disciplines. Ngwaga e nngwe le nngwe e sekaseka layout ya gago ka go amanang le mekgwa e amanang mo baeti ba a sitwa le go kitla go se pele go le baeti.

Common Layout Mistakes (Ranked by Impact)

No CTA above the fold — Baeti ba tshwanetseng go sa thatafela go pheta
Flat visual hierarchy — Rona re tshegetsa go sitwa boikakgobo = go sitwa go amanang
Dense content blocks — making walls of text ba ga mmatse go sitwa
Desktop layout on mobile — Mehlweni a go amanang a gaganang
CTA buried after content — Baete ba ba ba eletang ba bapa
Tiny tap targets — 30px buttons ba amogela go sirilaloma le go kgethegile
False bottoms — Layout e amanang le a sitwa go fa mekgwa
Competing CTAs — Borai bo ntlha go farologana ke go buruila

What's Next?

Step 10: Multi-language SEO — Go fitlha ba dikgwakgwe jwa botlhe ka ga hreflang, quality ya go fetola, routing ya locale, le go go itsise ka mekgwa go amanang le go sa amanang le go berwang.

Se ke ngwaga ya LANGR's 13-step SEO series. Dirisa audit ya mahala go bona fa lekwaneng la gago le amanang mo borai bo amanang le go amanang.

Ngwaga ya 9 ya SEO: Tshegetso ya Layout — Fa o Belega Dikarolo, Mo Kgethegong Tscript