SEO வழிகாட்டி கட்டு 5: UX / பயனர் அனுபவம்

இது 13-படிநிலைகள் SEO வழிகாட்டி இன் 5வது கட்டு. பயனர் அனுபவம் தற்போது நேர்மறை தரவரிசை அம்சமாக மாறியுள்ளது — Google உங்கள் இணையதளத்துடன் பயணிகள் எப்படி தொடர்பு கொள்கின்றன என்பது பற்றி அளவீடு செய்கிறது மற்றும் விரைவு, அணுகக்கூடிய, மகிழ்ச்சியான அனுபவங்களை வழங்கும் இணையதளங்களை பரிசு செய்கிறது.

உள்ளடக்கத்தைக் கையாளும் (கட்டு 3) என்ன பதிப்பிப்பதையைத் தீர்மானிக்கிறது. இணைப்பு கட்டமைப்பு (கட்டு 4) நீங்கள் உரிமையுடையவராக இருக்கிறீர்கள் என்பதை நிரூபிக்கின்றது. ஆனால் பயணிகள் உங்கள் பக்கம் வந்தால் மற்றும் உடனே அதில் இருந்து வெளியேறினால், அது மேலே கூறியவற்றில் எதுவும் முக்கியமில்லை — இதில் இருந்து Google இப்பெயர்வுக்கு சிக்னல்களை கண்காணிக்கிறது மற்றும் தரவரிசைகளைப் பேராய் செய்து கொள்கின்றது.

2021 ஆம் ஆண்டிலிருந்து, Google இன் பக்கம் அனுபவம் மேம்பாடு UX ஐ உறுதியாக்கிய தரவரிசை அம்சமாக மாற்றியுள்ளது. 2024 இல், INP (Interaction to Next Paint) FID ஐ ஒரு முக்கிய வலை மதிப்பீடாக மாற்றியுள்ளது. 2026 இல், இந்த சிக்னல்கள் மேலும் மெருகேற்றப்படுகின்றன உணர்த்திய உள்ளத்தைக் கொண்டு Google பயனர் திருப்தியைக் குறிக்கும் முறைமைகளை மேல்நோக்கி முன்னுரிமைக் கொடுத்துள்ளது.

SEO க்கான UX என்னவென்று ஈடுப்படுத்துகிறது

SEO க்கான UX மேம்பாட்டில் 6 பகுதிகள் அடங்கும்:

முதன்மை வெப் மதிப்பீடுகள் — Google இன் அதிகாரப்பூர்வ UX அளவீடுகள் (LCP, INP, CLS)
மொபைல் உற்பத்தி — பதிலளிக்கும் வடிவமைப்பு, தொடு இலக்குகள், பார்வைபேப்பர்
அணுகுமுறை (WCAG) — உங்கள் இணையதளத்தை அனைவருக்கும் பயனுள்ளதாக்குவது
பக்கம் அனுபவ சிக்னல்கள் — HTTPS, இடையே உள்ளதாக இல்லை, பாதுகாப்பான உலா
வழிசெலுசு முறைகள் — பயனர்களுக்கும் கிராலர்களுக்கும் உதவும் இணையதள அமைப்பு
முன்னணி உற்பத்தி — பயனர்கள் பார்வையை முறைப்படுத்தாமல் என்னைப் பதிவு செய்கின்றனர்

1. முதன்மை வலை மதிப்பீடுகள் (CWV)

முதன்மை வலை மதிப்பீடுகள் Google இன் மூன்று அளவீடான UX அளவீடுகள் ஆகும். இவை Chrome பயன்பாட்டிற்கான அனுபவமான விவரத்தில் (CrUX) கண்காணிக்கப்படுகின்றன மற்றும் நேரடியாக தரவரிசையை பாதிக்கின்றன.

மூன்று அளவீடுகள்:

| அளவீடு | அளவிட்டது | நல்லது | மேம்படுத்த தேவை | கெட்டது | |---------|-----------|---------|------------------|---------| | LCP (Largest Contentful Paint) | ஏற்றுமதி வேகம் | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | பதிலளிக்கிறதா | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | பார்வை நிலைத்தன்மை | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — Largest Contentful Paint

LCP உங்கள் பக்கத்தின் முக்கிய உள்ளடக்கம் எவ்வளவுநன்னியமாக காட்சியுறுகிறது என்பதை அளவிடுகிறது. "அதிகபட்ச உள்ளடக்கம்" என்பது பொதுவாக உங்கள் ஹீரோ படமும், முக்கிய தலைப்பும் அல்லது முன்னணி நிலைக்கு மேலுள்ள பெரிய பகுதிகளை அடைகிறான்.

பொதிவான LCP சிக்கல்கள் மற்றும் தீர்வுகள்:

