ਐਸਈਓ ਗਾਈਡ ਕਦਮ 5: ਯੂਐਕਸ / ਯੂਜ਼ਰ ਅਨੁਭਵ

ਇਹ 13-ਕਦਮਾਂ ਦੇ ਐਸਈਓ ਗਾਈਡ ਦਾ ਪੰਜਵਾਂ ਕਦਮ ਹੈ। ਯੂਜ਼ਰ ਅਨੁਭਵ ਹੁਣ ਸਿੱਧਾ ਰੈਂਕਿੰਗ ਦਾ ਫੈਕਟਰ ਹੈ — ਗੂਗਲ ਮਾਪਣ ਕਰਦਾ ਹੈ ਕਿ ਉਪਭੋਗਤਾ ਤੁਹਾਡੀ ਸਾਈਟ ਨਾਲ ਕਿਵੇਂ ਸੰਬੰਧ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਰੰਤ, ਪਹੁੰਚ ਯੋਗ, ਸੁਖਦ ਅਨੁਭਵ ਦੇਣ ਵਾਲੀਆਂ ਸਾਈਟਾਂ ਨੂੰ ਇਨਾਮ ਦਿੰਦਾ ਹੈ।

---

ਸਾਮਗਰੀ ਦੀ ਯੋਜਨਾ (ਕਦਮ 3) ਇਹ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿਹੜਾ ਸਮੱਗਰੀ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਦੇ ਹੋ। ਲਿੰਕ ਬਿਲਡਿੰਗ (ਕਦਮ 4) ਤੁਹਾਡੇ ਅਧਿਕਾਰਤਾ ਨੂੰ ਸਾਬਤ ਕਰਦੀ ਹੈ। ਪਰ ਜੇ ਉਪਭੋਗਤਾ ਤੁਹਾਡੇ ਪੰਨੇ 'ਤੇ ਪਹੁੰਚਦੇ ਹਨ ਅਤੇ ਫੁਟਕ ਅਵਰੋਗਰਤੀ ਹੋ ਜਾਂਦੇ ਹਨ ਕਿਉਂਕਿ ਇਹ ਮੰਨ-ਮਾਹੀ, ਮੋਬਾਈਲ 'ਤੇ ਫੂਟ ਜਾਂ ਪਹੁੰਚ ਯੋਗ ਨਹੀਂ ਹਨ — ਇਹ ਸਾਰੀ ਗੱਲ ਨਾ ਜਾਣਦੀ ਹੈ। ਗੂਗਲ ਇਹ ਸਿਗਨਲ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ ਅਤੇ ਰੈਂਕਿੰਗ ਨੂੰ ਸਕਾਰਾਤਕ ਕਰਨ ਲਈ ਇਸ ਦਾ ਉਪਯੋਗ ਕਰਦਾ ਹੈ।

2021 ਤੋਂ, ਗੂਗਲ ਦੇ ਪੰਨਾ ਅਨੁਭਵ ਅੱਪਡੇਟ ਨੇ ਯੂਐਕਸ ਨੂੰ ਇੱਕ ਪੁਸ਼ਟੀਤ ਰੈંકਿੰਗ ਫੈਕਟਰ ਬਣਾਇਆ। 2024 ਵਿੱਚ, INP (Interaction to Next Paint) ਨੇ FID ਦਾ ਸਥਾਨ ਲਿਆ, ਜੋ ਕਿ ਮੁੱਖ ਵੈਬ ਵਿਟਲ ਹੈ। 2026 ਵਿੱਚ, ਇਹ ਸਿਗਨਲ ਹੋਰ ਵੀ ਮਹੱਤਵਪੂਰਨ ਹੋਣਗੇ ਜਿਥੇ ਗੂਗਲ ਵੱਧਰੇਨੇ ਉਪਭੋਗਤਾ ਸਾਫ਼ਿਸ਼ੀਅਨਸੀ ਮੈਟਰਿਕਾਂ ਨੂੰ ਪਰੰਪਰਾਗਤ ਸਿਗਨਲਾਂ 'ਤੇ ਪ੍ਰਾਇਰਟੀ ਦਿੰਦਾ ਹੈ।

ਯੂਐਕਸ ਐਸਈਓ ਲਈ ਕੀ ਕਵਰ ਕਰਦਾ ਹੈ

ਯੂਐਕਸ ਅਨੁਕੂਲਤਾ ਦੇ 6 ਖੇਤਰ ਹਨ:

1. ਮੁੱਖ ਵੈਬ ਵਿਟਲਸ — ਗੂਗਲ ਦੇ ਅਧਿਕਾਰੀ ਯੂਐਕਸ ਮੈਟਰਿਕਸ (LCP, INP, CLS)
2. ਮੋਬਾਈਲ ਅਨੁਕੂਲਤਾ — ਜਵਾਬਦਾਰ ਡਿਜ਼ਾਇਨ, ਟਚ ਟਾਰਗਟ, ਵਿਊਪੋਰਟ
3. ਪਹੁੰਚ ਯੋਗਤਾ (WCAG) — ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਹਰ ਕਿਸੇ ਲਈ ਵਰਤਣ ਯੋਗ ਬਣਾਉਣਾ
4. ਪੰਨਾ ਅਨੁਭਵ ਸਿਗਨਲ — HTTPS, ਕੋਈ ਇੰਟਰਸਟਿਸ਼ਲ ਨਹੀਂ, ਸੁਰੱਖਿਅਤ ਬ੍ਰਾਊਜ਼ਿੰਗ
5. ਨੈਵੀਗੇਸ਼ਨ ਪੈਟਰਨ — ਸਾਈਟ ਦਾ ਢਾਂਚਾ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਅਤੇ ਕਰੌਲਰਾਂ ਨੂੰ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ
6. ਅੱਧ-ਫੋਲਡ ਅਨੁਕੂਲਤਾ — ਉਪਭੋਗਤਾ ਦੇਖਦੇ ਹਨ ਬਗੈਰ ਸਕ੍ਰੋਲਿੰਗ ਦੇ

1. ਮੁੱਖ ਵੈਬ ਵਿਟਲਸ (CWV)

ਮੁੱਖ ਵੈਬ ਵਿਟਲਸ ਗੂਗਲ ਦੇ ਤਿੰਨ ਗਿਣਤੀ ਹੋਣ ਵਾਲੇ ਯੂਐਕਸ ਮੈਟਰਿਕਸ ਹਨ। ਇਹ Chrome ਯੂਜ਼ਰ ਅਨੁਭਵ ਰਿਪੋਰਟ (CrUX) ਡੇਟਾ ਵਿੱਚ ਟਰੈਕ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਰੈਂਕਿੰਗ 'ਤੇ ਪ੍ਰਭਾਵ ਪਾਉਂਦੇ ਹਨ।

ਤਿੰਨ ਮੈਟਰਿਕ:

| ਮੈਟਰਿਕ | ਮਾਪ | ਚੰਗਾ | ਸੁਧਾਰ ਦੀ ਲੋੜ | ਖਰਾਬ | |---------|-----|-------|---------------|-------| | LCP (ਲਾਰਜਸਟ ਕੰਟੈਂਟਫੁਲ ਪੇਂਟ) | ਲੋਡਿੰਗ ਗਤੀ | < 2.5ਸੈ | 2.5ਸੈ - 4.0ਸੈ | > 4.0ਸੈ | | INP (Interaction to Next Paint) | ਜਵਾਬਦੇਹਤਾ | < 200ਮਿਲੀਸੈਕਿੰਡ | 200ਮਿਲੀਸੈਕਿੰਟ - 500ਮਿਲੀਸੈਕਿੰਟ | > 500ਮਿਲੀਸੈਕਿੰਟ | | CLS (Cumulative Layout Shift) | ਵਿਜੁਅਲ ਸਥਿਰਤਾ | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — ਲਾਰਜਸਟ ਕੰਟੈਂਟਫੁਲ ਪੇਂਟ

