استفاده از تگ های متا Open Graph در یک وبلاگ استاتیک Next.js

اوپن‌گراف یا Open Graph یک استاندارد از تگ های متا برای صفحات وب است که توسط شبکه اجتماعی فیسبوک ایجاد شده است.

این تگ های متا اطلاعات مهمی از صفحه وب را ارائه می‌دهند که به عنوان یک کارت اطلاعاتی در شبکه های اجتماعی نمایش داده می‌شود. این اطلاعات شامل عنوان صفحه، توضیحات، عکس، نام نویسنده و موارد دیگر است که می‌تواند بازدیدهای صفحه وب را افزایش دهد.

پکیج next-seo یکی از پکیج‌های کاربردی برای ایجاد متا تگ های Open Graph در پروژه های Next.js است. با استفاده از این بسته می‌توانید به راحتی متا تگ هایی را برای بهبود ویژگی های ارتباطی پست های وبلاگ خود در شبکه های اجتماعی ایجاد کنید.

در این مقاله قصد داریم نحوه استفاده از این پکیج را در پروژه وبلاگ استاتیک که در مطالب قبلی ساختیم بررسی کنیم.

برای اضافه کردن next-seo به پروژه از دستور زیر استفاده کنید.

pnpm add next-seo

این بسته شامل دو کامپوننت است، DefaultSeo و NextSeo. کامپوننت DefaultSeo برای تنظیم تنظیمات پیش‌فرض سایت برای تمامی صفحات استفاده می‌شود، در حالی که NextSeo برای تنظیم تگ های متا برای هر صفحه جداگانه استفاده می‌شود.

باید ابتدا تنظیمات پیش‌فرض سایت را با استفاده از کامپوننت DefaultSeo تنظیم کنیم. برای این منظور، باید فایل _app.tsx را ویرایش کنیم و کد زیر را اضافه کنیم.

import { DefaultSeo } from 'next-seo'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <DefaultSeo
        title="My Blog"
        description="My blog about everything"
        canonical="https://myblog.com"
        openGraph={{
          url: 'https://myblog.com',
          title: 'My Blog',
          description: 'My awesome blog about everything',
          images: [
            {
              url: 'https://myblog.com/og-image.jpg',
              width: 1200,
              height: 630,
              alt: 'My Blog',
            },
          ],
          site_name: 'My Blog',
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

در کد بالا، ما از کامپوننت DefaultSeo استفاده کرده‌ایم تا تنظیمات پیش‌فرض سایت را تنظیم کنیم. این تنظیمات شامل عنوان سایت، توضیحات، آدرس کانونیکال و تگ های Open Graph می‌شود. در این کد، ما یک تگ Open Graph برای تصویر نیز ایجاد کرده‌ایم.

حالا برای تنظیم تگ های متا برای هر صفحه، باید در هر فایل مربوط به نمایش پست (مثلاً index.tsx و [slug].tsx) از کامپوننت NextSeo استفاده کنیم. برای مثال، کد زیر را در فایل index.tsx قرار می‌دهیم.

import { NextSeo } from 'next-seo'

type Props = {
  posts: Post[]
}

function BlogIndex({ posts }: Props) {
  return (
    <>
      <NextSeo
        title="My Blog - Home"
        description="Welcome to my awesome blog"
        openGraph={{
          url: 'https://myblog.com',
          title: 'My Blog - Home',
          description: 'Welcome to my awesome blog',
          images: [
            {
              url: 'https://myblog.com/og-home.jpg',
              width: 1200,
              height: 630,
              alt: 'My Blog - Home',
            },
          ],
          site_name: 'My Blog',
        }}
      />
      {/* Display posts */}
    </>
  )
}

export default BlogIndex

در کد بالا، ما از کامپوننت NextSeo استفاده کرده‌ایم تا تگ های متا را برای صفحه اصلی وبلاگ تنظیم کنیم. مانند DefaultSeo، ما در اینجا نیز تنظیماتی برای عنوان، توضیحات، آدرس وب، تصویر و نام سایت تعریف کرده‌ایم.

برای پست‌های وبلاگ نیز می‌توانیم به همین شکل از کامپوننت NextSeo استفاده کنیم. برای مثال، کد زیر را در فایل [slug].tsx قرار می‌دهیم.

import { NextSeo } from 'next-seo'

type Props = {
  post: Post
}

function Blog({ post }: Props) {
  return (
    <>
      <NextSeo
        title={`${post.title} - My Blog`}
        description={`${post.content.substring(0, 100)}...`}
        openGraph={{
          url: `https://myblog.com/posts/${post.slug}`,
          title: `${post.title} - My Blog`,
          description: `${post.content.substring(0, 100)}...`,
          images: [
            {
              url: 'https://myblog.com/og-home.jpg',
              width: 1200,
              height: 630,
              alt: post.title,
            },
          ],
          site_name: 'My Blog',
        }}
      />
      {/* Display post */}
    </>
  )
}

export default Blog

در کد بالا، ما از کامپوننت NextSeo برای تنظیم تگ های متا برای هر پست استفاده کرده‌ایم. مانند صفحه اصلی، ما در اینجا نیز تنظیماتی برای عنوان، توضیحات، آدرس URL، تصویر و نام سایت تعریف کرده‌ایم. برای عنوان، ما از عنوان پست در کنار عنوان سایت استفاده کرده‌ایم.

همانطور که می‌بینید، تنظیم تگ های متا با استفاده از next-seo بسیار ساده و قابل فهم است. با استفاده از این کتابخانه، می‌توانیم به راحتی تگ های متا را برای صفحات وب سایت خود تنظیم کنیم و بهترین نتیجه را از SEO به دست آوریم.