| சிக்கல் | தாக்கம் | தீர்வு | |---------|--------|-------| | பயன் படுத்தாத ஹீரோ படம் | +2-5s | WebP வடிவம், தகுதியான அளவீட்டு, fetchpriority="high" | | மாற்றியமைப்புகளை தடுக்கும் CSS/JS | +1-3s | முக்கிய CSS யைப் பின்வட்டமிடவும், கீழ்ப்படியா CSSயை defer செய்யவும் | | மெதுவான சேவை பதிலளிப்பு (TTFB) | +1-4s | CDN, சேவை கேஷிங், எஜ் செலுத்துதல் | | இணைய எழுத்துத்தொகுப்புகள் மாறிகள் நிறுத்துவது | +0.5-2s | font-display: swap, முக்கிய எழுத்துத்தொகுப்புகளை முன்கூட்டியே ஏற்று | | மூன்றாம் கணினி ஸ்கிரிப்டுகள் | +1-3s | பகுப்பாய்வுகளை/அலுவலகங்களை defer செய்யவும், விளம்பரங்களை சோலைவில் ஏற்றவும் |

LCP மேம்பாட்டு முன்னுரிமை:

<!-- 1. LCP படத்தை முன்கூட்டியே ஏற்றவும் -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. முக்கிய CSS இனை inline செய்யவும் (முதல் 14KB) -->
<style>/* முன்னணி நிலைமை மாதிரியே */</style>

<!-- 3. கீழ்படி CSS யை defer செய்யவும் -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

<!-- 4. தெளிவான அளவீட்களுடன் ஹீரோ படம் -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="விவரமான மாற்றமான உரை">

Quick win: உங்கள் முகப்புக்கே PageSpeed Insights ஐ இயக்கவும். இது LCP கூறின் அடையாளத்தைப் பாருங்கள். இது ஒரு படம் எனில், WebP ஐ இடமாற்றம் செய்து, தெளிவான அகலத்துடன்/எட்டு குறியீட்டு மற்றும் fetchpriority="high" ஐச் சேர்க்கவும். இதுதான் பொதுவாக LCP ஐ 1-2 விநாடிகள் குறைக்கும்.

INP — Interaction to Next Paint

INP பயனர்கள் தொடர்பு கொண்ட பக்கம் எவ்வளவுநன்னியமாக பதிலளிக்கிறது என்பதைக் கண்காணிக்கிறது (க் கிளிக், தொடு, தட்டச்சு). இது பக்கம் பார்வையில்கொள்ளும் போது அதன்Worst தொடர்பை கண்காணிக்கிறது மற்றும் அதை அட்டவணையாகப் பயன்படுத்துகிறது.

பொதிவான INP சிக்கல்கள் மற்றும் தீர்வுகள்:

| சிக்கல் | தாக்கம் | தீர்வு | |---------|--------|-------| | நீண்ட JavaScript பணிகள் | +200-1000ms | சிறு பணி பகுதிகளாக உடைப்புகள், requestIdleCallback உபயோகிக்கவும் | | காலை நிகழ்வுகள் | +100-500ms | நில்லதிருக்கும், தொகைகளை விவரிக்கவும், requestAnimationFrame உபயோகிக்கவும் | | தரம் ஆங்காங்கில் தண்டிக்கும் | +50-300ms | DOM படிப்புகளை/எழுத்துகளை கையால் பத்தி செய்யவும், will-change பயன்படுத்தவும் | | மூன்றாம் கணினி ஸ்கிரிப்டுகள் | +100-500ms | defer செய்யவும், நடவடிக்கைக்குப் பிறகு ஏற்றவும், Web Workers ஐ உபயோகிக்கவும் | | ஒருங்கிணைந்த API அழைப்புகள் | +200-2000ms | Async/await, ஏற்ற நிலைகள், ஊக்கந்தரிப்பு UI |

INP மேம்பாட்டு தொழில்நுட்பங்கள்:

// கெட்ட: முதன்மைத் துருவத்தை நின்றுவிடும்
button.addEventListener('click', () => {
  const data = heavyComputation(); // 400ms ரத்தாகும் நிலைக்குப் போகிறது
  updateDOM(data);
});

// நல்லது: முதன்மை பிருந்தத்தை விட்டுவிடும்
button.addEventListener('click', async () => {
  // உடனடி பின்னூட்டத்தை காட்சியிடவும்
  button.textContent = 'Loading...';

  // முக்கிய வேலைகளை துண்டுகளாக உடைக்கவும்
  await scheduler.yield();
  const data = heavyComputation();

  await scheduler.yield();
  updateDOM(data);
});

Quick win: Chrome DevTools > செயல்திறனைத் தேர்ந்தெடுக்கவும். உங்கள் இணையதளத்தில் க்ளிக் کریں மற்றும் "நீண்ட பணிகள்" (சிவப்பு புதிர்கள்) அடையாளங்கள் பார்க்கவும். இவை முதன்மைத் துருவத்தைத் தடுக்கும். அதிகப்படியான நீண்ட பணி பொதுவாக மூன்றாம் கணினி கருவி ஆகும் — அதை defer செய்யவும் அல்லது முதல் தொடர்புக்குப் பிறகு ஏற்றவும்.

