วิธีเพิ่ม Meta Tags และทำ SEO ใน Next.js ให้เว็บติดอันดับ Google

ถ้าคุณทำเว็บด้วย Next.js แล้วอยากให้เว็บของคุณ ติดอันดับ Google หรือมี SEO (Search Engine Optimization) ที่ดีขึ้น Meta Tags เป็นสิ่งที่ต้องรู้!

Meta Tags คืออะไร? 🤔

Meta Tags คือ โค้ดที่ซ่อนอยู่ใน <head> ของเว็บเพจ ซึ่งช่วยให้ Google, Facebook, Twitter และแพลตฟอร์มอื่นๆ เข้าใจว่าเว็บของเราคืออะไร

ทำไม Meta Tags สำคัญ?

✅ ช่วยให้ Google จัดอันดับเว็บของคุณดีขึ้น (SEO)
✅ ช่วยให้ Social Media แสดงพรีวิวสวยๆ เวลาแชร์ลิงก์
✅ ช่วยให้เว็บโหลดเร็วขึ้น (Performance Boost)

วันนี้เราจะมาเรียนรู้ว่า Next.js ช่วยให้การเพิ่ม Meta Tags และการทำ SEO ง่ายขึ้นได้ยังไง 💡

🚀 เริ่มต้น: ใช้ <Head> ใน Next.js

ใน Next.js เราใช้คอมโพเนนต์ <Head> จาก next/head เพื่อใส่ Meta Tags ได้ง่ายๆ

🔹 ตัวอย่างใน pages/index.js

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>สุดยอดเว็บ Next.js | ติดอันดับ Google ง่ายๆ 🚀</title>
        <meta name="description" content="เว็บ Next.js ที่สุดยอดสำหรับการทำ SEO และ Meta Tags" />
        <meta name="keywords" content="Next.js, SEO, Meta Tags, Google Ranking" />
        <meta name="author" content="Your Name" />
      </Head>
      <main>
        <h1>🔥 ยินดีต้อนรับสู่สุดยอดเว็บ Next.js!</h1>
      </main>
    </>
  );
}

🔹 อธิบายโค้ด

✅ <title> – เป็นชื่อของหน้าเว็บที่จะแสดงบนแท็บเบราว์เซอร์
✅ <meta name="description"> – บอก Google ว่าเว็บนี้เกี่ยวกับอะไร
✅ <meta name="keywords"> – เพิ่มคีย์เวิร์ดที่ช่วยให้ Google เข้าใจเว็บเรา (แต่ Google ให้ความสำคัญกับ description มากกว่า)
✅ <meta name="author"> – บอกว่าใครเป็นเจ้าของเว็บ

🎯 ปรับแต่ง Meta Tags ให้ Social Media

ถ้าเราแชร์ลิงก์บน Facebook, Twitter หรือ LINE แล้วอยากให้มี รูปภาพ, ชื่อเว็บ และคำอธิบายสวยๆ เราต้องเพิ่ม Open Graph (OG) Tags

🔹 ตัวอย่าง Open Graph Tags

<Head>
  <meta property="og:title" content="สุดยอดเว็บ Next.js | ติดอันดับ Google ง่ายๆ 🚀" />
  <meta property="og:description" content="เว็บ Next.js ที่สุดยอดสำหรับการทำ SEO และ Meta Tags" />
  <meta property="og:image" content="https://yourwebsite.com/og-image.jpg" />
  <meta property="og:url" content="https://yourwebsite.com/" />
  <meta property="og:type" content="website" />
</Head>

🔹 อธิบายโค้ด

✅ og:title – ชื่อของเว็บเมื่อแชร์บน Facebook
✅ og:description – คำอธิบายเว็บ
✅ og:image – รูปภาพพรีวิว (แนะนำขนาด 1200x630px)
✅ og:url – URL ของเว็บ
✅ og:type – ประเภทของเนื้อหา เช่น website, article

🐦 เพิ่ม Twitter Meta Tags

ถ้าอยากให้เว็บดูดีตอนแชร์บน Twitter ให้ใช้ Twitter Card Tags

<Head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="สุดยอดเว็บ Next.js | ติดอันดับ Google ง่ายๆ 🚀" />
  <meta name="twitter:description" content="เว็บ Next.js ที่สุดยอดสำหรับการทำ SEO และ Meta Tags" />
  <meta name="twitter:image" content="https://yourwebsite.com/twitter-image.jpg" />
</Head>

🔹 อธิบายโค้ด

✅ twitter:card – summary_large_image ทำให้แสดงภาพใหญ่
✅ twitter:title – ชื่อของเว็บ
✅ twitter:description – คำอธิบาย
✅ twitter:image – รูปภาพที่ใช้แสดงบน Twitter