LCP ਮਾਪਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪੰਨੇ ਦਾ ਮੁੱਖ ਸਮੱਗਰੀ ਕਿੰਨੀ ਦੇਰ ਵਿੱਚ ਪ੍ਰਗਟ ਹੁੰਦਾ ਹੈ। "ਲਾਰਜਸਟ ਸਮੱਗਰੀ" ਆਮ ਤੌਰ 'ਤੇ ਤੁਹਾਡੀ ਹੀਰੋ ਚਿੱਤਰ, ਮੁੱਖ ਸਿਰਲੇਖ ਜਾਂ ਸਭ ਤੋਂ ਵੱਡਾ ਅੱਧ-ਫੋਲਡ ਬਲੌਕ ਹੁੰਦਾ ਹੈ।

ਆਮ LCP ਸਮੱਸਿਆਵਾਂ ਅਤੇ ਫਿਕਸ:

| ਸਮੱਸਿਆ | ਪ੍ਰਭਾਵ | ਫਿਕਸ | |---------|--------|------| | ਬਿਨਾਂਅਨੁਕੂਲ ਹਿਰੋ ਚਿੱਤਰ | +2-5ਸੈ | WebP ਫਾਰਮੈਟ, ਸਹੀ ਆਕਾਰ, fetchpriority="high" | | ਰੇਂਡਰ-ਬਲੌਕਿੰਗ CSS/JS | +1-3ਸੈ | ਇਨਲਾਈਨ ਮਹੱਤਵਪੂਰਨ CSS, ਗੈਰ-ਮਹੱਤਵਪੂਰਨ ਨੂੰ ਡਿਫਰ ਕਰੋ | | ਹੌਲੀ ਸਰਵਰ ਜਵਾਬ (TTFB) | +1-4ਸੈ | CDN, ਸਰਵਰ ਕੈਸ਼ਿੰਗ, ਐਜ ਡਿਪਲੋਇਮੈਂਟ | | ਵੈਬ ਫੰਟਾਂ ਦੀ ਰੇਂਡਰ ਰੋਕਣਾ | +0.5-2ਸੈ | font-display: swap, ਮਹੱਤਵਪੂਰਨ ਫੰਟਾਂ ਨੂੰ ਪਹਿਲਾਂ ਲੋਡ ਕਰੋ | | ਤੀਜੀ ਪਾਰਟੀ ਸਕ੍ਰਿਪਟ | +1-3ਸੈ | ਵਿਸ਼ਲੇਸ਼ਣ/ਚਰਚਾ ਵਿਜ਼ੇਟਾਂ ਨੂੰ ਡਿਫਰ ਕਰੋ, ਵਿਗਿਆਪਨ ਨੂੰ ਸੁਸਤ ਲੋਡ ਕਰੋ |

LCP ਅਨੁਕੂਲਤਾ ਦੀ ਪ੍ਰਾਇਰਿਟੀ:

<!-- 1. LCP ਚਿੱਤਰ ਨੂੰ ਪ੍ਰੀਲੋਡ ਕਰੋ -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. ਮਹੱਤਵਪੂਰਨ CSS ਨੂੰ ਇਨਲਾਈਨ ਕਰੋ ( ਪਹਿਲੇ 14KB) -->
<style>/* ਸਿਰਫ਼ ਅੱਧ-ਫੋਲਡ ਸ਼ੈਲੀਆਂ */</style>

<!-- 3. ਗੈਰ-ਮਹੱਤਵਪੂਰਨ CSS ਨੂੰ ਡਿਫਰ ਕਰੋ -->
<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="ਵਰਣਨਾਤਮਕ ਐਲਟ ਟੈਕਸਟ">

ਤੇਜ਼ ਫਾਇਦਾ: ਆਪਣੇ ਹੋਮਪੇਜ 'ਤੇ PageSpeed Insights ਚੱਲਾਓ। LCP ਤੱਤ 'ਤੇ ਨਜ਼ਰ ਮਾਰੋ ਜਿਸਨੂੰ ਇਹ ਪਛਾਣਦਾ ਹੈ। ਜੇ ਇਹ ਇੱਕ ਚਿੱਤਰ ਹੈ, ਤਾਂ ਇਸਨੂੰ WebP ਵਿੱਚ ਬਦਲੋ, ਵਿਸ਼ੇਸ਼ ਚੌੜਾਈ/ਉੰਚਾਈ ਸੈਟ ਕਰੋ, ਅਤੇ fetchpriority="high" ਸ਼ਾਮਲ ਕਰੋ। ਇਹ ਹੀ ਅਕਸਰ LCP ਨੂੰ 1-2 ਸੈਕੰਡਾਂ ਤੋਂ ਘਟਾਉਂਦਾ ਹੈ।

INP — Interaction to Next Paint

INP ਮਾਪਦਾ ਹੈ ਕਿ ਜਦੋਂ ਉਪਭੋਗਤਾ ਸੰਪਰਕ ਕਰਦੇ ਹਨ (ਕਲਿੱਕ, ਟੈਪ, ਟਾਈਪ) ਤਾਂ ਤੁਹਾਡਾ ਪੰਨਾ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਜਵਾਬ ਦਿੰਦਾ ਹੈ। ਇਹ ਪੇਜ਼ ਵਿਜ਼ਿਟ ਦੌਰਾਨ ਸਭ ਤੋਂ ਬਰਾਬਰ ਇੰਟਰੈਕਸ਼ਨ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਅੰਕੜੇ ਵਜੋਂ ਵਰਤਦਾ ਹੈ।

ਆਮ INP ਸਮੱਸਿਆਵਾਂ ਅਤੇ ਫਿਕਸ:

| ਸਮੱਸਿਆ | ਪ੍ਰਭਾਵ | ਫਿਕਸ | |---------|--------|------| | ਲੰਬੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੰਮ | +200-1000ਮਿਲੀਸੈਕਿੰਟ | ਛੋਟੇ ਕੰਮਾਂ ਵਿੱਚ ਵੰਡੋ, requestIdleCallback ਦੀ ਵਰਤੋਂ ਕਰੋ | | ਭਾਰੀ ਇਵੈਂਟ ਹੈਂਡਲਰ | +100-500ਮਿਲੀਸੈਕਿੰਟ | ਡੀਬਾਊਂਸ, ਥਰੋਟਲ, requestAnimationFrame ਦੀ ਵਰਤੋਂ ਕਰੋ | | ਲੇਆਉਟ ਥ੍ਰੈਸ਼ਿੰਗ | +50-300ਮਿਲੀਸੈਕਿੰਟ | DOM ਪੜ੍ਹਨ/ਲਿਖਣ ਨੂੰ ਬੈਚ ਕਰੋ, will-change ਦੀ ਵਰਤੋਂ ਕਰੋ | | ਤੀਜੀ ਪਾਰਟੀ ਸਕ੍ਰਿਪਟ | +100-500ਮਿਲੀਸੈਕਿੰਟ | ਡਿਫਰ ਕਰੋ, ਇੰਟਰਾਕਸ਼ਨ ਦੇ ਬਾਅਦ ਲੋਡ ਕਰੋ, Web Workers ਦੀ ਵਰਤੋਂ ਕਰੋ | | ਸਮਰਥਕ API ਕਾਲਾਂ | +200-2000ਮਿਲੀਸੈਕਿੰਟ | Async/await, ਲੋਡਿੰਗ ਸਥਿਤੀਆਂ, ਆਰਜੂਕ UI |

