SEO Gabay Hakbang 2: On-Page at Meta Tags

Ito ang Hakbang 2 ng 13-Hakbang na Gabay sa SEO. Ang on-page meta tags ay kumokontrol sa kung ano ang ipinapakita ng mga search engine tungkol sa iyong site — at kung nagki-click ang mga gumagamit.

---

Ang Technical SEO (Hakbang 1) ay nagsisiguro na matatagpuan ng mga search engine ang iyong site. Ang on-page optimization ay nagsisiguro na nauunawaan nila ito — at ipinapakita ito nang kaakit-akit sa mga resulta. Ang bawat resulta sa paghahanap na nakikita mo sa Google ay nakabatay sa mga meta tags sa pahina. Kung hindi mo ito kontrolado, nag-iisip ang Google. At mali ang nasasabi ng Google.

Ang pagkakaiba sa pagitan ng 2% at 8% na click-through rate ay madalas na isang mas mahusay na title tag at description. Sa isang pahina na may 1,000 buwanang impressions, iyon ay 60 karagdagang bisita bawat buwan — nang libre.

Ano ang Saklaw ng On-Page SEO

Ang on-page optimization ay sumasaklaw sa 8 bahagi:

1. Title Tags — Ang asul na link sa mga resulta ng paghahanap
2. Meta Descriptions — Ang grey na teksto sa ilalim ng link
3. Open Graph at Social — Kung paano lumilitaw ang iyong mga pahina kapag naibahagi
4. Hierarchy ng Heading — Estruktura ng nilalaman na nagsasaad ng kaugnayan
5. Structured Data — Rich results (bituin, presyo, FAQs)
6. Image Optimization — Alt text, mga pangalan ng file, at lazy loading
7. Internal Anchor Text — Ano ang sinasabi ng iyong mga link tungkol sa iyong mga pahina
8. News at Article Markup — Google News, Discover, at mga AI crawlers

1. Title Tags

Ang title tag ang pinaka-maimpluwensyang on-page na elemento. Ito ang asul na clickable link sa mga resulta ng paghahanap, ang teksto sa tab ng browser, at isang direktang salik sa ranking.

Mga Alituntunin para sa mga mataas na pagganap na title tags:

• 50-60 na karakter (nag-truncate ang Google sa ~60)
• Pangunahing keyword malapit sa simula
• Natatangi sa bawat pahina ng iyong site
• Nakaka-engganyo para sa tao, hindi lang sa mga algorithm
• Pangalan ng brand sa dulo (kung may espasyo)

Mga Formula na Gumagana:

| Uri ng Pahina | Formula | Halimbawa | |----------------|---------|-----------| | Homepage | [Brand] — [Value Prop] | LANGR — SEO Automation para sa Lumalaking Negosyo | | Produkto | [Product] — [Benefit] | [Brand] | Pro Plan — Daily SEO Monitoring | LANGR | | Blog | [Topic]: [Promise] ([Year]) | Title Tags: Ang Kumpletong Gabay (2026) | | Kategorya | [Category] — [Context] | [Brand] | Running Shoes — Men's Collection | Nike |

Mga Karaniwang Pagkakamali:

• Parehas na title sa maraming pahina (duplicate titles)
• Keyword stuffing: "SEO SEO Guide SEO Tips SEO Help"
• Masyadong maikli: "Home" o "Products"
• Ganap na nawawala (nag-generate ang Google ng isa mula sa iyong nilalaman — kadalasang mali)

Mabilis na panalo: I-export ang lahat ng iyong title tags (Screaming Frog, o tingnan ang Search Console). Hanapin ang mga duplicate at mga pahina na may title na mas mababa sa 30 na karakter. Ayusin ang mga ito una.

2. Meta Descriptions

Ang mga meta descriptions ay hindi direktang nakakaapekto sa ranggo, ngunit malaki ang epekto nila sa click-through rate. Ito ang iyong ad copy sa organic results.

Mga Alituntunin:

• 120-155 na karakter (nag-truncate ang mobile nang mas maaga)
• Isama ang iyong pangunahing keyword (nag-bold ang Google ng tumutugmang mga termino)
• Isama ang call-to-action ("Alamin kung paano", "Magsimula", "Tingnan ang presyo")
• Natatangi sa bawat pahina (ang mga duplicate ay pinapalitan ng auto-snippet ng Google)
• Tumugma sa layunin ng paghahanap (impormatibo, transaksyonal, navigasyonal)

