เชี่ยวชาญ Next.js Metadata API เพื่อเพิ่มประสิทธิภาพ SEO, การแชร์บนโซเชียลมีเดีย, และปรับปรุงประสบการณ์ผู้ใช้ เรียนรู้วิธีจัดการ Metadata แบบไดนามิกเพื่อประสิทธิภาพสูงสุด
Next.js Metadata API: สุดยอดคู่มือสำหรับ SEO และการเพิ่มประสิทธิภาพโซเชียลมีเดีย
ในโลกดิจิทัลที่มีการแข่งขันสูงในปัจจุบัน การมีตัวตนบนโลกออนไลน์ที่แข็งแกร่งเป็นสิ่งสำคัญต่อความสำเร็จ การเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา (SEO) และการแชร์บนโซเชียลมีเดียอย่างมีประสิทธิภาพเป็นองค์ประกอบสำคัญของกลยุทธ์ออนไลน์ที่ประสบความสำเร็จ Next.js ซึ่งเป็นเฟรมเวิร์ก React ที่ได้รับความนิยม มี Metadata API อันทรงพลังที่ช่วยให้นักพัฒนาสามารถจัดการเมตาแท็กแบบไดนามิกและเพิ่มประสิทธิภาพเว็บแอปพลิเคชันของตนสำหรับทั้งเครื่องมือค้นหาและแพลตฟอร์มโซเชียลมีเดีย คู่มือฉบับสมบูรณ์นี้จะสำรวจ Next.js Metadata API โดยละเอียด ครอบคลุมถึงคุณสมบัติ ประโยชน์ และการนำไปใช้งานจริง
Next.js Metadata API คืออะไร?
Next.js Metadata API เป็นฟีเจอร์ในตัวที่ช่วยให้กระบวนการจัดการเมตาดาต้าสำหรับหน้าเว็บของคุณง่ายขึ้น เมตาดาต้าคือข้อมูลเกี่ยวกับข้อมูล และในบริบทของการพัฒนาเว็บ หมายถึงข้อมูลที่อธิบายหน้าเว็บ เช่น ชื่อเรื่อง คำอธิบาย คีย์เวิร์ด และผู้เขียน ข้อมูลนี้ถูกใช้โดยเครื่องมือค้นหาเพื่อทำความเข้าใจเนื้อหาของหน้า และโดยแพลตฟอร์มโซเชียลมีเดียเพื่อสร้างตัวอย่างเมื่อมีการแชร์หน้าเว็บ
ตามปกติแล้ว การจัดการเมตาดาต้าเกี่ยวข้องกับการเพิ่มเมตาแท็กในส่วน <head>
ของแต่ละหน้า HTML ด้วยตนเอง กระบวนการนี้ซ้ำซ้อนและมีโอกาสเกิดข้อผิดพลาดได้ง่าย โดยเฉพาะสำหรับเว็บไซต์ขนาดใหญ่ที่มีหลายหน้า Next.js Metadata API ทำให้กระบวนการนี้ง่ายขึ้นโดยอนุญาตให้นักพัฒนากำหนดเมตาดาต้าผ่านโปรแกรม โดยใช้ JavaScript หรือ TypeScript ได้โดยตรงภายในคอมโพเนนต์ Next.js ของตน วิธีการนี้มีข้อดีหลายประการ รวมถึงการบำรุงรักษาที่ดีขึ้น การสร้างเมตาดาต้าแบบไดนามิก และประสิทธิภาพ SEO ที่เพิ่มขึ้น
ทำไมเมตาดาต้าจึงมีความสำคัญ?
เมตาดาต้ามีบทบาทสำคัญอย่างยิ่งใน SEO และการเพิ่มประสิทธิภาพโซเชียลมีเดีย นี่คือรายละเอียดความสำคัญของมัน:
SEO (Search Engine Optimization)
- อันดับในเครื่องมือค้นหา (Search Engine Rankings): เครื่องมือค้นหาเช่น Google, Bing และ DuckDuckGo ใช้เมตาดาต้าเพื่อทำความเข้าใจเนื้อหาและบริบทของหน้าเว็บ เมตาดาต้าที่ถูกต้องและเกี่ยวข้องสามารถปรับปรุงอันดับของเว็บไซต์ในเครื่องมือค้นหา ทำให้มองเห็นได้ง่ายขึ้นสำหรับลูกค้าเป้าหมาย
- อัตราการคลิกผ่าน (Click-Through Rates - CTR): เมตาแท็กชื่อเรื่องและคำอธิบายจะแสดงเป็น snippet ในหน้าผลการค้นหาของเครื่องมือค้นหา (SERPs) ชื่อเรื่องและคำอธิบายที่สร้างขึ้นมาอย่างดีสามารถดึงดูดให้ผู้ใช้คลิกลิงก์ ซึ่งจะเพิ่ม CTR ของเว็บไซต์
- การกำหนดเป้าหมายคีย์เวิร์ด (Keyword Targeting): เมตาดาต้าช่วยให้คุณสามารถกำหนดเป้าหมายคีย์เวิร์ดเฉพาะที่เกี่ยวข้องกับธุรกิจหรืออุตสาหกรรมของคุณได้ โดยการรวมคีย์เวิร์ดเหล่านี้ไว้ในเมตาแท็กของคุณ คุณสามารถปรับปรุงการมองเห็นของเว็บไซต์ของคุณสำหรับการค้นหาที่เกี่ยวข้องได้
การเพิ่มประสิทธิภาพโซเชียลมีเดีย (Social Media Optimization)
- ตัวอย่างลิงก์ (Link Previews): เมื่อมีการแชร์หน้าเว็บบนแพลตฟอร์มโซเชียลมีเดีย เช่น Facebook, Twitter, LinkedIn และอื่น ๆ แพลตฟอร์มจะสร้างตัวอย่างที่รวมถึงชื่อเรื่อง คำอธิบาย และรูปภาพ เมตาดาต้าจะควบคุมวิธีการแสดงตัวอย่างนี้ เพื่อให้แน่ใจว่ามันน่าดึงดูดสายตาและแสดงเนื้อหาของหน้าได้อย่างถูกต้อง
- การสร้างแบรนด์ (Branding): เมตาดาต้าที่สอดคล้องกันในทุกหน้าของเว็บไซต์ของคุณช่วยเสริมสร้างเอกลักษณ์ของแบรนด์บนโซเชียลมีเดีย โดยการใช้องค์ประกอบการสร้างแบรนด์ที่สอดคล้องกันในเมตาแท็กของคุณ คุณสามารถสร้างตัวตนของแบรนด์ที่เหนียวแน่นและเป็นที่จดจำได้
- การมีส่วนร่วม (Engagement): ตัวอย่างโซเชียลมีเดียที่สร้างขึ้นมาอย่างดีสามารถกระตุ้นให้ผู้ใช้คลิกลิงก์ที่แชร์และมีส่วนร่วมกับเนื้อหาได้ ซึ่งจะนำไปสู่การเพิ่มขึ้นของปริมาณการเข้าชมเว็บไซต์และการรับรู้แบรนด์
ประโยชน์ของการใช้ Next.js Metadata API
The Next.js Metadata API มีประโยชน์หลักหลายประการสำหรับนักพัฒนาและเจ้าของเว็บไซต์:- การจัดการเมตาดาต้าที่ง่ายขึ้น: API นี้มอบวิธีการที่ง่ายและเป็นธรรมชาติในการจัดการเมตาดาต้าสำหรับแอปพลิเคชัน Next.js ของคุณ
- การสร้างเมตาดาต้าแบบไดนามิก: สามารถสร้างเมตาดาต้าแบบไดนามิกตามเนื้อหาของหน้า ทำให้ได้ข้อมูลที่เป็นส่วนตัวและเกี่ยวข้อง ตัวอย่างเช่น เว็บไซต์อีคอมเมิร์ซสามารถสร้างชื่อเรื่องหน้าสินค้าที่รวมชื่อสินค้าและราคาได้
- ประสิทธิภาพ SEO ที่ดีขึ้น: โดยการให้ข้อมูลเมตาดาต้าที่ถูกต้องและเกี่ยวข้องแก่เครื่องมือค้นหา API สามารถช่วยปรับปรุงอันดับของเว็บไซต์ของคุณในเครื่องมือค้นหาได้
- การแชร์บนโซเชียลมีเดียที่ดีขึ้น: API ช่วยให้คุณควบคุมวิธีการแสดงหน้าเว็บของคุณเมื่อถูกแชร์บนแพลตฟอร์มโซเชียลมีเดีย ทำให้แน่ใจว่ามันน่าดึงดูดสายตาและน่าสนใจ
- การบำรุงรักษา: การจัดการเมตาดาต้าผ่านโปรแกรมทำให้การอัปเดตและบำรุงรักษาเมตาดาต้าทั่วทั้งเว็บไซต์ของคุณง่ายขึ้น
- ประสิทธิภาพ: Metadata API ได้รับการปรับให้เหมาะสมกับประสิทธิภาพ เพื่อให้แน่ใจว่าจะไม่ส่งผลเสียต่อความเร็วในการโหลดหน้าเว็บของคุณ
วิธีใช้ Next.js Metadata API
Next.js Metadata API สามารถใช้ได้สองวิธีหลัก: โดยการใช้ออบเจ็กต์metadata
หรือใช้ฟังก์ชัน generateMetadata
1. การใช้ออบเจ็กต์ metadata
วิธีที่ง่ายที่สุดในการเพิ่มเมตาดาต้าคือการ export ออบเจ็กต์ metadata
จากคอมโพเนนต์หน้าหรือเลย์เอาต์ของคุณ ออบเจ็กต์นี้สามารถมีคุณสมบัติต่าง ๆ ที่กำหนดเมตาดาต้าสำหรับหน้านั้น ๆ ได้
ตัวอย่าง:
// app/page.js
export const metadata = {
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
keywords: ['blog', 'post', 'javascript', 'nextjs'],
}
export default function Page() {
return (
<div>
<h1>My Awesome Blog Post</h1>
<p>This is the content of my blog post.</p>
</div>
)
}
ในตัวอย่างนี้ เรากำลังกำหนด title
, description
, และ keywords
สำหรับหน้าเว็บ Next.js จะเพิ่มเมตาแท็กเหล่านี้ไปยังส่วน <head>
ของหน้า HTML โดยอัตโนมัติ
2. การใช้ฟังก์ชัน generateMetadata
สำหรับสถานการณ์ที่ซับซ้อนมากขึ้น เช่น การสร้างเมตาดาต้าแบบไดนามิกตามข้อมูลที่ดึงมาจาก API คุณสามารถใช้ฟังก์ชัน generateMetadata
ได้ ฟังก์ชันนี้ช่วยให้คุณสามารถดึงข้อมูลและใช้ข้อมูลนั้นเพื่อสร้างออบเจ็กต์เมตาดาต้าได้
ตัวอย่าง:
// app/blog/[slug]/page.js
export async function generateMetadata({ params, searchParams }, parent) {
// read route params
const slug = params.slug
// fetch data directly
const post = await fetch(`https://.../posts/${slug}`).then((res) => res.json())
// Or alternatively use the exported metadata fields as variables
// const previousImages = (await parent).openGraph?.images || []
return {
title: post.title,
description: post.excerpt,
openGraph: {
images: [`https://.../posts/${slug}/og.png`],
},
}
}
export default async function Page({ params }) {
const slug = params.slug
const post = await fetch(`https://.../posts/${slug}`).then((res) => res.json())
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
)
}
ในตัวอย่างนี้ ฟังก์ชัน generateMetadata
จะดึงข้อมูลเกี่ยวกับโพสต์บลอกจาก API ตามพารามิเตอร์ slug
จากนั้นจะใช้ข้อมูลนี้เพื่อสร้างเมตาดาต้า title
, description
, และ openGraph
เมตาดาต้า openGraph
จะถูกใช้โดยแพลตฟอร์มโซเชียลมีเดียเพื่อสร้างตัวอย่างลิงก์
คุณสมบัติของเมตาดาต้า (Metadata Properties)
Next.js Metadata API รองรับคุณสมบัติที่หลากหลายซึ่งสามารถใช้เพื่อปรับแต่งเมตาดาต้าสำหรับหน้าเว็บของคุณได้ นี่คือคุณสมบัติที่ใช้กันบ่อยที่สุดบางส่วน:title
: ชื่อเรื่องของหน้าเว็บ ซึ่งจะแสดงในแท็บของเบราว์เซอร์และในผลการค้นหาdescription
: คำอธิบายสั้น ๆ ของหน้าเว็บ ซึ่งจะแสดงในผลการค้นหาและตัวอย่างบนโซเชียลมีเดียkeywords
: รายการคีย์เวิร์ดที่เกี่ยวข้องกับเนื้อหาของหน้าเว็บauthors
: อาร์เรย์ของออบเจ็กต์ผู้เขียน โดยแต่ละออบเจ็กต์มีคุณสมบัติname
และอาจมีคุณสมบัติurl
ด้วยrobots
: ควบคุมวิธีการที่โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาควรจัดทำดัชนีและติดตามลิงก์บนหน้าเว็บ ค่าที่พบบ่อยได้แก่index, follow
,noindex, nofollow
, และnosnippet
openGraph
: ออบเจ็กต์ที่ประกอบด้วยเมตาดาต้า Open Graph ซึ่งใช้โดยแพลตฟอร์มโซเชียลมีเดียเพื่อสร้างตัวอย่างลิงก์twitter
: ออบเจ็กต์ที่ประกอบด้วยเมตาดาต้าเฉพาะของ Twitter ซึ่งใช้เพื่อปรับแต่งการแสดงหน้าเว็บบน Twittericons
: กำหนดไอคอนที่ใช้สำหรับหน้าเว็บ เช่น faviconviewport
: กำหนดการตั้งค่า viewport สำหรับหน้าเว็บ เพื่อให้แน่ใจว่าแสดงผลได้อย่างถูกต้องบนอุปกรณ์ต่าง ๆthemeColor
: ระบุสีธีมสำหรับหน้าเว็บ ซึ่งเบราว์เซอร์บางตัวใช้เพื่อปรับแต่งลักษณะที่ปรากฏของแท็บเบราว์เซอร์alternates
: กำหนดเวอร์ชันทางเลือกของหน้าเว็บ เช่น การแปลหรือรูปแบบที่แตกต่างกันverification
: ใช้เพื่อยืนยันความเป็นเจ้าของเว็บไซต์กับบริการต่าง ๆ เช่น Google Search Console และ Pinterest
เมตาดาต้า Open Graph
เมตาดาต้า Open Graph (OG) เป็นโปรโตคอลที่ช่วยให้คุณควบคุมวิธีการแสดงหน้าเว็บของคุณเมื่อถูกแชร์บนแพลตฟอร์มโซเชียลมีเดีย Next.js Metadata API ทำให้การเพิ่มเมตาดาต้า Open Graph ไปยังหน้าเว็บของคุณเป็นเรื่องง่ายตัวอย่าง:
// app/page.js
export const metadata = {
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
openGraph: {
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
url: 'https://example.com/blog/my-awesome-blog-post',
siteName: 'Example Website',
images: [
{
url: 'https://example.com/images/blog-post.jpg',
width: 800,
height: 600,
alt: 'My Awesome Blog Post Image',
},
],
type: 'article',
},
}
ในตัวอย่างนี้ เรากำลังกำหนดคุณสมบัติ title
, description
, url
, siteName
, images
, และ type
สำหรับเมตาดาต้า Open Graph คุณสมบัติเหล่านี้จะถูกใช้โดยแพลตฟอร์มโซเชียลมีเดียเพื่อสร้างตัวอย่างลิงก์เมื่อมีการแชร์หน้านี้
คุณสมบัติหลักของ Open Graph:
og:title
: ชื่อเรื่องของหน้าเว็บog:description
: คำอธิบายสั้น ๆ ของหน้าเว็บog:url
: URL หลัก (canonical URL) ของหน้าเว็บog:site_name
: ชื่อของเว็บไซต์og:image
: URL ของรูปภาพที่เป็นตัวแทนของหน้าเว็บog:type
: ประเภทของเนื้อหาบนหน้าเว็บ (เช่น article, website, book)
เมตาดาต้า Twitter
Twitter ก็มีชุดเมตาแท็กของตัวเองที่คุณสามารถใช้เพื่อปรับแต่งวิธีการแสดงหน้าเว็บของคุณบนแพลตฟอร์มได้ Next.js Metadata API ช่วยให้คุณสามารถเพิ่มเมตาดาต้าเฉพาะของ Twitter ไปยังหน้าเว็บของคุณได้ตัวอย่าง:
// app/page.js
export const metadata = {
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
twitter: {
card: 'summary_large_image',
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
site: '@example',
creator: '@example',
images: [
{
url: 'https://example.com/images/blog-post.jpg',
alt: 'My Awesome Blog Post Image',
},
],
},
}
ในตัวอย่างนี้ เรากำลังกำหนดคุณสมบัติ card
, title
, description
, site
, creator
, และ images
สำหรับเมตาดาต้า Twitter คุณสมบัติเหล่านี้จะถูกใช้โดย Twitter เพื่อสร้างการ์ดเมื่อมีการแชร์หน้านี้
คุณสมบัติหลักของ Twitter:
twitter:card
: ประเภทของการ์ดที่จะแสดง (เช่น summary, summary_large_image)twitter:title
: ชื่อเรื่องของหน้าเว็บtwitter:description
: คำอธิบายสั้น ๆ ของหน้าเว็บtwitter:site
: ชื่อผู้ใช้ Twitter ของเว็บไซต์twitter:creator
: ชื่อผู้ใช้ Twitter ของผู้สร้างเนื้อหาtwitter:image
: URL ของรูปภาพที่เป็นตัวแทนของหน้าเว็บtwitter:image:alt
: ข้อความอธิบายรูปภาพ (Alt text)
แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Next.js Metadata API
เพื่อให้ได้ประโยชน์สูงสุดจาก Next.js Metadata API ให้ปฏิบัติตามแนวทางที่ดีที่สุดเหล่านี้:- ใช้ชื่อเรื่องที่สื่อความหมาย: แท็ก title ของคุณควรอธิบายเนื้อหาของหน้าอย่างถูกต้องและรวมคีย์เวิร์ดที่เกี่ยวข้อง ควรให้กระชับ (ควรน้อยกว่า 60 ตัวอักษร) และน่าสนใจ
- เขียนคำอธิบายที่น่าดึงดูด: แท็ก description ของคุณควรให้สรุปสั้น ๆ เกี่ยวกับเนื้อหาของหน้าและดึงดูดให้ผู้ใช้คลิกลิงก์ ควรให้กระชับ (ควรน้อยกว่า 160 ตัวอักษร) และมีคำกระตุ้นการตัดสินใจ (call to action)
- กำหนดเป้าหมายคีย์เวิร์ดที่เกี่ยวข้อง: รวมคีย์เวิร์ดที่เกี่ยวข้องในแท็ก title, description, และ keyword ของคุณ อย่างไรก็ตาม ควรหลีกเลี่ยงการยัดเยียดคีย์เวิร์ด (keyword stuffing) เพราะอาจส่งผลเสียต่ออันดับในเครื่องมือค้นหาของคุณได้
- ใช้รูปภาพคุณภาพสูง: ใช้รูปภาพคุณภาพสูงสำหรับเมตาดาต้า Open Graph และ Twitter ของคุณ รูปภาพควรดึงดูดสายตาและแสดงเนื้อหาของหน้าได้อย่างถูกต้อง ตรวจสอบให้แน่ใจว่ารูปภาพของคุณได้รับการปรับให้เหมาะสมสำหรับการใช้งานบนเว็บเพื่อหลีกเลี่ยงเวลาในการโหลดที่ช้า
- มีความสอดคล้อง: รักษาการสร้างแบรนด์ที่สอดคล้องกันในทุกเมตาดาต้าของคุณ ใช้สี ฟอนต์ และรูปภาพที่สอดคล้องกันเพื่อเสริมสร้างเอกลักษณ์ของแบรนด์ของคุณ
- ทดสอบเมตาดาต้าของคุณ: ใช้เครื่องมืออย่าง Facebook Sharing Debugger และ Twitter Card Validator เพื่อทดสอบเมตาดาต้าของคุณและตรวจสอบให้แน่ใจว่าแสดงผลได้อย่างถูกต้องบนแพลตฟอร์มโซเชียลมีเดีย
- ปรับเมตาดาต้าให้เข้ากับท้องถิ่น (Localize): หากคุณมีเว็บไซต์หลายภาษา อย่าลืมปรับเมตาดาต้าของคุณให้เข้ากับแต่ละภาษา สิ่งนี้จะช่วยให้แน่ใจว่าเนื้อหาของคุณจะแสดงผลอย่างเหมาะสมต่อผู้ใช้ในภูมิภาคต่าง ๆ ตัวอย่างเช่น บริษัทในแคนาดาอาจมีเมตาดาต้าภาษาอังกฤษและฝรั่งเศส เว็บไซต์อีคอมเมิร์ซระดับโลกอาจมีเมตาดาต้าในภาษาต่าง ๆ มากกว่าสิบภาษา
- ใช้ประโยชน์จากเมตาดาต้าแบบไดนามิก: ใช้ฟังก์ชัน
generateMetadata
เพื่อสร้างเมตาดาต้าแบบไดนามิกตามเนื้อหาของหน้า สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับเว็บไซต์อีคอมเมิร์ซ โพสต์บล็อก และเนื้อหาไดนามิกประเภทอื่น ๆ - ให้ความสำคัญกับการปรับให้เหมาะสมกับมือถือ: ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณเป็นมิตรกับมือถือและเมตาดาต้าของคุณได้รับการปรับให้เหมาะสมกับอุปกรณ์มือถือ สิ่งนี้มีความสำคัญอย่างยิ่งเมื่อพิจารณาจากจำนวนผู้ใช้ที่เพิ่มขึ้นซึ่งเข้าถึงเว็บผ่านสมาร์ทโฟนและแท็บเล็ต
เทคนิคขั้นสูง
นอกเหนือจากพื้นฐานแล้ว Next.js Metadata API ยังรองรับเทคนิคขั้นสูงหลายอย่างสำหรับการเพิ่มประสิทธิภาพเมตาดาต้าของเว็บไซต์ของคุณ:1. การใช้แท็ก robots
เมตาแท็ก robots
ควบคุมวิธีการที่โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาควรจัดทำดัชนีและติดตามลิงก์บนเว็บไซต์ของคุณ คุณสามารถใช้แท็กนี้เพื่อป้องกันไม่ให้บางหน้าถูกจัดทำดัชนี หรือเพื่อป้องกันไม่ให้โปรแกรมรวบรวมข้อมูลติดตามลิงก์บนหน้าเว็บ
ตัวอย่าง:
// app/page.js
export const metadata = {
robots: {
index: false,
follow: true,
nocache: true,
googleBot: {
index: true,
follow: false,
noimageindex: true,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
}
ในตัวอย่างนี้ เรากำลังบอกเครื่องมือค้นหาไม่ให้จัดทำดัชนีหน้านี้ แต่ให้ติดตามลิงก์บนหน้า นอกจากนี้เรายังให้คำแนะนำเฉพาะสำหรับโปรแกรมรวบรวมข้อมูล Googlebot อีกด้วย
2. การใช้แท็ก alternates
เมตาแท็ก alternates
กำหนดเวอร์ชันทางเลือกของหน้าเว็บ เช่น การแปลหรือรูปแบบที่แตกต่างกัน สิ่งนี้มีประโยชน์สำหรับเว็บไซต์หลายภาษาและเว็บไซต์ที่เสนอเนื้อหาในหลายรูปแบบ (เช่น AMP)
ตัวอย่าง:
// app/page.js
export const metadata = {
alternates: {
canonical: 'https://example.com/blog/my-awesome-blog-post',
languages: {
'en-US': 'https://example.com/en-US/blog/my-awesome-blog-post',
'fr-FR': 'https://example.com/fr-FR/blog/my-awesome-blog-post',
'es-ES': 'https://example.com/es-ES/blog/my-awesome-blog-post',
},
},
}
ในตัวอย่างนี้ เรากำลังกำหนด URL หลักสำหรับหน้าและให้ลิงก์ไปยังเวอร์ชันทางเลือกของหน้าในภาษาอังกฤษ ฝรั่งเศส และสเปน
3. การยืนยันความเป็นเจ้าของเว็บไซต์
เมตาแท็กverification
ใช้เพื่อยืนยันความเป็นเจ้าของเว็บไซต์ของคุณกับบริการต่าง ๆ เช่น Google Search Console และ Pinterest สิ่งนี้ช่วยให้คุณเข้าถึงคุณสมบัติเพิ่มเติมและการวิเคราะห์สำหรับเว็บไซต์ของคุณได้
ตัวอย่าง:
// app/page.js
export const metadata = {
verification: {
google: 'google_search_console_verification_code',
yandex: 'yandex_webmaster_verification_code',
yahoo: 'yahoo_site_explorer_verification_code',
bing: 'bing_webmaster_verification_code',
},
}
ในตัวอย่างนี้ เรากำลังให้รหัสยืนยันสำหรับ Google Search Console, Yandex Webmaster, Yahoo Site Explorer และ Bing Webmaster
ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง
แม้ว่า Next.js Metadata API จะทำให้การจัดการเมตาดาต้าง่ายขึ้น แต่สิ่งสำคัญคือต้องหลีกเลี่ยงข้อผิดพลาดทั่วไปที่อาจส่งผลเสียต่อประสิทธิภาพ SEO และโซเชียลมีเดียของคุณ:- เมตาดาต้าซ้ำซ้อน: ตรวจสอบให้แน่ใจว่าแต่ละหน้าบนเว็บไซต์ของคุณมีเมตาดาต้าที่ไม่ซ้ำกัน เมตาดาต้าที่ซ้ำซ้อนอาจทำให้เครื่องมือค้นหาสับสนและส่งผลเสียต่ออันดับของคุณได้
- เมตาดาต้าที่ขาดหายไป: อย่าละเลยที่จะเพิ่มเมตาดาต้าไปยังหน้าเว็บทั้งหมดของคุณ การขาดเมตาดาต้าอาจทำให้เครื่องมือค้นหาและแพลตฟอร์มโซเชียลมีเดียทำความเข้าใจเนื้อหาของหน้าเว็บของคุณได้ยาก
- การยัดเยียดคีย์เวิร์ด: หลีกเลี่ยงการยัดเยียดคีย์เวิร์ด ซึ่งเป็นการใช้คีย์เวิร์ดมากเกินไปในเมตาดาต้าของคุณ สิ่งนี้อาจถูกมองว่าเป็นสแปมและอาจส่งผลเสียต่ออันดับในเครื่องมือค้นหาของคุณได้
- เมตาดาต้าที่ไม่เกี่ยวข้อง: ตรวจสอบให้แน่ใจว่าเมตาดาต้าของคุณเกี่ยวข้องกับเนื้อหาของหน้า เมตาดาต้าที่ไม่เกี่ยวข้องอาจทำให้ผู้ใช้สับสนและส่งผลเสียต่อความน่าเชื่อถือของเว็บไซต์ของคุณได้
- การละเลยเมตาดาต้าของโซเชียลมีเดีย: อย่าลืมเพิ่มเมตาดาต้า Open Graph และ Twitter ไปยังหน้าเว็บของคุณ สิ่งนี้จำเป็นอย่างยิ่งเพื่อให้แน่ใจว่าเนื้อหาของคุณจะแสดงผลอย่างถูกต้องเมื่อถูกแชร์บนแพลตฟอร์มโซเชียลมีเดีย
- การไม่ทดสอบเมตาดาต้า: ทดสอบเมตาดาต้าของคุณเสมอเพื่อให้แน่ใจว่าแสดงผลอย่างถูกต้องบนเครื่องมือค้นหาและแพลตฟอร์มโซเชียลมีเดีย ใช้เครื่องมืออย่าง Facebook Sharing Debugger และ Twitter Card Validator เพื่อระบุและแก้ไขปัญหาใด ๆ
- การไม่อัปเดตเมตาดาต้า: ควรตรวจสอบและอัปเดตเมตาดาต้าอย่างสม่ำเสมอเพื่อให้แน่ใจว่าสะท้อนเนื้อหาของหน้าเว็บของคุณได้อย่างถูกต้องและยังคงเกี่ยวข้องกับกลุ่มเป้าหมายของคุณ
เครื่องมือสำหรับทดสอบเมตาดาต้า
มีเครื่องมือหลายอย่างที่สามารถช่วยคุณทดสอบและตรวจสอบความถูกต้องของเมตาดาต้าของคุณได้:- Facebook Sharing Debugger: เครื่องมือนี้ช่วยให้คุณสามารถดูตัวอย่างว่าหน้าเว็บของคุณจะแสดงผลอย่างไรเมื่อถูกแชร์บน Facebook นอกจากนี้ยังให้ข้อมูลเกี่ยวกับข้อผิดพลาดหรือคำเตือนใด ๆ ที่เกี่ยวข้องกับเมตาดาต้า Open Graph ของคุณ Facebook Sharing Debugger
- Twitter Card Validator: เครื่องมือนี้ช่วยให้คุณสามารถดูตัวอย่างว่าหน้าเว็บของคุณจะแสดงผลอย่างไรเมื่อถูกแชร์บน Twitter นอกจากนี้ยังให้ข้อมูลเกี่ยวกับข้อผิดพลาดหรือคำเตือนใด ๆ ที่เกี่ยวข้องกับเมตาดาต้า Twitter ของคุณ Twitter Card Validator
- Google Search Console: เครื่องมือนี้ให้ข้อมูลเชิงลึกเกี่ยวกับวิธีที่ Google รวบรวมข้อมูลและจัดทำดัชนีเว็บไซต์ของคุณ นอกจากนี้ยังสามารถช่วยคุณระบุปัญหาใด ๆ ที่เกี่ยวข้องกับเมตาดาต้าของคุณได้ Google Search Console
- SEO Meta in 1 CLICK: ส่วนขยายของ Chrome นี้จะแสดงเมตาแท็กทั้งหมดในคลิกเดียว ทำให้คุณสามารถตรวจสอบเมตาดาต้าของคุณได้อย่างง่ายดาย