INP ਅਨੁਕੂਲਤਾ ਦੀਆਂ ਤਕਨਿਕਾਂ:

// ਬੁਰਾ: ਮੁਖ ਥ੍ਰੈੱਡ ਤੋਂ ਰੋਕਦਾ ਹੈ
button.addEventListener('click', () => {
  const data = heavyComputation(); // 400ms ਲਈ ਰੋਕਦਾ ਹੈ
  updateDOM(data);
});

// ਚੰਗਾ: ਮੁਖ ਥ੍ਰੈੱਡ ਨੂੰ ਬਖਸ਼ਦਾ ਹੈ
button.addEventListener('click', async () => {
  // ਤੁਰੰਤ ਜਵਾਬ ਦਿਖਾਉ
  button.textContent = 'ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ...';

  // ਭਾਰੀ ਕੰਮ ਨੂੰ ਖੰਡਾਂ ਵਿੱਚ ਵੰਡੋ
  await scheduler.yield();
  const data = heavyComputation();

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

ਤੇਜ਼ ਫਾਇਦਾ: Chrome DevTools > Performance ਟੈਬ ਖੋਲ੍ਹੋ। ਆਪਣੇ ਸਾਈਟ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ "ਲੰਬੇ ਕੰਮਾਂ" (ਲਾਲ ਤਿਕੋਣ) ਲਈ ਦੇਖੋ। ਇਹ ਮੁਖ ਥ੍ਰੈੱਡ ਨੂੰ ਰੋਕ ਰਹੇ ਹਨ। ਸਭ ਤੋਂ ਵੱਡਾ ਲੰਬਾ ਕੰਮ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਤੀਸਰੇ ਪਾਰਟੀ ਸਕ੍ਰਿਪਟ ਹੁੰਦਾ ਹੈ — ਇਸਨੂੰ ਡਿਫਰ ਕਰੋ ਜਾਂ ਪਹਿਲੀ ਇੰਟਰੈਕਸ਼ਨ ਦੇ ਬਾਅਦ ਲੋਡ ਕਰੋ।

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 | ਓਵਰਲੇ ਡਿਜ਼ਾਇਨ (ਨਹੀਂ ਧੱਕਣਾ) |

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>

ਤੇਜ਼ ਫਾਇਦਾ: ਆਪਣੇ ਟਾਪ 10 ਪੰਨਿਆਂ 'ਤੇ ਹਰ ਅਤੇ ਨੂੰ ਵਿਸ਼ੇਸ਼ width ਅਤੇ height ਲਾਓ। ਇਹ ਇਕਲ ਬਦਲਾਅ ਸਭ ਤੋਂ ਆਮ CLS ਸਮੱਸਿਆ ਨੂੰ ਦੂਰ ਕਰਦਾ ਹੈ — ਚਿੱਤਰਾਂ ਲੋਡ ਹੋਣਾ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਹੇਠਾਂ ਧੱਕਣਾ।

2. ਮੋਬਾਈਲ ਅਨੁਕੂਲਤਾ

ਗੂਗਲ ਮੋਬਾਈਲ ਪਹਿਲਾਂ индексਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ — ਤੁਹਾਡਾ ਮੋਬਾਈਲ ਅਨੁਭਵ ਤੁਹਾਡੀ ਰੈੰਕਿੰਗ ਦਾ ਅਨੁਭਵ ਹੈ। ਜੇ ਤੁਹਾਡੀ ਸਾਈਟ ਮੋਬਾਈਲ 'ਤੇ ਫੂਟ ਹੋ ਰਹੀ ਹੈ, ਤਾਂ ਇਹ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੈ ਕਿ ਡੈਸਕਟਾਪ ਸੰਸਕਰਣ ਵੀ ਕਿੰਨਾ ਪੂਰਾ ਹੈ।

ਮੋਬਾਈਲ ਅਨੁਕੂਲਤਾ ਦੀ ਜਾਂਚ ਸੂਚੀ:

| ਤੱਤ | ਡਿਮਾਂਡ | ਆਮ નિષ્ફળ | |---------|---------|------| | ਵਿਊਪੋਰਟ ਮੈਟਾ | 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;
}

ਮੋਬਾਈਲ SEO ਸਿਗਨਲ ਜੋ ਗੂਗਲ ਜਾਂਚਦਾ ਹੈ:

• ਬਿਨਾਂ ਜ਼ੂਮ ਕੀਤੇ ਪੜ੍ਹਣਯੋਗ ਟੈਕਸਟ
• ਲਿੰਕ/ਬਟਨ ਜ਼ਿਆਦਾ ਨੇੜੇ ਨਹੀਂ
• ਸਮੱਗਰੀ ਵਿਊਪੋਰਟ ਦੀ ਚੌੜਾਈ 'ਚ ਫਿੱਟ ਹੁੰਦੀ ਹੈ (ਕੋਈ ਅੱਡੀ ਸਿਖਰ ਨਹੀਂ)
• ਕੋਈ ਫਲੈਸ਼ ਜਾਂ ਮਨਜ਼ੂਰ ਨਾ ਕੀਤੇ ਤਕਨਾਲੋਜੀਆਂ
• ਇੰਟਰਸਟਿਸ਼ਲ ਸਮੱਗਰੀ ਮੁਹਿੰਮ ਦੇ ਸਮੇਂ ਬਲਾਕ ਨਹੀਂ ਕਰਦੀ
• ਪੰਨਾ 4G/3G ਕਨੈਕਸ਼ਨਾਂ 'ਤੇ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦਾ ਹੈ

ਤੇਜ਼ ਫਾਇਦਾ: ਆਪਣੇ ਫੋਨ 'ਤੇ ਆਪਣੀ ਸਾਈਟ ਖੋਲ੍ਹੋ। ਹਰ ਬਟਨ ਅਤੇ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਜੇ ਤੁਸੀਂ ਗਲਤੀ ਨਾਲ ਕੋਈ ਗਲਤ ਚੀਜ਼ ਕਲਿੱਕ ਕਰਦੇ ਹੋ ਕਿਉਂਕਿ ਟਾਰਗਟ ਬਹੁਤ ਨੇੜੇ ਹਨ, ਜਾਂ ਆਪਾਂ ਟੈਕਸਟ ਪੜ੍ਹਨ ਲਈ ਪਿੰਚ-ਜ਼ੂਮ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗਾ — ਉਥੇ ਤੁਹਾਡੇ ਸਾਡੀਆਂ ਸ਼ੁਰੂਆਤੀ ਥਾਂ ਕਾਰਜ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

3. ਪਹੁੰਚ ਯੋਗਤਾ (WCAG)

ਪਹੁੰਚ ਯੋਗਤਾ ਸਿਰਫ ਸਹੀ ਨਹੀਂ ਹੈ — ਇਸਨੂੰ ਇੱਕ SEO ਸਿਗਨਲ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। ਗੂਗਲ ਦੇ ਅਲਗੋਰੀਦਮ ਉਹ ਸਾਈਟਾਂ ਨੂੰ ਪ੍ਰਾਥਮਿਕਤਾ ਦਿੰਦੇ ਹਨ ਜੋ ਹਰ ਕਿਸੇ ਦੁਆਰਾ ਵਰਤਣ ਯੋਗ ਹਨ, ਜਿਸ ਵਿੱਚ ਸਕ੍ਰੀਨ ਰੀਡਰ, ਕिबੋਰਡ-ਕੇਵਲ ਨੈਵੀਗੇਸ਼ਨ ਜਾਂ ਵਿਜ਼ੂਅਲ ਰੋਗਾਂ ਦੇ ਨਾਲ ਦਰਜੀਬੰਦ ਹਨ। WCAG (ਵੇਬ ਸਮੱਗਰੀ ਪਹੁੰਚ ਯੋਗਤਾ ਮਿਆਰ) ਦੀ ਪਾਲਨਾ ਬਿਹਤਰ ਰੈਂਕਿੰਗ ਨਾਲ ਸਬੰਧਿਤ ਹੈ।

ਅਗਵਾਈ ਪਹੁੰਚ ਯੋਗਤਾ ਦੀਆਂ ਲੋੜਾਂ:

| ਤੱਤ | ਡਿਮਾਂਡ | SEO ਪ੍ਰਭਾਵ | |---------|---------|------------| | ਚਿੱਤਰਾਂ 'ਤੇ ਐਲਟ ਟੈਕਸਟ | ਸਾਰੇ ਮਹੱਤਵਪੂਰਨ ਚਿੱਤਰਾਂ ਲਈ ਵਰਣਨਾਤਮਕ ਟੈਕਸਟ | ਸਿੱਧਾ (ਚਿੱਤਰ SEO + ਪਹੁੰਚ ਯੋਗਤਾ) | | ਸਿਰਲੇਖ ਦੀ ਢਾਂਚਾ | H1 → H2 → H3 ਬਿਨਾਂ ਛੱਡਣ ਦੇ | ਸਿੱਧਾ (ਸੰਵਾਦ ਢਾਂਚਾ) | | ਰੰਗ ਵਿਰੋਧ | 4.5:1 ਆਮ ਟੈਕਸਟ ਲਈ, 3:1 ਵੱਡੇ ਟੈਕਸਟ ਲਈ | ਪਰੋਥਾਕ (ਵਰਤਣਯੋਗਤਾ) | | ਕਿਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ | ਸਾਰੇ ਇੰਟਰੈਕਟਿਵ ਤੱਤ ਟੈਬ ਦੁਆਰਾ ਪਹੁੰਚ ਰੱਖਣਯੋਗ | ਪਰੋਥਾਕ (ਵਰਤਣਯੋਗਤਾ) | | ARIA ਫੋਨ | Icons, buttons ਲਈ ਲੇਬਲਾਂ ਬਿਨਾਂ ਟੈਕਸਟ | ਪਰੋਥਾਕ (ਸਕ੍ਰੀਨ ਰੀਡਰ UX) | | ਫੋਕਸ ਇੰਡਿਕੇਟਰ | ਕਿਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਫੋਕਸ ਰਿੰਗ | ਪਰੋਥਾਕ (ਵਰਤਣਯੋਗਤਾ) | | ਫਾਰਮ ਲੇਬਲ | ਹਰ ਇੰਪੁੱਟ ਨੇ ਸੰਬੰਧਤ ਹੈ | ਪਰੋਥਾਕ (ਵਰਤਣਯੋਗਤਾ) | | ਲਿੰਕ ਦੀ ਟੈਕਸਟ | ਵਰਣਨਾਤਮਕ (ਨਹੀਂ "ਇੱਥੇ ਕਲਿੱਕ ਕਰੋ") | ਸਿੱਧਾ (ਐਂਕਰ ਟੈਕਸਟ SEO) |

ਪਹੁੰਚ ਯੋਗਤਾ ਦੀ ਜਾਂਚ ਪ੍ਰਕਿਰਿਆ:

1. ਆਟੋਮੈਟਿਕ ਸਕੈਨ — Lighthouse, axe-core, ਜਾਂ WAVE ਚਲਾਓ ( ~30-50% ਸਮੱਸਿਆਂ ਨੂੰ ਪਕੜਦਾ ਹੈ)
2. ਕਿਬੋਰਡ ਟੈਸਟ — ਸਿਰਫ਼ ਟੈਬ, ਐਂਟਰ, ਅਤੇ ਐਸਕੇਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਹਾਡੇ ਸਮੂਹ ਸਾਈਟ ਦਾ ਨੈਵੀਗੇਟ ਕਰੋ
3. ਸਕ੍ਰੀਨ ਰੀਡਰ ਟੈਸਟ — ਮੁੱਖ ਪੰਨਿਆਂ 'ਤੇ VoiceOver (Mac) ਜਾਂ NVDA (Windows) ਦੀ ਵਰਤੋਂ ਕਰੋ
4. ਰੰਗ ਵਿਰੋਧ — ਸਭ ਟੈਕਸਟ ਨੂੰ ਚਿੱਟੇ ਪਿਛੋਕੜਾਂ ਦੀ ਖੋਜ ਕਰੋ (DevTools ਸੰਰਚਨਾ ਚੈਕਰ ਦੀ ਵਰਤੋਂ ਕਰੋ)
5. ਜ਼ੂਮ ਟੈਸਟ — 200% ਤੱਕ ਜ਼ੂਮ ਕਰੋ — ਕੀ ਸਭ ਕੁਝ ਫਿਰ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ?

ਸਧਾਰਨ ਪਹੁੰਚ ਯੋਗਤਾ ਦੇ ਫਿਕਸ:

<!-- ਚਿੱਤਰਾਂ: ਵਰਣਨਾਤਮਕ ਐਲਟ ਟੈਕਸਟ -->
<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">ਪੂਰੇ ਐਸਈਓ ਗਾਈਡ ਨੂੰ ਪੜ ਲਵੋ</a>
<!-- NOT: <a href="/guide">ਇੱਥੇ ਕਲਿੱਕ ਕਰੋ</a> -->

<!-- ਕਿਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਨੈਵੀਗੇਸ਼ਨ ਬੰਦ ਕਰੋ -->
<a href="#main-content" class="skip-link">ਮੁੱਖ ਸਮੱਗਰੀ 'ਤੇ ਛੱਡ ਦਿਓ</a>

ਤੇਜ਼ ਫਾਇਦਾ: ਆਪਣੀ ਮੂਲ ਪੰਨ੍ਹੇ 'ਤੇ ਲਾਈਟਹੌਸ ਚਲਾਓ ਜਿਸ ਕਦਰ ਪਹੁੰਚ ਯੋਗਤਾ ਸ਼੍ਰੇਣੀ ਹੈ। ਪਹਿਲਾਂ "ਫੇਲ" ਹੋਏ ਸਭ ਕੁਝ ਠੀਕ ਕਰੋ - ਇਹ ਜ਼ਿਆਦਾਤਰ ਗੈਰਮੌਜੂਦ ਐਲਟ ਟੈਕਸਟ, ਗੈਰਮੌਜੂਦ ਫਾਰਮ ਲੇਬਲ ਅਤੇ ਘੱਟ ਕਾਂਟ੍ਰਾਸਟ ਟੈਕਸਟ ਹੁੰਦੇ ਹਨ। ਇਹ ਫਿਕਸ ਆਮ ਤੌਰ 'ਤੇ 30 ਮਿੰਟ ਲੈਂਦੇ ਹਨ ਅਤੇ ਤੁਹਾਡੀ ਸਕੋਰ ਨੂੰ 20+ ਅੰਕਾਂ ਨਾਲ ਸੁਧਾਰਦੇ ਹਨ।

4. ਪੰਨਾ ਅਨੁਭਵ ਸਿਗਨਲ

ਮੁੱਖ ਵੈਬ ਵਿਟਲਸ ਦੇ ਇਲਾਵਾ, ਗੂਗਲ ਹੋਰ ਕਈ ਪੰਨਾ ਅਨੁਭਵ ਸਿਗਨਲਾਂ ਦਾ ਮੁਲਿਆਕੰਨ ਕਰਦਾ ਹੈ ਜੋ ਰੈਂਕਿੰਗ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ।

ਪੰਨਾ ਅਨੁਭਵ ਦੇ ਕਾਰਕ:

| ਸਿਗਨਲ | ਡਿਮਾਂਡ | ਜਾਂਚ | |--------|---------|-------| | HTTPS | ਪੂਰੀ ਸਾਈਟ HTTPS 'ਤੇ ਸਰਵਰ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ | ਮਿਸ਼੍ਰਿਤ ਸਮੱਗਰੀ ਵਿਰੋਧ ਕਰਦਾ ਹੈ | | ਕੋਈ ਛਿਪਾ ਨਾਹ | ਮੁਹਿੰਮ ਦਾ ਸਮਾਂ ਸਮੱਗਰੀ ਨੂੰ ਬਲਾਕ ਨਾ ਕਰੋ | ਮੋਬਾਈਲ 'ਤੇ >30% ਲੋੜੀਂਦੇ ਪੋਪਅਪ | | ਸੁਰੱਖਿਅਤ ਬ੍ਰਾਉਜ਼ਿੰਗ | ਕੋਈ ਮਲਵੇਅਰ, ਫਿਸ਼ਿੰਗ, ਧੋਖੇਬਾਜ਼ ਸਮੱਗਰੀ ਨਹੀਂ | ਗੂਗਲ ਸੁਰੱਖਿਅਤ ਬ੍ਰਾਉਜ਼ਿੰਗ ਦੀ ਸਥਿਤੀ | | ਮੋਬਾਈਲ-ਫਰੈਂਡਲੀ | ਮੋਬਾਈਲ-ਫਰੈਂਡਲੀ ਟੈਸਟ ਪਾਸ ਕਰਨਾ | ਗੂਗਲ ਮੋਬਾਈਲ-ਫਰੈਂਡਲੀ ਟੈਸਟ | | ਕੋਈ ਧੋਖੇਬਾਜ਼ ਵਿਗਿਆਪਨ | ਵਿਗਿਆਪਨ ਸਮੱਗਰੀ ਦੇ ਤੌਰ 'ਤੇ ਬਦਲੇ ਨਹੀਂ | ਵੰਡਣ ਵਾਲੇ ਡਾਊਨਲੋਡ ਬਟਨ |

ਇੰਟਰਸਟਿਸ਼ਲ ਮਿਆਰੀਆਂ (ਕੀ ਆਗਿਆ ਹੈ ਅਤੇ ਕੀ ਦੰਡਿਤ ਕੀਤਾ ਗਿਆ ਹੈ):

| ਆਗਿਆ ਹੈ | ਦੰਡਿਤ | |---------|-----------| | ਉਮਰ ਦੀ ਪੁਸ਼ਟੀ (ਕਾਨੂੰਨੀ ਰੂਪ ਵਿੱਚ ਲੋੜੀਂਦਾ) | ਪੰਨਾ ਦੇ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਪੂਰੀ-ਸਕਰੀਨ ਪੋਪਅਪ | | ਕੁਕੀ ਸਮਾਜਿਕੱਤਾ (ਕਾਨੂੰਨੀ ਰੂਪ ਵਿੱਚ ਲੋੜੀਂਦਾ) | ਈਮੇਲ ਦੇ ਦਾਖ਼ਲੇ ਦਾ ਸਮਾਂ ਸਮੱਗਰੀ ਨੂੰ ਝੁਕਾਉਣਾ | | ਭੁਗਤਾਨਸੰਤ ਸਾਮਗਰੀ ਲਈ ਲੌਗਇਨ ਦੀ ਨਾੜੀ | "ਸਾਡਾ ਐਪ ਡਾਊਨਲੋਡ ਕਰੋ" ਸਮੱਗਰੀ ਨੂੰ ਬਲਾਕ ਕਰ ਰਿਹਾ ਹੈ | | ਛੋਟੇ ਬੈਨਰ ਜੋ <30% ਸਕ੍ਰੀਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ | ਸਮੱਗਰੀ 'ਤੇ ਪਹੁੰਚ ਤੋਂ ਪਹਿਲਾਂ ਕਾਊਂਟਡਾਊਨ ਟਾਈਮਰ | | ਉਪਭੋਗਤਾ ਦੇ ਸਕ੍ਰੋਲ ਪਿਛੇ | ਉਪਭੋਗੀ ਦੇ ਸਮੇਂ ਸਮੱਗਰੀ ਦੇਖਣ ਤੋਂ ਪਹਿਲਾਂ |

HTTPS ਕੈਲੰਡਰ:

• [ ] SSL ਪ੍ਰਮਾਣਪੱਤਰ ਮੰਜ਼ੂਰ ਹੈ ਅਤੇ ਸਮਾਪਤ ਨਹੀਂ ਹੋਇਆ
• [ ] ਸਾਰੇ ਪੰਨਿਆਂ ਦਾ ਨਿਰਦੇਸ਼ HTTP → HTTPS (301)
• [ ] ਕੋਈ ਮਿਸ਼੍ਰਿਤ ਸਮੱਗਰੀ ਨਹੀਂ (HTTPS ਪੰਨਿਆਂ 'ਤੇ HTTP ਸਰੋਤ)
• [ ] HSTS ਹੈਡਰ ਸਮਰਪਿਤ (ਵਿਚ ਸਮੇਤ)
• [ ] ਅੰਦਰੂਨੀ ਲਿੰਕ HTTPS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ (HTTP ਨਹੀਂ)
• [ ] Sitemap HTTPS URLs ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ
• [ ] ਕੈਨੋਨਿਕਲ ਟੈਗ HTTPS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ

ਤੇਜ਼ ਫਾਇਦਾ: ਮਿਸ਼੍ਰਿਤ ਸਮੱਗਰੀ ਦੀ ਜਾਂਚ ਕਰੋ - ਆਪਣੇ ਕੁੰਜੀ ਪੰਨਾਂ 'ਤੇ DevTools ਕਨਸੋਲ ਖੋਲ੍ਹੋ। ਕੋਈ "ਮਿਸ਼੍ਰਿਤ ਸਮੱਗਰੀ" ਚੇਤਾਵਨੀ ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ HTTPS ਪੰਨੇ 'ਤੇ HTTP ਸਰੋਤ ਲੋਡ ਕਰ ਰਹੇ ਹੋ। ਇਹ URLs ਨੂੰ HTTPS 'ਤੇ ਅੱਪਡੇਟ ਕਰੋ। ਇਹ ਪੰਨਾ ਅਨੁਭਵ ਦੇ ਸਮੱਸਿਆਵਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

5. ਨੈਵੀਗੇਸ਼ਨ ਪੈਟਰਨ

ਚੰਗੀ ਨੈਵੀਗੇਸ਼ਨ ਉਪਭੋਗਤਾਅ ਅਤੇ ਖੋਜ ਇੰਜਣਾਂ ਦੋਹਾਂ ਲਈ ਮਦਦ ਕਰਦੀ ਹੈ। ਉਪਭੋਗਤਾਵਾਂ ਜਲਦੀ ਹੀ ਆਪਣੀ ਲੋੜ ਦੀ ਚੀਜ਼ ਲੱਭ ਸਕਦੇ ਹਨ। ਗੂਗਲ ਕਰੌਲਰ ਤੁਹਾਡੇ ਸਾਈਟ ਦੀ ਵਿੰਦਾ ਨੂੰ ਸਮਝਦੇ ਹਨ ਅਤੇ ਪੰਨਾ ਰੈਂਕਿੰਗ ਨੂੰ ਸਮਰੱਥਾਵਾਨ ਰਵਾਈਗੀ ਕਰਦੇ ਹਨ।

ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਸ੍ਰੇਸ਼ਠ ਅਭਿਆਸ:

| ਪੈਟਰਨ | ਲਾਭ | ਕਾਰਜ | |---------|---------|----------------| | ਫਲੈਟ ਆਰਕੀਟੈਕਚਰ | ਹੋਮ 'ਚ 3 ਕਲਿਕਾਂ ਦੇ ਅੰਦਰ ਪੰਨਿਆਂ | ਹੱਬ ਪੰਨੇ, ਬਰੇੱਡਕ੍ਰੰਬ | | ਬਰੇੱਡਕ੍ਰੰਬ | ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇਹ ਜਾਣਨ ਦੇ ਰਹੇ ਹਨ ਕਿ ਉਹ ਕਿੱਥੇ ਹਨ | Schema ਮਾਰਕੀਅਪ + ਵਿਜ਼ੀਬਲ ਟਰੇਲ | | ਤਰਕਿਕ 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/ (pillars page)
│   │   ├── /blog/subtopic-1a
│   │   └── /blog/subtopic-1b
│   └── /blog/topic-cluster-2/
├── /tools/ (ਯੂਟਿਲਿਟੀ ਪੰਨੇ)
└── /about/ (ਭਰੋਸਾ ਪੰਨੇ)

ਬਰੇੱਡਕ੍ਰੰਬ ਕਾਰਜ:

<!-- ਵਿਜ਼ੀਬਲ ਬਰੇੱਡਕ੍ਰੰਬ -->
<nav aria-label="ਬਰੇੱਡਕ੍ਰੰਬ">
  <ol>
    <li><a href="/">ਗ੍ਰਹਿ</a></li>
    <li><a href="/blog/">ਬਲੌਗ</a></li>
    <li aria-current="page">ਐਸਈਓ ਗਾਈਡ ਕਦਮ 5</li>
  </ol>
</nav>

<!-- Schema ਮਾਰਕੀਅਪ (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": "ਬਲੋਗ", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "ਐਸਈਓ ਗਾਈਡ ਕਦਮ 5" }
  ]
}
</script>

ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਲਾਲ ਝੰਡੀਆਂ:

• ਹੋਮਪੇਜ ਨੂੰ 4 ਕਲਿਕਾਂ ਤੋਂ ਦੂਰ ਪੰਨਾ (ਬਹੁਤ ਗਹਿਰਾ)
• ਕੋਈ ਬਰੇੱਡਕ੍ਰੰਬ ਨਹੀਂ (ਉਪਭੋਗਤਾਵਾਂ ਅਤੇ ਗੂਗਲ ਸੰਦਰਭ ਗਵਾ ਦਿੰਦੇ ਹਨ)
• ਜਾਵਾਸਕ੍ਰਿਪਟ-ਕੇਵਲ ਨੈਵੀਗੇਸ਼ਨ (ਕ੍ਰੋਲਰ ਸੰਕੇਤ ਗਵਾ ਸਕਦੇ ਹਨ)
• ਅਨਾਧੀ ਪੰਨੇ (ਉਸ ਪੰਨੇ ਲਈ ਕੋਈ ਅੰਦਰੂਨੀ ਲਿੰਕ ਨਹੀਂ)
• ਮੀਗਾ ਮੀਨੂੰਜ਼ ਨਾਲ 200+ ਲਿੰਕ (ہر لنک کی قیمت کو کم کرتا ہے)

ਤੇਜ਼ ਫਾਇਦਾ: ਆਪਣੇ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਕ ਪਰਿਵਰਤਨ ਪੰਨਿਆਂ ਦੀ ਜਾਂਚ ਕਰੋ - ਹੌਮ ਪੇਜ ਤੋਂ ਕਿੰਨੇ ਕਲਿੱਕ ਹਨ? ਜੇ 3 ਤੋਂ ਵੱਧ ਹਨ, ਤਾਂ ਆਪਣੇ ਹੋਮਪੇਜ ਜਾਂ ਸ਼੍ਰੇਣੀ ਹੱਬਾਂ ਤੋਂ ਸਿੱਧੇ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰੋ। ਹਰ ਡਿੱਗ ਦੌਰ ਲਈ ਘਟਾਏ ਜਾਂਦੇ ਹਨ ਅਤੇ ਦੌਰੇ ਫਰਕ ਅਤੇ ਰੈਂਕਿੰਗ ਨੂੰ ਪ੍ਰਭਾਵਿੰਤ ਕਰਦਾ ਹੈ।

6. ਅੱਧ-ਫੋਲਡ ਅਨੁਕੂਲਤਾ

ਉਹ ਸਮੱਗਰੀ ਜੋ ਉਪਭੋਗਤਾ ਸਕ੍ਰੋਲਿੰਗ ਤੋਂ ਪਹਿਲਾਂ ਦੇਖਦੇ ਹਨ, ਇਹ ਨੂਹ ਨਹੀਂ ਦਿੰਦੀ ਕਿ ਉਹ ਰਹਿਣਗੇ ਜਾਂ ਚਲੇ ਜਾਣਗੇ। ਅੱਧ-ਫੋਲਡ ਸਮੱਗਰੀ ਨੂੰ ਤੁਰੰਤ ਕੀਮਤ ਸੰਚਾਰਿਤ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਅਤੇ ਲਕੇਨ ਦੀ ਖੋਜ ਦੀ ਖੋਜ ਨਾਲ ਸੰਮੇਲਤ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

ਅੱਧ-ਫੋਲਡ ਦੀ ਲੋੜ:

| ਤੱਤ | ਕਿਉਂ | ਆਮ નિષ્ફળ | |---------|-----|----------------| | ਸਾਫ਼ ਸਿਰਲੇਖ (H1) | ਖੋਜ ਦੇ ਉਦੇਸ਼ ਨਾਲ ਸੰਬੰਧਿਤ | ਜਨਰਲ ਜਾਂ ਮਿਸਿੰਗ | | ਕੀਮਤ ਦੀ ਪ੍ਰਸਤੀਤੀ | ਉਹ ਕਿਸੇ ਚੀਜ਼ ਲਈ ਰਹਿਣਾ ਚਾਹੁੰਦੇ ਹਨ? | ਫੋਲਡ ਦੇ ਹੇਠਾਂ ਦਬੇ ਹੋਏ | | ਮੁਖ ਸੀਟੀਏ | ਉਹ ਅਗਲੇ ਕੀ ਕਰਨ ਵਾਲੇ ਹਨ? | ਛੁਪੇ ਹੋਏ ਜਾਂ ਅਸਪਸ਼ਟ | | ਹੀਰੋ ਚਿੱਤਰ/ਮੀਡੀਆ | ਵਿਜ਼ੂਅਲ ਜੁੜਨਾ | ਥਰੇਡ ਵਿੱਚ ਬਾਤ ਹੋ ਰਿਹਾ ਹੈ, LCP ਸਮੱਸਿਆ ਬਣਾਉਂਦਾ ਹੈ | | ਭਰੋਸਾ ਸੰਕੇਤ | ਉਹ ਤੁਹਾਡੇ 'ਤੇ ਭਰੋਸਾ ਕਰਦੇ ਹਨ? | ਕੋਈ ਲੋਗੋ, ਸਮੀਖਿਆ ਜਾਂ ਅਧਿਕਾਰ ਨਹੀਂ |

ਅੱਧ-ਫੋਲਡ ਦਾ ਡਿਜ਼ਾਈਨ ਪੈਟਰਨ:

ਡੈਸਕਟਾਪ (1440px ਵਿਊਪੋਰਟ):
┌──────────────────────────────────────┐
│ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ                     │
├──────────────────────────────────────┤
│                                      │
│  H1: ਸਿਰਫ़ ਖੋਜ ਨਾਲ ਇੰਝ ਦੱਸਦਾ ਹੈ  │
│  ਉਪਸ਼ਿਰਲੇਖ: ਕੀਮਤ ਦੀ ਪੇਸ਼ਕਸ਼         │
│                                      │
│  [ਮੁੱਖ ਸੀਟੀਏ ਬਟਨ]                │
│                                      │
│  ਭਰੋਸਾ ਸੰਕੇਤ: ਲੋਗੋ, ਅੰਕੜੇ, ਬੇਬਲ    │
│                                      │
├──────────────────────────────────────┤
│ ↓ ਸਮੱਗਰੀ ਫੋਲਡ ਦੇ ਹੇਠਾਂ ਜਾਰੀ ਰਹਿੰਦੀ ਹੈ │
└──────────────────────────────────────┘

ਮੋਬਾਈਲ (375px ਵਿਊਪੋਰਟ):
┌────────────────────┐
│ ਨੈਵ (ਹੰਬਰਗਰ)     │
├────────────────────┤
│                    │
│ H1: ਸਿਰਲੇਖ        │
│ (ਮੋਬਾਈਲ 'ਤੇ ਛੋਟਾ) │
│                    │
│ [ਸੀਟੀਏ ਬਟਨ]      │
│ (ਪੂਰੀ ਚੌੜਾਈ, 44px+) │
│                    │
│ ਭਰੋਸਾ ਸਲਾਈਡ      │
│                    │
├────────────────────┤
│ ↓ ਹੋਰ ਲਈ ਸਕ੍ਰੋਲ ਕਰੋ │
└────────────────────┘

ਅੱਧ-ਫੋਲਡ ਦੇ ਜਾਣਗੇ ਕਾਇਦਿਆਂ:

• H1 ਨੂੰ ਸਕ੍ਰੋਲ਼ਿੰਗ ਤੋਂ ਬਿਨਾਂ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ (ਖੋਜ ਦੇ ਉਦੇਸ਼ਾਂ ਨਾਲ ਮਿਲਦਾ ਹੈ)
• ਸੀਟੀਏ ਸਕ੍ਰੋਲ਼ਿੰਗ ਤੋਂ ਬਿਨਾਂ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ (ਛੱਡਣਾ ਘੱਟ ਹੁੰਦਾ ਹੈ)
• ਅੱਧ-ਫੋਲਡ ਸਮੱਗਰੀ ਵਿੱਚ ਕੋਈ ਲੇਆਉਟ Shift ਨਹੀਂ (CLS ਕਿਲਰ)
• ਹੀਰੋ ਚਿੱਤਰ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ (ਇਹ ਆਮਤੌਰ 'ਤੇ LCP ਤੱਤ ਹੁੰਦਾ ਹੈ)
• ਮੋਬਾਈਲ: ਅੱਧ-ਫੋਲਡ ਸਮੱਗਰੀ ਨੂੰ ਘਟਾਓ (ਘੱਟ ਵਿਉਪੋਰਟ ਸਪੇਸ)

ਤੇਜ਼ ਫਾਇਦਾ: ਆਪਣੇ ਮੋਬਾਈਲ (375px ਪੌੜੀਆਂ) 'ਤੇ ਆਪਣੀ ਹੋਮਪੇਜ਼ ਦਾ ਸਕਰੀਨਸ਼ਾਟ ਲਓ। ਕੀ H1 ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਹੈ? ਕੀ ਇੱਕ CT ਕਿਤਾਬ 'ਤੇ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਹੈ? ਕੀ ਤੁਸੀਂ ਇਹ ਦੱਸ ਸਕਦੇ ਹੋ ਕਿ ਸਾਈਟ ਨੇ 2 ਸਕਿੰਟਾਂ ਵਿੱਚ ਕੀ ਕੀਤਾ? ਜੇ ਕਿਸੇ ਦੇ ਜਵਾਬ "ਨਹੀਂ" ਹੈ, ਤਾਂ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਯਥार्थਤਾ ਕਮ ਕਰ ਰਹੇ ਹਨ।

ਯੂਐਕਸ ਆਡਿਟ ਜਾਂਚ ਸੂਚੀ

ਆਪਣੇ ਹੇਠਾਂ ਤੋਂ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਕ ਪੰਨਿਆਂ ਲਈ ਚੱਲੋ:

• [ ] LCP 2.5 ਸਕਿੰਟਾਂ ਦੇ ਅੰਦਰ (ਹੀਰੋ ਚਿੱਤਰ ਅਨੁਕੂਲਿਤ, ਮਹੱਤਵਪੂਰਕ CSS ਇਨਲਾਈਸ)
• [ ] INP 200 ਮਿਲੀਸੈਕਿੰਟਾਂ ਦੇ ਅੰਦਰ (ਕੋਈ ਲੰਬਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੰਮ ਨਹੀਂ ਰੋਕਦਾ)
• [ ] CLS 0.1 ਦੇ ਅੰਦਰ (ਸਾਰੇ ਚਿੱਤਰਾਂ ਦੇ ਮਾਪ, ਕੋਈ ਦੇਰ ਲੋਡ ਸ਼ਿਫਟ ਨਹੀਂ)
• [ ] ਮੋਬਾਈਲ-ਫਰੈਂਡਲੀ (44px ਟਚ ਟਾਰਗਟ, 16px+ ਟੈਕਸਟ, ਕੋਈ ਅੱਡੀ ਸਿਖਰ ਨਹੀਂ)
• [ ] ਪਹੁੰਚ ਯੋਗਤਾ (ਐਲਟ ਟੈਕਸਟ, ਸਿਰਲੇਖ ਦੀ ਪਿੰਗ, ਰੰਗ ਕਰੋ)
• [ ] HTTPS ਹਰ ਥਾਂ (ਕੋਈ ਮਿਸ਼੍ਰਤ ਸਮੱਗਰੀ ਨਹੀਂ, HSTS ਸਰਵਰ ਕੀਤਾ)
• [ ] ਕੋਈ ਛਿਪਾ ਨਹੀਂ (ਸਮਜੌਤਿਆਂ ਓਵਰਲੇ OK, ਸਮੱਗਰੀ-ਬਲਾਕ ਪੋਪਅਪ ਨਹੀਂ)
• [ ] ਬਰੇੱਡਕ੍ਰੰਬ ਮੌਜੂਦ (ਸਹੀ BreadcrumbList Schema ਨਾਲ)
• [ ] ਕੋਈ ਵੀ ਮੁਹਤਵਪੂਰਨ ਪੰਨੇ ਲਈ 4 ਕਲਿਕਾਂ ਵਿੱਚ ਪੰਨਾ ਦੇ ਆਲੇ-ਦੁਆਂਲੇ ਦੀ ਗਹਿਰਾਈ
• [ ] ਅੱਧ-ਫੋਲਡ ਅਨੁਕੂਲਿਤ (H1 ਦਿਖਾਈ ਦਿੰਦਾ, ਸੀਟੀਏ ਦਿਖਾਈ ਦਿੰਦਾ, ਤੇਜ਼ LCP)

LANGR ਤੁਹਾਡੇ ਯੂਐਕਸ ਨੂੰ ਕਿਵੇਂ ਸਕੈਨ ਕਰਦਾ ਹੈ

LANGR ਦੇ ਯੂਐਕਸ ਸੰਬੰਧਿਤ ਸਕੈਨ ਮੋਡੀਊਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

• ਮੁੱਖ ਵੈਬ ਵਿਟਲਸ ਮੋਡੀਊਲ — Chrome ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਰਿਪੋਰਟ ਤੋਂ LCP, INP, CLS ਨੂੰ ਮਾਪਦਾ ਹੈ (ਅਸਲ ਉਪਭੋਗਤਾ ਡੇਟਾ)
• ਪੀਜਾ ਬੁੱਕ ਮੋਡੀਊਲ — ਮੋਬਾਈਲ ਅਤੇ ਡੈਸਕਟਾਪ ਸਕੋਰਨ ਦੇ ਨਾਲ ਪੂਰੀ ਲਾਇਟਹੌਸ ਪ੍ਰਦਰਸ਼ਨ ਆਡਿਟ
• ਮੋਬਾਈਲ ਮੋਡੀਊਲ — ਵਿਊਪੋਰਟ ਸੰਰਚਨਾ, ਟਚ ਟਾਰਗੇਟ ਦੀ ਮਾਪ, ਟੈਕਸਟ ਪੜ੍ਹਨਯੋਗਤਾ
• ਪਹੁੰਚ ਯੋਗਤਾ ਮੋਡੀਊਲ — WCAG ਪਾਲਨਾ ਜਾਂਚ, ARIA ਦੀ ਵਰਤੋਂ, ਰੰਗ ਵਿਰੋਧ
• ਲੇਆਊਟ ਸਕੈਨ ਮੋਡੀਊਲ — ਮੋਬਾਈਲ ਅਤੇ ਡੈਸਕਟਾਪ ਦੇ ਲੇਆਊਟਸ ਦੀ AI-ਪਾਵਰਡ ਮੁਲਿਆਕੰਨ
• ਪੰਨਾ ਅਨੁਭਵ ਮੋਡੀਊਲ — ਇੰਟਰਸਟਿਸ਼ਲ ਦੀ ਖੋਜ, HTTPS ਦੀ ਸਥਿਤੀ, ਸੁਰੱਖਿਅਤ ਬ੍ਰਾਊਜ਼ਿੰਗ

ਇਹ ਮੋਡੀਊਲਾਂ ਹਰ ਸਕੈਨ 'ਤੇ ਚੱਲਦੇ ਹਨ, ਤੁਹਾਨੂੰ ਇਹ ਸਹੀ ਤਸਵੀਰ ਦੇਣਗੇ ਕਿ ਉਪਭੋਗਤਾਵਾਂ ਤੁਹਾਡੇ ਸਾਈਟ ਦਾ ਅਨੁਭਵ ਕਿਵੇਂ ਕਰਦੇ ਹਨ — ਅਤੇ ਇਸਨੂੰ ਬਿਹਤਰ ਰੈਂਕਿੰਗ ਲਈ ਕੀ ਠੀਕ ਕਰਨਾ ਹੈ।

ਆਮ ਯੂਐਕਸ ਸਮੱਸਿਆਵਾਂ (ਪ੍ਰਭਾਵ ਦੇ ਅਨੁਸਾਰ)

1. ਮੋਬਾਇਲ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਨਾ — 60%+ ਖੋਜਾਂ ਮੋਬਾਈਲ; ਟੁੱਟਿਆ ਹੋਇਆ ਮੋਬਾਈਲ = ਟੁੱਟਿਆ ਹੋਇਆ ਰੈਂਕਿੰਗ
2. ਬਿਹਤਰ ਚਿੱਤਰ — ਮੀਨ LCP ਦਾ ਮੁੱਖ ਕਾਰਨ (ਅਤੇ ਆਮ ਤੌਰ 'ਤੇ ਸਭ ਤੋਂ ਆਸਾਨ ਫਿਕਿਸ)
3. ਕੋਈ ਵਿਸ਼ੇਸ਼ ਚਿੱਤਰ ਮਾਪ ਨਹੀਂ — ਲੇਆਉਟ ਸ਼ਿਫਟ CLS ਸਕੋਰ ਨੂੰ ਨਸ਼ਟ ਕਰਦੇ ਹਨ
4. ਤੀਜੀ ਪਾਰਟੀਆਂ ਸਕ੍ਰਿਪਟ — ਚੈਟ ਵਿਜ਼ੇਟ, ਵਿਸ਼ਲੇਸ਼ਣ, INP ਪ੍ਰਤੀ ਬਲੌਕ ਕਰਨਾ
5. ਅਸੰਮਤ ਪਹੁੰਚ ਯੋਗਤਾ ਦੇ ਬੇਸਿਕਸ — ਕੋਈ ਐਲਟ ਟੈਕਸਟ, ਕੋਈ ਸਿਰਲੇਖ ਦੀ ਢਾਂਚਾ, ਕੋਈ ਰੰਗ ਵਿਰੋਧ |
6. ਸਮੱਗਰੀ-ਬਲਾਕਿੰਗ ਇੰਟਰਸਟਿਸ਼ਲ — ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਮੱਗਰੀ ਦੇਖਣ ਤੋਂ ਪਹਿਲਾਂ ਪੂਰੀ-ਸਕਰੀਨ ਪੋਪੀਅਪ |
7. ਗਹਿਰਾ ਸਾਈਟ ਆਰਕੀਟੈਕਚਰ — ਮਹੱਤਵਪੂਰਕ ਪੰਨੇ 5+ ਕਲਿਕਾਂ ਤੋਂ ਦੂਰ |
8. ਅੱਧ-ਫੋਲਡ ਕੀमती ਦੀ ਗੈਰਹਾਜ਼ਰੀ — ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਕ੍ਰੋਲਿੰਗ ਤੋਂ ਪਹਿਲਾਂ ਸਾਈਟ ਦੀ ਕੀਮਤ ਨਹੀਂ ਪਤਾ |

ਅਗਲਾ ਕੀ ਹੈ?

ਕਦਮ 6: ਮਾਨਟਰਿੰਗ & ਰੈਂਕਿੰਗ — ਤੁਸੀਂ ਉਸਨੂੰ ਸੁਧਾਰ ਨਹੀਂ ਸਕਦੇ ਜੋ ਤੁਸੀਂ ਮਾਪਣਾ ਨਹੀਂ ਕਰਦੇ। ਕੀਵਰਡ ਪੋਜ਼ਿਸ਼ਨ, ਸਕੋਰ ਟ੍ਰੈਕਿੰਗ, ਬਦਲਾਅ ਦੀਆਂ ਰਿਪੋਰਟਾਂ ਅਤੇ ਅਪਟਾਈਮ ਮਾਨਟਰਿੰਗ।

---

ਇਹ ਗਾਈਡ LANGR ਦੇ 13-ਕਦਮਾਨ ਦੇ ਐਸਈਓ ਸ਼੍ਰੇਣੀਆਂ ਦਾ ਹਿੱਸਾ ਹੈ। ਮਫ਼ਤ ਆਡਿਟ ਚਲਾਓ ਇਹ ਵੇਖਣ ਲਈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਸਾਰੇ 13 ਵਿਸ਼ਿਆਂ ਵਿੱਚ ਕਿੱਥੇ ਖੜੀ ਹੈ।