🏆 การทำ SEO ให้ Next.js ติดอันดับ Google

นอกจาก Meta Tags แล้ว Next.js ยังช่วยเรื่อง SEO ได้อีกหลายอย่าง เช่น SSR, SSG และ Dynamic Meta Tags

1️⃣ ใช้ Server-side Rendering (SSR) เพื่อโหลด Meta Tags แบบไดนามิก

บางหน้าเว็บ (เช่น บทความ หรือหน้าสินค้า) อาจต้องใช้ Meta Tags ที่เปลี่ยนแปลงตามข้อมูล Next.js รองรับ SSR เพื่อโหลด Meta Tags ตามเนื้อหาแต่ละหน้า

import Head from 'next/head';

export async function getServerSideProps() {
  const post = { title: "บทความสุดเจ๋ง!", description: "เนื้อหาดีมากเกี่ยวกับ SEO" };

  return { props: { post } };
}

export default function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.description} />
      </Head>
      <main>
        <h1>{post.title}</h1>
        <p>{post.description}</p>
      </main>
    </>
  );
}

2️⃣ ใช้ Static Site Generation (SSG) ให้เว็บโหลดเร็ว

ถ้าเนื้อหาของเว็บเปลี่ยนไม่บ่อย เช่น หน้าเกี่ยวกับเรา หรือ หน้าผลิตภัณฑ์ เราสามารถใช้ SSG เพื่อให้เว็บโหลดเร็วขึ้น

export async function getStaticProps() {
  return {
    props: { title: "เกี่ยวกับเรา", description: "นี่คือหน้าเกี่ยวกับเรา" },
  };
}

🔍 เช็คว่า Meta Tags ทำงานหรือไม่?

หลังจากเพิ่ม Meta Tags แล้ว ต้องเช็คว่าใช้งานได้จริง โดยใช้เครื่องมือ

✅ Google Rich Results Test – https://search.google.com/test/rich-results
✅ Facebook Sharing Debugger – https://developers.facebook.com/tools/debug/
✅ Twitter Card Validator – https://cards-dev.twitter.com/validator

📌 สรุป

✅ ใช้ <Head> ใน Next.js เพื่อเพิ่ม Meta Tags
✅ เพิ่ม Open Graph Tags เพื่อให้ Social Media แสดงผลสวยๆ
✅ ใช้ Twitter Card Tags เพื่อให้เว็บดูดีเวลาทวีต
✅ ใช้ SSR และ SSG เพื่อปรับ Meta Tags ตามเนื้อหาแต่ละหน้า
✅ เช็คว่า Meta Tags ทำงานจริงผ่านเครื่องมือของ Google, Facebook และ Twitter

พร้อมทำ SEO ให้เว็บ Next.js ของคุณติดอันดับ Google แล้วหรือยัง? 🚀

การจัดการ Layout ด้วย _app.js และ _document.js ใน Next.js

ถ้าคุณเคยเขียนเว็บแอปด้วย Next.js แล้วต้องการให้ทุกหน้ามีโครงสร้าง Layout เหมือนกัน เช่น มี Header, Footer, หรือใช้ธีมเดียวกัน คุณอาจจะเจอปัญหาว่า "ฉันต้องคัดลอกโค้ดพวกนี้ไปทุกหน้าเลยเหรอ?"

ข่าวดีคือ Next.js มีไฟล์พิเศษ _app.js และ _document.js ที่ช่วยให้เราจัดการ Layout และโครงสร้างเอกสาร HTML ได้ง่ายขึ้น!

ในบทความนี้ เราจะมาทำความเข้าใจว่า _app.js และ _document.js คืออะไร ใช้งานยังไง และมีเทคนิคอะไรที่ช่วยให้เว็บเราทำงานได้ดีขึ้น พร้อมตัวอย่างโค้ดแบบเข้าใจง่าย

 _app.js และ _document.js คืออะไร?

📌 _app.js (หรือ _app.tsx สำหรับ TypeScript)

• เป็นไฟล์ที่ทำหน้าที่ ครอบทุกหน้าในเว็บของเรา
• ใช้สำหรับ จัดการ Layout เช่น ใส่ Header, Footer, Theme, Global CSS
• ใช้เพื่อ ควบคุม state ของแอป เช่น Redux, Context API

📌 _document.js

• ใช้เพื่อกำหนด โครงสร้าง HTML พื้นฐาน ของเว็บ
• ใช้ใส่พวก Meta tags, Font, Script ที่ต้องโหลดก่อนหน้าเว็บ
• ใช้แก้ไข <html>, <head>, <body> ที่ Next.js สร้างขึ้นอัตโนมัติ

