ایجاد تصویر اختصاصی Open Graph برای هر پست در وبلاگ استاتیک Next.js

در مطالب قبلی، به چند روش برای بهبود سئوی وبلاگ استاتیک ساخته شده بر بستر Next.js پرداخته شد، از جمله استفاده از کامپوننت NextSeo برای بهبود اشتراک‌پذیری از طریق قرار دادن خلاصه‌ی محتوا و عنوان مطالب با استفاده از متا تگ‌های اوپن گراف یا Open Graph. در آن مطلب، از یک تصویر ثابت برای اوپن گراف استفاده شده بود.

تصاویر اوپن‌ گراف، یکی از عوامل اساسی در بهبود رتبه وب سایت شما در موتورهای جستجو هستند. این تصاویر، در شبکه‌های اجتماعی نمایش داده می‌شوند و برای ارتقای قابلیت اشتراک گذاری پست‌های شما در این شبکه‌ها بسیار مهم هستند.

در این مقاله قصد داریم به شرح نحوه ایجاد تصاویر اختصاصی برای هر مطلب با استفاده از سرویس تصویر کلودیناری (Cloudinary) و نحوه استفاده از تصاویر Open Graph برای یک پروژه Next.js بپردازیم.

سرویس تصویر کلودینری یکی از محبوب‌ترین سرویس‌های ذخیره و پردازش تصاویر در بستر وب می‌باشد. با استفاده از کلودینری، می‌توانید تصاویر خود را به سادگی بارگذاری کرده و از امکانات متنوع آن برای پردازش و بهینه‌سازی تصاویر خود استفاده کنید.

قبل از هر اقدامی، برای ادغام سریع و آسان برنامه خود با کلودینری، نیاز به اضافه کردن پکیج @cloudinary/url-gen به پروژه دارید. با استفاده از این پکیج، می‌توانید به راحتی و سرعت کار خود را با کلودینری ادغام کنید. برای افزودن این پکیج به پروژه خود، از دستور زیر استفاده کنید.

pnpm add @cloudinary/url-gen

پس از نصب کردن پکیج، می‌توانیم ماژول‌های مورد نیاز را ایمپورت کنیم و با جزئیات حساب کاربری و اطلاعات احراز هویت خود یک اینستنس جدید ایجاد کنیم.

حالا در دایرکتوری ریشه پروژه، فایلی با نام .env.local ایجاد کنید. محتوای زیر را به فایل ایجاد شده اضافه کنید.

CLOUDINARY_CLOUD_NAME=<your_cloud_name>
CLOUDINARY_API_KEY=<your_api_key>
CLOUDINARY_API_SECRET=<your_api_secret>

این متغیرهای محیطی برای پیکربندی شیcloudinary در کد ما استفاده خواهند شد.

یک فایل جدید با عنوان cloudinary.ts و با محتوای زیر، در پوشه utils در دایرکتوری ریشه پروژه خود ایجاد کنید.

import { Cloudinary } from '@cloudinary/url-gen'

const cloudinary = new Cloudinary({
  cloud: {
    cloudName: process.env.CLOUDINARY_CLOUD_NAME,
    apiKey: process.env.CLOUDINARY_API_KEY,
    apiSecret: process.env.CLOUDINARY_API_SECRET,
  },
})

export { cloudinary }

اکنون می‌توانیم یک تابع بنویسیم که با دریافت اطلاعات پست وبلاگ به عنوان ورودی، آدرس URL تصویر Open Graph را برگرداند. در این مثال، برای نوشته روی تصویر از عنوان پست استفاده می‌کنیم.

import { Post } from './posts'
import { source } from '@cloudinary/url-gen/actions/overlay'
import { Position } from '@cloudinary/url-gen/qualifiers'
import { center } from '@cloudinary/url-gen/qualifiers/compass'
import { compass } from '@cloudinary/url-gen/qualifiers/gravity'
import { text } from '@cloudinary/url-gen/qualifiers/source'
import { TextFitQualifier } from '@cloudinary/url-gen/qualifiers/textFit'
import { TextStyle } from '@cloudinary/url-gen/qualifiers/textStyle'
import { cloudinary } from './cloudinary'

export function createOgImageUrl(post: Post): string {
  const image = cloudinary.image('blank.png')

  image.overlay(
    source(
      text(post.title, new TextStyle('Cairo', 48))
        .textFit(new TextFitQualifier(840))
        .textColor('BLACK'),
    ).position(new Position().gravity(compass(center())).offsetX(0).offsetY(0)),
  )

  return image.toURL()
}

در کد فوق، ابتدا یک نمونه تصویر جدید با تصویر خالی ایجاد می‌کنیم. سپس یک لایه متن با عنوان پست به تصویر اضافه می‌کنیم. ما خانواده فونت را به Cairo و اندازه فونت را به 48 پیکسل تنظیم می‌کنیم. همچنین از TextFitQualifier استفاده می‌کنیم تا اطمینان حاصل کنیم که متن داخل یک پهنای 840 پیکسل جا می‌گیرد. در نهایت، با استفاده از position و compass، لایه متن را در مرکز تصویر قرار می‌دهیم.

در تابع createOgImageUrl، یک شی از Cloudinary ایجاد شده است که اطلاعات احراز هویت مورد نیاز برای ایجاد تصویر را شامل می‌شود. سپس تصویر اصلی با استفاده از overlay ساخته می‌شود.

در اینجا، text، با استفاده از تابع TextStyle، متن پست را تنظیم می‌کند. این تصویر با textFit و TextFitQualifier تنظیم شده است تا به صورت مناسب برای تصویر Open Graph مناسب باشد. در نهایت، با استفاده از compass و position، موقعیت تصویر تنظیم شده است.

برای استفاده از این تابع در پروژه Next.js خود، می‌توانید از کامپوننت NextSeo در پکیج next-so که در گذشته به آن پرداختیم استفاده کنید.

import { NextSeo } from 'next-seo'

type Props = {
  post: Post
}

function Blog({ post }: Props) {
  const ogImageUrl = createOgImageUrl(post)

  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: ogImageUrl,
              width: 1200,
              height: 630,
              alt: post.title,
            },
          ],
          site_name: 'My Blog',
        }}
      />
      {/* Display post */}
    </>
  )
}

export default Blog

در این مثال، createOgImageUrl به عنوان متغیر ogImageUrl استفاده شده است. مقادیر برای تنظیم تصویر Open Graph ارائه شده است.

در کل، استفاده از تصاویر Open Graph می‌تواند به بهبود رتبه وب سایت شما کمک کند و ایجاد تصاویر جذاب و جذاب تر برای محتوای شما در شبکه های اجتماعی مورد استفاده قرار گیرد. با استفاده از توابعی مانند createOgImageUrl، می توانید به راحتی تصاویر Open Graph جذاب و بهینه شده برای مطالب خود ایجاد کنید.

در این مقاله، تابع createOgImageUrl به عنوان یک ابزار قدرتمند برای ایجاد تصاویر Open Graph در Next.js معرفی شد. شما می‌توانید این تابع را با استفاده از مستندات کلودیناری و افزودن جزئیات و لایه های بیشتر بهبود دهید.

با استفاده از این تابع و ایجاد تصاویر جذاب Open Graph، می توانید به بهبود رتبه سایت خود در موتورهای جستجو کمک کنید و به کاربران خود اجازه دهید تصاویری مناسب برای مطالب خود را به اشتراک بگذارند.