CLS — Cumulative Layout Shift

CLS பார்வை நிலைத்தன்மையை அளவிடுகிறது — பக்கம் உள்ளடக்கம் எவ்வளவு வரிசையுடன் தழுவுகிறது என்பதை அளவிடுகிறது. ஒரு பொத்தானைச் கிளிக் செய்து பிறகு பக்கம் மாறினால், பயனர் எதுவுக்கோ தொடர்பு கொடுக்கிறார்களே என்று தொந்தரவு செய்வதில் பயனர் வரவேற்பை இனி யாரும் பார்க்க அழைக்க வேண்டும்.

பொதிவான CLS சிக்கல்கள் மற்றும் தீர்வுகள்:

| சிக்கல் | CLS தாக்கம் | தீர்வு | |---------|-----------|-------| | அளவீட்டுகளற்ற படங்கள் | 0.1-0.5 | எப்போதும் width மற்றும் height ஐக் கட்டாயமாக நிர்ணயிக்கவும் | | விளம்பரங்கள் பின்னடைவாக ஏற்றப்படும் | 0.1-0.3 | min-height உடன் இடத்தை பாதுகாத்துக்கொள்ளவும் | | இணைய எழுத்துத்தொகுப்புகள் மறுதொடக்கம் | 0.05-0.2 | font-display: optional அல்லது அளவிடப்பட்ட மாற்றங்களை தேர்வு செய்யவும் | | உள்ளடக்கம் அனைத்தும் உள்ளடக்கம் | 0.1-0.4 | இடத்தை முன்கூட்டியுங்கள், content-visibility பயன்படுத்தவும் | | குக்கீப் பேனர் உள்ளடக்கம் இடக்கவும் | 0.05-0.2 | Overlay வடிவமைப்பை (அன்னியமாக) பயன்பாட்டுடனே பயன்படுத்தவும் |

CLS தடுப்பு மறுபடியும்:

<!-- ஊடகங்கள் மூலமாக எப்போதும் அளவுகளை குறிப்பிடுங்கள் -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- மாறும் உள்ளடக்கம் தொடர்புடைய இடம் பாதுகாப்பு -->
<div style="min-height: 250px;">
  <!-- விளம்பரம் இங்கு ஏற்றப்படும் மற்றும் மாறாது -->
</div>

<!-- ஏற்பாட்டிற்கு உரிய ஊடகங்கள் -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Quick win: உங்கள் 10 முக்கிய பக்கங்களில் ஒவ்வொரு மற்றும் க்கும் தெளிவான width மற்றும் height பண்புகளைச் சேர்க்கவும். இந்த மாற்றம் CLS சிக்கலுக்கு மிக முக்கியமானவற்றில் ஒன்று — படங்கள் ஏற்றும்போது உள்ளடக்கம் மாறுவது கீழ்ப்படுத்தும் ஆதரிக்கும்.

2. மொபைல் உற்பத்தி

Google மொபைல் முதன்மை இணைப்புகளைப் பயன்படுத்துகிறது — உங்கள் மொபைல் அனுபவம் உங்கள் தரவரிசை அனுபவமாகும். உங்கள் இணையதளம் மொபைலில் துண்டாக இருந்தால், டெஸ்க் பதிப்பு எவ்வளவு சிறுவாக்கத்திலும் இருக்கிறதோ அதை யாரும் கணவின்றி அல்ல.

மொபைல் உற்பத்தி பட்டியலே:

| பாதகம் | தேவை | பொதுவான தோல்வி | |--------|-------|----------------| | பார்வைமேட்டா | width=device-width, initial-scale=1 | முற்றிலும் காணப்படுகிறதா கருதப்படவில்லை | | தொடு இலக்குகள் | குறைந்தது 44x44px | மிகச் சிறிய இணைப்புகள், அமைதி படிகள் | | எழுத்துரு அளவு | குறைந்தது 16px உடலில் உரை | 12px மொபைலில் படிக்க முடியாது | | உள்ளடக்கம் அகலம் | எதுவும் நேர்முறை ஓட்டம் இல்லை | நிரலாக்க விலை விசாரணை | | தொடு இடம் | இலக்குகளுக்கு இடையில் 8px குறைந்தது | அடுத்த இணைப்புகள் ஒருக்குறை | | பதிலளிக்கும் படங்கள் | srcset உடன் உரிய அளவுகள் | மொபைலில் டெஸ்க்டப் அளவிலான படங்கள் |

பதிலளிக்கும் வடிவமைப்பு முறைகள்:

/* மொபைல் முதன்மை அணுகுமுறையைப் பின்பற்றுங்கள் */
.container {
  padding: 16px;
  font-size: 16px;
}

/* தொடு-நடப் பாதகங்கள் */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* பதிலளிக்கும் எழுத்துரு */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }

/* நேர்முறை அலவலுக்கு இடமில்லை */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Google சோதனை செய்கிறது:

அலங்கோசிக்காமல் உள்ள உரை படிக்கக்கூடியது
இணைப்புகள்/பொத்தான்கள் குறைவாக ஒத்திருக்கமாட்டாது
உள்ளடக்கம் பார்வை அகலத்துக்கு பொருத்தமாக இருக்கும் (நேர்முறை ஓட்டம் இல்லை)
Flash அல்லதுUnsupported தொழில்நுட்பங்கள் இல்லை
இடையே உள்ள கட்சிகள் உள்ளடக்கத்தை மறைக்கமாட்டாது
பக்கம் 4G/3G இணைப்புகளில் விரைவாக ஏற்கிறதா

Quick win: உங்கள் போனில் உங்கள் இணையதளை திறக்கவும். ஒவ்வொரு பொத்தானும் மற்றும் இணைப்பைப்பார்க்கவும். நீங்கள் தேவையில்லாமல் வேறு ஒன்றைப் கிளிக் செய்யும் வாய்ப்பு இருந்தால் அல்லது எழுதும்போது படிக்க zoom செய்ய வேண்டுமென்றால் — இவை உங்கள் முன்னுரிமை தடுக்க வேண்டியவை.

3. அணுகுமுறை (WCAG)

அணுகுமுறை நேர்மறையைத் தாழ்த்துவது அல்ல — இது ஒரு SEO சிக்னல். Google இன் அடிப்படையான கணிதங்கள் அனைவரும் பயன்படுத்தக்கூடிய இணையதளங்களை விரும்புகின்றன, உள்பட திரை வாசகர்கள், விசைந்தது வரை மட்டுமே வழி தேடும் அல்லது பார்வை குறைபாடுகளுடன் உள்ள பயனர்கள். WCAG (வெబ్ உள்ளடக்க அணுகுமுறை வழிகாட்டிகள்) உள்ளடக்கம் மிகுந்த தரவரிசைகளைப் பெறுவதன் சேர்க்கை மாறுகின்றது.

முக்கிய அணுகுமுறை தேவை:

| பாதகம் | தேவை | SEO தாக்கம் | |---------|-------|-------------| | படங்களில் Alt உரை | அனைத்து உண்மையான படங்களுக்கு விளக்க உரை | நேர்மறை (பட கானொளி + அணுகுமுறை) | | தலைப்பு அமைப்பை | H1 → H2 → H3 எதையாவது தவிர்க்காமல் | நேர்மறை (உள்ளடக்க அமைப்பு) | | நிற எதிர்ப்பாடு | 4.5:1 சாதாரண உரைக்கு, 3:1 பெரிய உரைக்கு | மறுகுறைப்படுத்துகின்றது (பயன்திறன்) | | விசைப்பலகை வழிசெலுத்தல் | அனைத்து இடத்திலும் சம்மந்தப்பட்ட பகுதிகள் | மறுகுறைப்படுத்துகின்றது (பயன்திறன்) | | ARIA சொற்கள் | உரை இல்லாமல் உள்ள ஐக்கான்களுக்கு சொற்கள் | மறுகுறைப்படுத்துகின்றது (திரை வாசகர் UX) | | கவனம் | விசைப்பலகை வழிசெலுத்தலில் நிரூபிக்கப்படும் கவனத்தை | மறுகுறைப்படுத்துகின்றது (பயன்திறன்) | | படிவங்களை | ஒவ்வொரு உள்ளீடுக்கும் தொடர்புடைய | மறுகுறைப்படுத்துகின்றது (பயன்திறன்) | | இணைப்பின் உரை | விளக்கமானது (சொல்ல வேண்டாம் "இங்கு கிளிக் செய்யவும்") | நேர்மறை (அங்கீகார உரை SEO) |

அணுகுமுறை சோதனை செயல்முறை:

தானாகச் சோதனை — Lighthouse, axe-core, அல்லது WAVE ஐ இயக்கவும் (சிக்கல்களின் ~30-50% பிடிப்பது)
விசைப்பலகை சோதனை — Tab, Enter, Escape மூலம் உங்கள் இணையதளம் முழுமையாக உள்நுழையவும்
திரை வாசகர் சோதனை — முக்கிய பக்கங்களில் VoiceOver (Mac) அல்லது NVDA (Windows) பயன்படுத்தவும்
நிற எதிர்ப்பு — அனைத்து உரைகளை பின்னணிக்குச் சென்று சோதிக்கவும் (DevTools நிறம் சோதனைபொருள் பயன்படுத்தவும்)
Zoom சோதனை — 200% வருகையில் — அனைத்தும் வேலை செய்கிறதா?

பொதிவான அணுகுமுறை தீர்வுகள்:

<!-- படங்கள்: விளக்கமான alt உரை -->
<img src="chart.png" alt="ஆகஸ்ட் 2026 இல் 40% அதிகரித்துள்ள உயிரணுக்கான பட்டியல்">