Formula: [Ano ang inaalok ng pahina] + [key benefit] + [CTA]

Halimbawa: "Alamin ang 8 meta tags na direktang nakakaapekto sa ranggo. Mga actionable tips na may before/after examples. Magsimula nang i-optimize ngayon."

Kapag binabalewala ng Google ang iyong description: Muling sinusulat ng Google ang ~70% ng mga meta descriptions upang mas mahusay na tumugma sa partikular na query. Hindi mo ito maiiwasan, ngunit ang isang maayos na sulat na description ay mas madalas na ginagamit kumpara sa isang mahirap. Lumalabas din ito sa mga social shares at link previews.

Mabilis na panalo: Isulat ang mga description para sa iyong nangungunang 20 traffic pages muna. Bigyang-priyoridad ang mga pahina kung saan ipinapakita ng Search Console ang mataas na impressions ngunit mababang CTR.

3. Open Graph at Social Meta

Kapag ang isang tao ay nagbahagi ng iyong link sa Facebook, LinkedIn, Twitter/X, o sa isang messaging app, kinokontrol ng mga Open Graph tags ang preview card na lumilitaw.

Mga Mahalagang OG tags:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Nakakaengganyong deskripsyon para sa social" />
<meta property="og:image" content="https://yoursite.com/images/og-card.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

Para sa Twitter/X:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Deskripsyon para sa Twitter" />
<meta name="twitter:image" content="https://yoursite.com/images/twitter-card.jpg" />

Mga kinakailangan sa imahe:

• Minimum na 1200x630px para sa malalaking card
• Sa ilalim ng 8MB na laki ng file
• Gamitin ang teksto sa mga imahe nang maingat (20% na tuntunin)
• Subukan gamit ang Facebook Debugger at Twitter Card Validator

Mabilis na panalo: Gumawa ng isang mataas na kalidad na OG image template para sa iyong brand. Gamitin ito bilang default, pagkatapos ay lumikha ng mga custom na imahe para sa iyong nangungunang 10 pahina.

4. Hierarchy ng Heading

Ang mga heading (H1-H6) ay nagbibigay ng outline ng nilalaman para sa mga search engine. Sinasalamin nila kung ano ang tungkol sa iyong pahina at aling mga seksyon ang pinakamahalaga.

Mga Alituntunin:

• Isang H1 lamang bawat pahina (ang iyong pangunahing paksa/keyword)
• H2s para sa mga pangunahing seksyon (madalas na nagiging featured snippet answers)
• H3s para sa mga subsections sa loob ng H2s
• Huwag palampasin ang mga antas (H1 → H3 nang walang H2)
• Gamitin ang mga keyword nang natural sa mga heading, hindi pilit
• Ihatian ang mga importanteng salita (ang mga scanner ay nagbabasa ng unang 3 salita)

Epekto sa SEO:

• Ginagamit ng Google ang tekstong H2/H3 para sa mga featured snippets at "People also ask"
• Nakakaapekto ang heading text sa ranggo ng passage (maaaring i-rank ng Google ang isang seksyon ng iyong pahina nang nakapag-iisa)
• Ginagamit ng mga screen reader at AI crawlers ang mga heading upang maunawaan ang estruktura ng pahina

Halimbawa ng estruktura:

H1: Paano Pumili ng Running Shoes
  H2: Uri ng Paa at Pronation
    H3: Overpronation
    H3: Neutral
    H3: Underpronation
  H2: Mga Kategorya ng Sapatos
    H3: Road Running
    H3: Trail Running
  H2: Kailan Papalitan ang Iyong Sapatos

Mabilis na panalo: Suriin ang iyong mga nangungunang pahina — kung mayroong maraming H1, walang H1, o mga heading na "Seksiyon 1", "Seksiyon 2", ayusin ang mga ito agad.

5. Structured Data (Schema Markup)

Sinasabi ng structured data sa mga search engine kung ano talaga ang ipinapakita ng iyong nilalaman. Nagbibigay ito ng mga rich results — ang mga pinahusay na listahan na may mga bituin, presyo, FAQs, mga hakbang kung paano, at iba pa.

Mga uri ng schema na may mataas na ROI:

| Schema | Rich Result | Pinakamainam Para sa | |--------|-------------|--------------------| | FAQ | Expandable Q&A nang direkta sa SERP | Mga pahina ng serbisyo, mga pahina ng produkto | | HowTo | Hakbang-hakbang na may mga imahe | Nilalaman ng tutorial/gabay | | Article | May may-akda, petsa, imahe sa mga resulta | Mga blog post, balita | | Product | Presyo, rating, availability | E-commerce | | LocalBusiness | Mapa, oras, review | Mga pisikal na negosyo | | BreadcrumbList | Path navigation sa SERP | Lahat ng pahina | | Organization | Knowledge panel | Homepage |

Halimbawa ng FAQ schema:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Gaano katagal ang SEO?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Karamihan sa mga site ay nakakakita ng nasusukat na mga pagpapabuti sa loob ng 3-6 na buwan..."
    }
  }]
}

Mga Alituntunin:

• I-mark up lamang ang nilalaman na talagang nakikita sa pahina
• Huwag magpanggap ng mga review o rating
• I-validate gamit ang Google's Rich Results Test
• Tingnan sa Search Console → Enhancements

Mabilis na panalo: Idagdag ang FAQ schema sa iyong nangungunang 5 service/product pages. Isulat ang 3-5 totoong tanong at sagot para sa bawat isa. Maaari itong doblehin ang iyong SERP real estate sa magdamag.

6. Image Optimization

Ang mga imahe ay madalas na ang pinakamalaking bottleneck sa pagganap at isang nakakaligtaang pagkakataon sa SEO. Ang Google Images ay nagdadala ng makabuluhang trapiko para sa maraming site.

Ang 5 pangunahing bagay:

1. Alt text: Ilahad kung ano ang nasa imahe (para sa accessibility + SEO). Isama ang mga keyword kapag natural: alt="Nike Air Max 2026 running shoe in black", hindi alt="shoe" o alt=""
2. Mga pangalan ng file: Baguhin ang pangalan bago mag-upload. nike-air-max-2026-black.webp hindi IMG_4382.jpg
3. Format: WebP para sa mga litrato (30-50% na mas maliit kaysa sa JPEG). SVG para sa mga icon/logos. Iwasan ang PNG para sa mga litrato.
4. Lazy loading: Idagdag ang loading="lazy" sa mga imahe sa ibaba ng fold. Huwag kailanman mag-lazy load sa hero image.
5. Dimensyon: Palaging tukuyin ang width at height attributes upang maiwasan ang layout shift (CLS).

Mabilis na panalo: Hanapin ang iyong 10 pinakamalaking imahe (pina-flag ng PageSpeed Insights). I-convert sa WebP at idagdag ang wastong alt text. Pinapabuti nito ang parehong pagganap at visibility ng search ng imahe.

7. Internal Anchor Text

Ang clickable na teksto sa iyong internal links ay nagsasabi sa mga search engine kung ano ang tungkol sa target na pahina. Karamihan sa mga site ay nasasayang ito sa pamamagitan ng paggamit ng "click here" o "read more."

Mga Alituntunin:

• Gumamit ng descriptive anchor text na may kasamang mga kaugnay na keyword
• Mag-iba ng anchor text (huwag gamitin ang eksaktong parehong teksto para sa bawat link sa isang pahina)
• Mag-link mula sa mga pahina na may mataas na autoridad sa mga pahina na nais mong i-rank
• Mag-link sa kontekstwal na nilalaman, hindi lamang sa navigation

Mabuti vs. masama:

• Masama: "Click here para sa aming SEO guide"
• Mabuti: "Basahin ang aming kumpletong SEO guide para sa lahat ng 13 hakbang"
• Masama: "Alamin pa"
• Mabuti: "Tingnan kung paano pinapabuti ng structured data ang click rates"

Mabilis na panalo: Hanapin ang iyong site para sa "click here" at "read more" links. Palitan ang mga ito ng descriptive anchor text na naglalaman ng mga kaugnay na keyword.

8. News at Article Markup

Kung nag-publish ka ng mga blog posts, nilalaman ng balita, o anumang regular na na-update na nilalaman, ang news-optimized markup ay nag-aunlock ng Google News, Google Discover, at preferential treatment ng mga AI crawlers.

Article schema (kinakailangan para sa mga tampok sa balita):

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "datePublished": "2026-05-07T09:00:00+02:00",
  "dateModified": "2026-05-07T09:00:00+02:00",
  "author": {
    "@type": "Person",
    "name": "Author Name",
    "url": "https://yoursite.com/author/name"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Brand",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yoursite.com/logo.png"
    }
  },
  "image": "https://yoursite.com/article-hero.jpg",
  "mainEntityOfPage": "https://yoursite.com/article-url"
}