1. _app.js – ควบคุม Layout ของเว็บ

โค้ดตัวอย่าง _app.js

import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <div>
      <header>My Header</header>
      <main>
        <Component {...pageProps} />
      </main>
      <footer>My Footer</footer>
    </div>
  );
}

อธิบายโค้ด

• Component คือหน้าที่เรากำลังเข้าถึง เช่น /about หรือ /contact
• pageProps คือข้อมูลที่ถูกส่งไปยังหน้านั้น ๆ
• <header> และ <footer> จะอยู่เหมือนกันทุกหน้า

✅ ข้อดีของการใช้ _app.js

• ทำให้ทุกหน้ามี Layout เหมือนกัน
• ลดโค้ดซ้ำซ้อน ไม่ต้องใส่ <header> หรือ <footer> เองทุกหน้า

2. ใช้ Layout แยกตามหน้า

บางหน้าของเว็บอาจต้องการ Layout ที่แตกต่างกัน เช่น หน้า Dashboard กับหน้า Landing Page อาจใช้ Layout คนละแบบ
 

วิธีใช้ Layout แบบกำหนดเอง

export default function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);

  return getLayout(<Component {...pageProps} />);
}

จากนั้นที่หน้าไหนที่ต้องการ Layout พิเศษ ให้เพิ่มฟังก์ชัน getLayout

import DashboardLayout from '../components/DashboardLayout';

export default function Dashboard() {
  return <h1>This is Dashboard</h1>;
}

Dashboard.getLayout = function getLayout(page) {
  return <DashboardLayout>{page}</DashboardLayout>;
};

✅ ข้อดีของวิธีนี้

• ทำให้แต่ละหน้าสามารถใช้ Layout ที่แตกต่างกันได้
• ไม่ต้องใช้เงื่อนไข if ใน _app.js ให้ยุ่งยาก

3. _document.js – ควบคุมโครงสร้าง HTML

ปกติแล้ว Next.js สร้างโครงสร้าง HTML อัตโนมัติให้ แต่ถ้าเราต้องการเพิ่ม Meta Tags, Font, หรือแก้ไข <html> และ <body> เราต้องใช้ _document.js
 

โค้ดตัวอย่าง _document.js

import { Html, Head, Main, NextScript } from 'next/document';

export default function MyDocument() {
  return (
    <Html lang="th">
      <Head>
        <meta charSet="UTF-8" />
        <meta name="description" content="This is my Next.js app" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}


อธิบายโค้ด

• <Html lang="th"> → กำหนดภาษาเริ่มต้นเป็นภาษาไทย
• <meta> → ใส่ข้อมูลเกี่ยวกับเว็บ เช่น คำอธิบาย
• <link> → ใส่ฟอนต์จาก Google Fonts
• <Main /> → ตรงนี้คือเนื้อหาของแต่ละหน้า
• <NextScript /> → ใส่สคริปต์ที่ Next.js ต้องการ

✅ ข้อดีของการใช้ _document.js

• กำหนดค่า <html> และ <body> ได้
• ใส่ Global Meta Tags ได้ง่ายขึ้น
• ทำให้เว็บโหลดเร็วขึ้น (ใช้ preconnect, preload)

4. ใช้ _app.js และ _document.js ร่วมกันให้เกิดประโยชน์สูงสุด

ลองดูโค้ดตัวอย่างที่ผสมทั้ง _app.js และ _document.js ให้ทำงานร่วมกัน

 _app.js

import '../styles/globals.css';
import Layout from '../components/Layout';

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}


_document.js

import { Html, Head, Main, NextScript } from 'next/document';

export default function MyDocument() {
  return (
    <Html lang="en">
      <Head>
        <meta charSet="UTF-8" />
        <link rel="stylesheet" href="/global.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}


✅ ผลลัพธ์ที่ได้

• ทุกหน้าจะถูกครอบด้วย <Layout> ที่เราสร้าง
• Meta Tags และ Font ถูกใส่จาก _document.js
• โค้ดสะอาดและเป็นระเบียบ

สรุป

ความสามารถ	_app.js	_document.js
ควบคุม Layout	✅	❌
ใส่ Meta Tags	❌	✅
ใส่ CSS/Theme	✅	✅
ใส่ Script พิเศษ	❌	✅
แก้ไข <html> และ <body>	❌	✅

• _app.js ใช้สำหรับควบคุม Layout และการทำงานของแอป
• _document.js ใช้สำหรับกำหนดโครงสร้าง HTML และ Meta Tags

ถ้าคุณใช้งานทั้งสองไฟล์ให้ถูกวิธี เว็บของคุณจะเร็วขึ้น โหลดเร็วขึ้น และจัดการง่ายขึ้นแน่นอน!