<!-- பொத்தான்கள்: தெளிவான குறிச்சொற்கள் -->
<button aria-label="நவீன மெனு அணுகல்">
  <svg>...</svg> <!-- ஐக்கான்கள் மட்டும் கொண்ட பட்டனுக்கு aria-label தேவை -->
</button>

<!-- படிவங்கள்: தொடர்புடைய குறிச்சொற்கள் -->
<label for="email">மின் அஞ்சல் முகவரி</label>
<input type="email" id="email" name="email" required>

<!-- இணைப்புகள்: விளக்க உரை -->
<a href="/guide">முழுமை SEO வழிகாட்டியைப் படிக்கவும்</a>
<!-- இல்லை: <a href="/guide">இங்கு கிளிக் செய்யவும்</a> -->

<!-- விசைப்பலகை பயனர்களுக்கான வழிசெலுத்தலை தவிர்க்கவும் -->
<a href="#main-content" class="skip-link">முக்கிய உள்ளடக்கத்திற்கு மிதிவட்டம் பார்க்கவும்</a>

Quick win: உங்கள் முகப்பில் Lighthouse ஐ இயக்குங்கள், அணுகுமுறை பகுதிக்குள்ளது. "தவறும்" எனக் கொடுக்கப்பட்ட மெட்டுக்களை முதலில் நீக்கவும் — பொதுவாக இதுவரை உள்ளனவாகின்றன திரைவிலக்கான உரைகள், nbsp போன்றவை மற்றும் குறைந்த நிறங்களில் உள்ள உரைகள். இவை 30 நிமிடங்கள் ஆகும் என்று கிட்டத்தட்ட 20+ புள்ளிகளால் உங்கள் நிலைமையை மேம்படுத்துகின்றன.

4. பக்கம் அனுபவ சிக்னல்கள்

முதன்மை வலை மதிப்பீடுகள் பிறகு, Google பல பக்கம் அனுபவ சிக்னல்களை மதிப்பீடு செய்கிறது, அது தரவரிசைகளை பாதிக்கும்.

பக்கம் அனுபவ அம்சங்கள்:

| சிக்னல் | தேவை | சோதனை | |--------|-------|-------| | HTTPS | முழு இணையதளம் HTTPS இல் வழங்குதல் | குழப்பமான உள்ளடக்கம் அதை உடைக்கிறது | | இடையே உள்ளதாக இல்லை | உள்ளடக்கத்தை மறைக்காத அளவு | மொபைலில் 30% மேல் மூடியுள்ள அதன் விளம்பரங்கள் | | பாதுகாப்பான உலா | எந்த மால்வேர், புலம்புகழ், மோசம்செய்திகள் இல்லை | Google பாதுகாப்பான உலா நிலை | | மொபைல்-நண்பர் | மொபைல்-நண்பர் சோதனையை நிறைவு செய்கிறது | Google மொபைல்-நண்பர் சோதனை | | தவிர்க்கப்படும் விளம்பரங்கள் | விளம்பரங்கள் உள்ளடக்கத்தை கவனிக்கவேண்டும் | உள்ளடக்கமெனப் பயன்படுத்துதல் என்ற தவறான வசதிகள் |

இடைவேளைகள் வழிகாட்டிகள் (எது அனுமதிக்கப்பட்டது மற்றும் என்ன தண்டிக்கபடும்):

| அனுமதிக்கப்பட்டது | தண்டிக்கபடும் | |----------------|---------------| | வயது உறுதிப்பத்திரம் ( சட்டபூர்வமாக தேவை) | பக்கம் நிறைவு கொண்டது அது | | குக்கீ ஒப்புதல் ( சட்டபூர்வமான தேவை) | மின்னஞ்சல் ஏற்பட்டுள்ளது | | பதிவு கோரிக்கைகள் கொண்ட உள்ளடக்கம் | "எங்கள் செயலியை பதிவிறக்கம் செய்யவும்" உள்ளடக்கத்தைக் கட்டுக்கவலை இடத்துக்கு | | 30% என்ற அளவிலான தேவை | உள்ளடக்கத்தில் அடிப்படையில் உள்ளாள் | | பயனர் சுழன்று போகும் பின்விலக்கிலிருந்து | பயனர் எந்த உள்ளடக்கத்திற்கும் மட்டும் போகும் |

HTTPS பட்டியல்:

[ ] SSL சான்றிதழ் செல்லுபடியானது மற்றும் காலாவதியாக இல்லை
[ ] அனைத்து பக்கங்கள் HTTP → HTTPS (301) என்பதை மாற்றும்
[ ] எந்த குழப்பமான உள்ளடக்கம் (HTTP வளங்கள் HTTPS பக்கங்களில்) இல்லையா?
[ ] HSTS தலைப்பு இயக்கப்பட்டது (includeSubDomains உடன்)
[ ] உள்ளூர் இணைப்புகள் HTTPS (HTTP இல்லை)
[ ] சட்டத்திட்டம் HTTPS URLs ஐக் கொண்டுள்ளது
[ ] Canonical குறிச்சொற்கள் HTTPS ஐப் பயன்படுத்தும்

