Category: guide
SEO Meta Tags — คู่มือครบสำหรับ Static Site
รวม meta tags ที่จำเป็น ตั้งแต่ title, description, Open Graph, Twitter Card ไปจนถึง JSON-LD structured data สำหรับ static site
สารบัญ
Meta Tags พื้นฐาน
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="คำอธิบาย 120-160 ตัวอักษร" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Panupong" />
<title>ชื่อหน้า | ชื่อเว็บไซต์</title>
<link rel="canonical" href="https://example.com/path/" />
</head>canonical URL สำคัญมาก
บอก Google ว่า URL ไหนคือ “ของจริง” ป้องกัน duplicate content:
<!-- ถ้าเว็บมีทั้ง http/https หรือ www/non-www -->
<link rel="canonical" href="https://panupongws.com/about/" />Open Graph (Social Sharing)
<meta property="og:type" content="website" />
<meta property="og:title" content="ชื่อหน้า" />
<meta property="og:description" content="คำอธิบาย" />
<meta property="og:url" content="https://panupongws.com/path/" />
<meta property="og:image" content="https://panupongws.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="คำอธิบายรูป" />
<meta property="og:site_name" content="ชื่อเว็บไซต์" />
<meta property="og:locale" content="th_TH" />og:type ที่ใช้บ่อย
| ค่า | ใช้กับ |
|---|---|
website | homepage, listing pages |
article | blog post, document |
profile | หน้า about/profile |
Twitter Card
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ชื่อหน้า" />
<meta name="twitter:description" content="คำอธิบาย" />
<meta name="twitter:image" content="https://panupongws.com/og-image.png" />Twitter อ่าน og: tags ได้ด้วย แต่ twitter:card ต้องใส่เองเสมอ
Article Meta (สำหรับ blog/content pages)
<meta property="article:author" content="Panupong" />
<meta property="article:published_time" content="2026-06-13T00:00:00+07:00" />
<meta property="article:modified_time" content="2026-06-13T00:00:00+07:00" />
<meta property="article:tag" content="astro" />
<meta property="article:tag" content="typescript" />JSON-LD Structured Data
Structured data ช่วย Google เข้าใจเนื้อหามากขึ้น และแสดงใน Rich Results:
WebSite (หน้าแรก)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Panupong WS",
"url": "https://panupongws.com",
"potentialAction": {
"@type": "SearchAction",
"target": "https://panupongws.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>Article (หน้า blog/content)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "ชื่อบทความ",
"description": "คำอธิบาย",
"datePublished": "2026-06-13T00:00:00+07:00",
"dateModified": "2026-06-13T00:00:00+07:00",
"inLanguage": "th",
"author": {
"@type": "Person",
"name": "Panupong",
"url": "https://panupongws.com/about"
},
"publisher": {
"@type": "Person",
"name": "Panupong",
"url": "https://panupongws.com"
},
"url": "https://panupongws.com/resources/article-slug",
"wordCount": 1200,
"timeRequired": "PT6M"
}
</script>BreadcrumbList
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "หน้าแรก", "item": "https://panupongws.com" },
{ "@type": "ListItem", "position": 2, "name": "Resources", "item": "https://panupongws.com/resources" },
{ "@type": "ListItem", "position": 3, "name": "ชื่อบทความ", "item": "https://panupongws.com/resources/slug" }
]
}
</script>ใน Astro
---
const ogImage = 'https://panupongws.com/og-image.svg';
const { title, description } = Astro.props;
---
<head>
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={`https://panupongws.com${Astro.url.pathname}`} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</head>ตรวจสอบ
- Google Rich Results Test — ตรวจ structured data
- Facebook Sharing Debugger — ตรวจ og: tags
- Twitter Card Validator — ตรวจ twitter: tags
- Chrome DevTools → Elements — ดู
<head>จริงๆ ใน browser - Lighthouse SEO audit — ตรวจ SEO ทั่วไป
Tips
og:imageควรขนาด 1200×630px อย่างน้อย- description ควร 120-160 ตัวอักษร (ยิ่งยาวเกิน Google จะตัด)
- ทุกหน้าควรมี title ที่ unique ไม่ซ้ำกัน
canonicalควรเป็น URL เต็ม รวม https:// และ trailing slash ที่ consistent