Gamitin ang NewsArticle vs Article:

• NewsArticle — para sa mga time-sensitive na nilalaman ng balita (mga kaganapan, anunsyo)
• Article — para sa mga evergreen blog posts at mga gabay
• BlogPosting — para sa mga opinyon na piraso at personal na mga blog

Pag-optimize ng Google News at Discover:

• Mataas na kalidad na hero image (minimum 1200px ang lapad, max-image-preview:large meta)
• Makikita nang malinaw ang petsa ng publikasyon sa pahina
• Author byline na may link sa pahina ng may-akda
• Orihinal na report o natatanging pagsusuri (hindi mga rewrite)
• robots meta: max-snippet:-1, max-image-preview:large (payagan ang buong preview)

Robots meta para sa nilalaman ng balita:

<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1" />

Sinabi nito sa Google na maaari nitong gamitin ang malalaking imahe at buong teksto sa mga Discover cards at mga resulta ng Balita.

Bakit ito mahalaga para sa mas mataas na antas:

• Blog strategy: Ang article markup ay nagbibigay-daan sa iyong nilalaman na lumitaw sa Discover (maaaring daan-daang libong impressions bawat post)
• Link earning: Ang mga nilalamang na-index ng balita ay sinisipi ng iba pang mga publikasyon, nagkakaroon ng natural na backlinks
• AI crawlers: Ang ChatGPT, Perplexity, at iba pang mga AI systems ay mas pinipiling i-cite ang mga mapagkukunan na may wastong article markup at malinaw na authorship
• Monitoring ng brand: Ang mga nabanggit ng balita tungkol sa iyong brand (na sinusubaybayan sa pamamagitan ng mga scanner tulad ng News Scanner ng LANGR) ay nagpapakita ng mga oportunidad sa link-building at PR

Mabilis na panalo: Idagdag ang Article schema sa lahat ng iyong mga blog post. Siguraduhin na may malinaw na petsa, pangalan ng may-akda, at hero image na mahigit 1200px ang lapad. I-enable ang max-image-preview:large sa iyong robots meta.

The On-Page SEO Audit Checklist

Suriin ito para sa bawat mahahalagang pahina:

• [ ] Natatanging title tag, 50-60 chars, keyword malapit sa simula
• [ ] Natatanging meta description, 120-155 chars, kasali ang CTA
• [ ] Nakapagsalita ang Open Graph tags (title, description, image, url)
• [ ] Eksaktong isang H1 na naglalaman ng pangunahing keyword
• [ ] Lohikal na hierarchy ng heading (H1 → H2 → H3, walang lumaktaw)
• [ ] Idinagdag at napatunayan ang structured data (FAQ, Article, Product, atbp.)
• [ ] Mga Imahe: WebP format, descriptive alt text, lazy loading sa ibaba ng fold
• [ ] Ang mga internal links ay gumagamit ng descriptive anchor text
• [ ] Article schema sa lahat ng nilalaman ng blog/news na may datePublished + author
• [ ] max-image-preview:large meta robot tag sa mga content pages

Karaniwang Pagkakamali sa On-Page (Naka-ranggo ayon sa Epekto)

1. Duplicate title tags — Maraming mga pahina ang nakikipagkumpitensya sa kanilang sarili
2. Nawawalang meta descriptions — Pinapahintulutan ang Google na maghula (at maghula ng mali)
3. Walang structured data — Nawawalan ng rich results na mayroon ang iyong mga kakumpitensya
4. Keyword-stuffed na headings — "SEO Tips SEO Guide SEO Help SEO 2026"
5. Nawawalang alt text sa mga imahe — Invisible sa search + kabiguan sa accessibility
6. Walang article markup sa mga blog post — Invisible sa News/Discover/AI
7. Generic anchor text — "Click here" ay walang itinuturo sa Google
8. Parehas na OG image sa lahat — Lahat ng iyong shares ay mukhang pareho

Ano ang Susunod?

Hakbang 3: Nilalaman at Estratehiya — Ano ang isusulat, kailan ilalathala, at paano lumikha ng nilalaman na nagra-rank kaysa sa basta umiiral.

---

Ang gabay na ito ay bahagi ng 13-hakbang na serye sa SEO ng LANGR. Magsagawa ng libreng audit upang makita kung nasaan ang iyong site sa lahat ng 13 disiplina.