Quick win: குழப்பமான உள்ளடக்கம் தேடுங்கள் — உங்கள் பிரதான பக்கங்களில் DevTools கான்சோல் திறக்கவும். எந்த “Mixed Content” அடிப்படையுள்ள உங்களை HTTP வளங்களை HTTPS பக்கத்தில் ஏற்ற வேண்டும். இவை ஒரு முக்கிய பக்கம் எதிர்பார்ப்பு குறைபாடுகளிலிருந்து மேல் ஆக்கமாக உருவாகும்.

5. வழிசெலுசு முறைகள்

சிறந்த வழிசெலுசு பயனர்களுக்கும் தேடுபொறிகளுக்கும் உதவுகிறது. பயனர் தேவைப்பட்டவற்றைப் பின்வட்டியுங்கள். Google கிராலர்களும் உறுதிப்படுத்துகிறது.

வழிசெலுசு சிறந்த நடைமுறைகள்:

| மாதிரி | நன்மை | செயல்திறன் | |--------|-------|-------------| | த level கட்டமைப்பாகும் | 3 கிளிக்குகளுக்குள்ள பக்கம் | Hub பக்கங்கள், உரை நிலைக்கோலிகள் | | உரை நிலைக்கோலிகள் | பயனர் எங்கு இருக்கின்றன என்பதைப் புரிகின்றனர் | Schema markup + தெளிவான பாதை | | தீவிர URL அமைப்பு | முன்னுரிமைக்கும் கூடிய வழிகள் | /category/subcategory/page | | ஆடைத் போக்கு | இரண்டாம் நிலைகளுக்கு சேமிப்பு | சட்டம், தொடர்பு, சட்டப்பூர்வம் | | உள்ளமைப்பு தேடல் | பயனர்கள் குறிப்பிட்ட உள்ளடக்கம் காண்கின்றனர் | தேடல் பெட்டி பரிந்துறைகள் கொண்டுள்ளது | | தொடர்புடைய உள்ளடக்கம் | சென்றுசலவு குறைப்பு, ஆழத்தை அதிகரிக்கவும் | "தொடர்ந்த கட்டுரைகள்" பகுதிகள் |

சகசுகந்த இணையதளம் கட்டமைப்பில்:

முகப்பு (எல்லாமே முக்கியமானவற்றுடன் 1 கிளிக்கு)
├── /products/ ( வகைகள் கூட்டம் — அனைத்து தயாரிப்புகளுக்கு இணைப்புகள்)
│ ├── /products/category-a/
│ │ ├── /products/category-a/product-1
│ │ └── /products/category-a/product-2
│ └── /products/category-b/
├── /blog/ (உள்ளடக்க கூட்டம் — அனைத்து பதிவுகளுக்கும் இணைப்புகள்)
│ ├── /blog/topic-cluster-1/ (pillar பக்கம்)
│ │ ├── /blog/subtopic-1a
│ │ └── /blog/subtopic-1b
│ └── /blog/topic-cluster-2/
├── /tools/ (கூட்டப்பட்ட பயன்பாடுகள்)
└── /about/ (நம்பகமில்லாத பக்கங்கள்)

உரை நிலைக்கோலியை அமைக்க:

<!-- தெளிவான உரை நிலைக்கோல் -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">முகப்பு</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">SEO வழிகாட்டி கட்டு 5</li>
  </ol>
</nav>

<!-- Schema markup (BreadcrumbList) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "முகப்பு", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "SEO வழிகாட்டி கட்டு 5" }
  ]
}
</script>

வழிசெலுசு சிவப்பு கொள்கைகள்:

முகப்பின் 4 கிளிக்குகளை அதிகமாக (மிகத் தேன்மணம்)
உரை நிலைக்கோல் இல்லாது (பயனர் மற்றும் Google சந்தேகமாக)
JavaScript மட்டுமே வழிசெலுத்தலாக (கிராலர்கள் இணைப்புகளை வீட்டுக்குமேலிருந்து)
அடியுரைகளை மீறுதல் (அவற்றுக்கு எந்த உள்ளமைப்பு உணர்வுகளோ இல்லையா?)
200+ இணைப்புகள் கொண்ட மகா மெனு (ஒரு மீது வெலுக்கு முழுமையாக விலக்குவது)

Quick win: உங்கள் முக்கிய மாற்றம் பக்கங்களைச் சோதிக்கவும் — முகப்பில் எவ்வளவு கிளிக்கள்? இது 3 ஐ விட அதிகமாக இருந்தால், உங்கள் முகப்புக்கு அல்லது வகை குழாய்களிலிருந்து நேரடி இணைப்புகளைச் சேர்க்கவும். எவ்வளவு மூன்றாவது செல்வாக்கு மற்றும் கிரால்களை குறைவாக்கின்றது.

6. முன்னணி உற்பத்தி

பயனர் மையமாக இருந்தால் அழுக்கும் அல்லது விலகும் என்பது தீர்மானிக்கிறது மற்றும் உள்ளடக்கம் உடனே உணர்ந்தாலும் உள்ளதற்கு உள்ள மற்றும் தேவைப்படும் தேவை.

முன்னணி உற்பத்தி தேவைகள்:

| பாதகம் | ஏன் | பொதுவான தோல்வி | |--------|-----|----------------| | தெளிவான தலைப்பு (H1) | கேள்விக்கு முக்கியத்துவத்தை உறுதிப் பிடிக்க | பொதுவான அல்லது பற்றியது | | மதிப்பு முன்மொழியுங்கள் | ஏன் அவர்கள் இங்கே இருக்க வேண்டும்? | வினாடி கீழே | | முதன்மை CTA | அவர்களால் என்ன செய்கின்றன? | மறைவாக அல்லது தெளிவில்லாமல் | | ஹீரோ படம்/இலவே | பார்வையின் ஈர்ப்பு | மெதுவான அலவலத்திற்கு காரணமாகி LCP சிக்கல்கள் | | நம்பகமான சிக்னல்கள் | அவர்கள் உங்களை நம்பவேண்டும்? | எதுவும் இடம்பெறாது, விமர்சனங்கள், அல்லது சான்றிதழ்கள் |

முன்னணி உற்பத்தி வடிவமைப்பில்:

Desktop (1440px பார்வை):
┌──────────────────────────────────────┐
│ வழிசெலுத்தல் கட்டுப்படிமை                        │
├──────────────────────────────────────┤
│                                      │
│  H1: கேள்விக்கு வெளிப்படும் தெளிவான தலைப்பு   │
│  துணையும்: மதிப்பு முன்மொழியுங்கள்       │
│                                      │
│  [முதன்மை CTA நொடியை சேமிக்கிறது]               │
│                                      │
│  நம்பகமான சிக்னல்கள்: சின்னங்கள், பார்வை, பண்ணைகள் │
│                                      │
├──────────────────────────────────────┤
│ ↓ உள்ளடக்கம் கீழே தொடர்கிறது         │
└──────────────────────────────────────┘

Mobile (375px பார்வை):
┌────────────────────┐
│ Nav (hamburger)    │
├────────────────────┤
│                    │
│ H1: தலைப்பு       │
│ (மொபைலில் குறைந்தது)│
│                    │
│ [CTA Button]       │
│ (முழு அகலத்தில், 44px+)│
│                    │
│ நம்பகத்தன்மை      │
│                    │
├────────────────────┤
│ ↓ மேலும் மிதிவட்டம் │
└────────────────────┘

முக்கிய முன்னணி உள்ள கருத்துக்கள்:

H1 பெற்றுள்ளவர்கள் நடப்பதிலேயே படிக்காத முறையில் தெரிய வேண்டும் (தேவைக்கு இணக்கமாக)
CTA முன்னணி முறையிலேயே தெரியவேண்டும் (ஏற்றுவந்தவர்களை குறைக்க)
முன்னணி உள்ளடக்கத்தில் யாரும் இடையீடு ஏற்படுவதில்லை (CLS கொலை)
ஹீரோ படம் விரைவாக ஏற்ற வேண்டும் (இது பொதுவாக LCP கூறு)
மொபைல்: முன்னணி உள்ளடக்கத்தை குறைக்கவும் (குறைந்த பார்வை இடம்)

Quick win: உங்கள் முகப்பின் மொபைல் ஸ்கிரின்ட்பேஸ்தொகுப்புகளை எடுத்துக்கொள்கின்றோம் (375px அகலத்துடன்). H1 தெளிவாகவேண்டும்? CTA பொத்தான் தெளிவாகவேண்டும்? உங்கள் இணையதளம் 2 விநாடிகளுக்குள் எதை செய்வதெனக் கூறுவீர்தலா? "இல்லை" என்ற பதில் பற்றிய ஒன்று இருந்தால், நீங்கள் பயணிகளை இழக்கவில்லையா?

UX ஆய்வு போக்கு

இந்தச் சோதனையை உங்கள் முக்கிய பக்கங்களுக்கு எடுத்துக்கொள்ளுங்கள்:

[ ] LCP 2.5 விநாடிகளுக்குள் (ஹீரோ படம் மேம்படுத்தப்பட்டது, முக்கிய CSS inline செய்யப்பட்டது)
[ ] INP 200msக்குக் கீழே (நீண்ட JavaScript பணிகள் சிக்கலில்லை)
[ ] CLS 0.1 க்குக் கீழே (எல்லா படங்களும் அளவுகளை கொண்டுள்ளன, நிலைபேசி பகுதிகளை உண்டாக்காதிருக்கின்றன)
[ ] மொபைல் நண்பர்கள் (44px தொடு இலக்குகள், 16px+ உரை, பொருந்திய பள்ளிகள்)
[ ] அணுகும் (alt உரை, தலைப்பு அமைப்பு, நிற எதிர்ப்பு, விசைப்பலகை nav)
[ ] HTTPS எங்கும் (எந்த குழப்பமான உள்ளடக்கம் இல்லை, HSTS இயக்கப்படுகிறது)
[ ] இடையூறு இல்லாத இடையே உள்ளதோ (ஒப்புதல்கூட்டங்கள் சரியாக உள்ளன, உள்ளடக்கத்தை மறைக்கும் popup இல்லை)
[ ] உரை நிலைக்கோல் உள்ளன (BreadcrumbList schema உடன்)
[ ] முக்கியமாக 4 கிளிக்குக்களுக்குள் இருப்பது (மாற்றம் இருக்கும்)
[ ] முன்னணி உற்பத்தி சோதிக்கப் பெறுதல் (H1 தெளிவாகவேண்டும், CTA தெளிவாகவேண்டும், LCP விரைவாகவேண்டும்)

LANGR எப்படி உங்கள் UX ஐ ஸ்கேன் செய்கிறது

LANGR யின் UX தொடர்பான ஸ்கேன் தொகுப்புகள் இங்கே உள்ளன:

முதன்மை வலை மதிப்பீடுகள் தொகுதி — Chrome பயன்பாட்டின் அனுபவ மாநாட்டில் LCP, INP, CLS கணக்கிடுகிறது (உண்மை பயனர் தரவுகள்)
PageSpeed தொகுதி — முழுமையான Lighthouse செயல்திறன் மதிப்பீடு மொபைலுக்கும் டெஸ்க்டப்பிற்கும்.
மொபைல் தொகுதி — பார்வை அமைப்பு, தொடும் இலக்குகளை அளவிடுவது, உரையின் படிக்கத்தன்மை
அணுகுமுறை தொகுதி — WCAG எதிரொலிகள் உள்ளன, ARIA பயன்பாட்டு உள்கூறு, நிற எதிர்ப்பு
வடிவமைப்பு சோதனை தொகுப்பு — AI மூலம் இயக்கப்படும் மொபைல் மற்றும் Desktop வடிவங்களை மதிப்பீடு செய்கிறது.
பக்கம் அனுபவம் தொகுதி — இடையூறு கண்டறிதல், HTTPS நிலை, பாதுகாப்பான உலா.

இந்த தொகுப்புகள் ஒவ்வொரு ஸ்கானிலும் இயக்கப்படுகின்றன, உங்கள் இணையதளத்தில் பயணிகள் அனுபவிக்கும் முறையைப் பற்றிய முழு கருத்தை வழங்குகிறது — மேலும் என்னக் கண்ணுக்குப் பிடிக்க வேண்டும் என்பதற்கு.

பொதுவான UX தவறுகள் (சிக்கலான பங்கு)

மொபைல் புறக்கணித்தல் — 60%+ தேடல்கள் மொபைலில்; மொபைலில் பட்டு = தரவரிசைகளை தேட்டிக்கொண்டேன்
மினைவீதற்படங்கள் — மெதுவான LCP இல் அடிப்படையான காரணம் (எப்போது கடினமான சிக்கலுக்கு உதவுகிறது)
தெளிவான படங்களுக்கான அளவுகளை மேற்கொள்கிறது — நிலைபேசிகள் CLS மதிப்பீடுகளை அழிக்கின்றன
மூன்றாம் மேடை விவரங்கள் — படித்தாலும், Analytical, Ads INP க்கு தாக்கம்
அணுகும்போது தவிர்க்கப்பட்ட அடிப்படைகள் — எந்த இயலாமையைப் பயன்படுத்தவேண்டிய முதன்மை இல்லாமல் இல்லை, தவிர்க்கப்பட்ட ஈரங்களை, நாளில் நேர்க்கால்களை, அல்லது இட்டியல் நிலைகளை மேற்கொள்கிறது
உள்ளடக்கம் அடிப்படைகாண்பதற்கான இடையூறு — பயனர் உள்ளடக்கத்தை பார்க்கும்கோசிக்கையாலே முழு எழுத்தோங்ட்களாகுமா?
எழுத்துக்களாக்கத்தில் இருக்கும் — முக்கியமான பக்கம் 5+ கிளிக்குகளுக்கு இடையூறு
முன்னணி இடம் மதிப்பிடம் — பயனர் எப்போது முன்னணி வடிவங்களை scroll ஆகும் போது என்ன செய்யும் என்பது தெரியாது.

அடுத்தது என்ன?

கட்டுரை 6: கண்காணிப்பு & தரவரிசை — நீங்கள் அளவிடாததை மேம்படுத்த முடியாது. வார்த்தைகள் நிலைகள், மதிப்பீடு கண்காணித்தல், மாற்றம் அறிக்கைகள் மற்றும் நிலைத்துறை.

இந்த வழிகாட்டி LANGR இன் 13-மட்ட பயிற்சியின் பகுதியே ஆகும். சர்வதேச ஆய்வுக்கு வைத்திருக்க பார்க்கவும் உங்கள் இணையதளத்தின் நிலை.