پیکربندی نادرست ابرداده های وب سایت می تواند باعث ایجاد مشکلات شدید در تجربه کاربر و قابلیت کشف وب سایت شود.
این مهم است که نه تنها متادیته چیست، بلکه نحوه استفاده از آن توسط اینترنت بزرگتر و نحوه پیکربندی آن در برنامه Next.js مهم است. Next.js در هنگام تنظیم متادیتا گزینه های مختلفی را ارائه می دهد و بهترین گزینه به نسخه چارچوبی که استفاده می کنید و روشی که از آن برای تولید صفحات برای بازدیدکنندگان خود استفاده می کنید بستگی دارد.
در این مقاله، روش‌های مختلفی را یاد خواهید گرفت که می‌توانید متادیتای وب‌سایت Next.js خود را سفارشی و بهینه کنید تا سئو و تجربه کاربری آن را بهبود بخشید، همچنین با پیشنهاداتی درباره زمان استفاده از هر رویکرد آشنا خواهید شد.
ابرداده چگونه استفاده می شود؟
ویکی‌پدیا متادیتا را به‌عنوان «داده‌هایی که اطلاعاتی درباره سایر داده‌ها ارائه می‌دهند» تعریف می‌کند.
در زمینه وب سایت ها، ابرداده به داده های نامرئی اشاره دارد که محتوای یک وب سایت را توصیف می کند. این ابرداده توسط موتورهای جستجو، پلتفرم های رسانه های اجتماعی و سایر سرویس های وب برای درک ساختار، محتوا و معنای وب سایت شما استفاده می شود.
بسته به پیکربندی، ابرداده گم یا نادرست می تواند به طور فعال به عملکرد وب سایت شما آسیب برساند. در اینجا چند روش استفاده از ابرداده آورده شده است:
- بهینه سازی موتور جستجو (SEO): موتورهای جستجو از ابرداده برای تعیین ارتباط صفحه وب شما برای جستجوهای خاص و همچنین نحوه رتبه بندی آن موتورهای جستجو یک صفحه وب خاص استفاده می کنند. هرچه فراداده دقیق‌تر و تعریف‌شده‌تر باشد، موتور جستجو بهتر می‌داند که وقتی با یک پرس و جو مطابقت دارد، آن را ارائه می‌کند.
- اشتراک گذاری رسانه های اجتماعی: پلتفرم های رسانه های اجتماعی از فراداده Open Graph برای نمایش محتوای وب سایت شما در فیدهای خود مانند فیس بوک، توییتر و لینکدین استفاده می کنند. این اطلاعاتی است که برای نشان دادن کارت‌های سبک در هنگام چسباندن پیوند استفاده می‌شود.
- کشف محتوا: فراداده به کاربران کمک می کند محتوایی را پیدا کنند که با علایق و ترجیحات آنها مطابقت دارد.
- تکه های غنی: موتورهای جستجو می توانند داده های ساختاریافته را از وب سایت شما استخراج کنند تا قطعه های غنی را در نتایج جستجو نمایش دهند. در زیر نمونه‌ای از ریچ اسنیپت‌ها وجود دارد که همراه با یک فیلم برای نمایش رتبه‌بندی‌ها نمایش داده می‌شوند:
چه مشکلاتی ممکن است با ابرداده های پیکربندی نادرست رخ دهد؟
هنگامی که ابرداده به درستی پیکربندی نشده باشد، ممکن است تعدادی از مشکلات ایجاد شود.
به عنوان مثال، متادیتا با پیکربندی ضعیف می‌تواند منجر به رتبه‌بندی جستجوی پایین‌تر شود، و باعث می‌شود کاربران کمتر وب‌سایت شما را پیدا کنند (مثلاً رتبه‌بندی خارج از اولین صفحه نتایج موتور جستجو (SERP). به عنوان فروشگاه های آنلاین، علاوه بر این، ابرداده های نادرست یا گمراه کننده می تواند به شهرت و اعتبار یک وب سایت آسیب برساند و کاربران را به زیر سوال ببرد. قابل اعتماد بودن محتوای آن
پیوندهای شکسته و خطاهای 404 ممکن است زمانی رخ دهند که ابرداده نادرست یا گم شده باشد و تجربه کاربری ضعیفی ایجاد کند. سایر مسائلی که باعث ایجاد تجربه کاربری ضعیف می شود عبارتند از: عنوان، توضیحات یا تصاویر ناقص صفحه، مشکلات محتوای تکراری، نام تجاری ناسازگار در صفحات یا بخش های مختلف، مشکلات استفاده از تلفن همراه، که احتمال رها شدن کاربران را در صورت بروز خطا یا ناسازگاری افزایش می دهد.
با تنظیم صحیح ابرداده خود، می توانید از این مشکلات جلوگیری کنید و تجربه بهتری برای کاربران خود ایجاد کنید.
Next.js چگونه به صورت پیش‌فرض ابرداده را مدیریت می‌کند؟
به‌طور پیش‌فرض، Next.js شامل ابرداده‌های اساسی مانند عنوان صفحه، مجموعه کاراکترها و تنظیمات viewport در قسمت سر HTML هر صفحه است. زیر HTML است head پروژه جدید Next.js ایجاد شده:
charset="utf-8" />
name="viewport" content="width=device-width, initial-scale=1" />
با این حال، این رفتار پیش‌فرض هیچ ابرداده خاصی را برای سئو یا بهینه‌سازی رسانه‌های اجتماعی ارائه نمی‌کند. شما می خواهید ابرداده خود را برای برنامه اضافه کنید، و اغلب بر اساس هر صفحه.
نحوه سفارشی سازی متادیتا در Next.js
Next.js چندین راه حل برای سفارشی کردن ابرداده بسته به نیاز برنامه ارائه می دهد.
با استفاده از next/head
رویکرد اول از داخلی استفاده می کند next/head مؤلفه‌ای که می‌تواند شامل برچسب‌های Open Graph، کارت‌های توییتر و سایر ابرداده‌های مرتبط باشد. این به شما امکان می دهد ابرداده های خود را بر روی صفحات یا مسیرهای خاص تنظیم کنید و کنترل بیشتری بر نحوه ارائه محتوای خود در نتایج جستجو و پلتفرم های رسانه های اجتماعی به شما می دهد.
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<title>My Custom Titletitle>
<meta name="description" content="This is my custom description for SEO." />
<meta name="keywords" content="Next.js, metadata, SEO" />
<meta property="og:title" content="My Custom Title" />
<meta property="og:description" content="Open Graph description for sharing." />
<link rel="icon" href="/favicon.ico" />
Head>
<main>
<h1>Welcome to My Pageh1>
main>
>
)
}
این رویکرد در درجه اول برای اجزای سمت مشتری استفاده می شود که در آن head صفحه باید به صورت پویا بر اساس تعامل مشتری تغییر کند. به عنوان مثال، اگر باید عنوان یا فاویکون یک برگه را در مرورگر به روز کنید.
صادرات metadata شی
در نسخه‌های Next.js که از روتر برنامه استفاده می‌کنند، می‌توانید متادیتای صفحه را با صادر کردن متغیری با نام مناسب تعریف کنید. metadata. این به شما امکان می دهد ابرداده خود را در یک ساختار تعریف کنید:
// app/page.tsx
export const metadata = {
title: 'Clerk | Authentication and User Management',
description:
'The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.',
keywords: ['Next.js', 'Authentication', 'User Management'],
openGraph: {
title: 'Clerk',
description: 'The best user management and authentication platform.',
url: 'https://clerk.com',
},
}
// Code removed for brevity...
اگر می‌خواهید مقادیر یکسانی را در چندین صفحه اعمال کنید، می‌توانید صادر کنید metadata از یک فایل طرح بندی نیز. این متادیتا را برای هر مسیر فرزند آن طرح‌بندی اعمال می‌کند.
استفاده از این رویکرد برای صفحاتی با ابرداده که اغلب تغییر نمی کنند مناسب است.
تولید متادیتا به صورت پویا
در نهایت، اگر مقادیر فراداده را در بارگذاری صفحه ایجاد می کنید، می توانید از آن استفاده کنید generateMetadata() تابعی برای تنظیم پویا مقادیر. این در شرایطی استفاده می‌شود که قالب صفحه بسته به داده‌هایی که در آن بارگذاری می‌شود، متفاوت ارائه می‌شود.
با استفاده از یک وبلاگ به عنوان مثال، معمولاً یک الگوی صفحه وجود دارد که برای ارائه هر پست استفاده می شود، با اسلاگ پست به عنوان پارامتر صفحه ارسال می شود. قطعه زیر نحوه عملکرد این رویکرد را نشان می دهد. Slug برای واکشی داده‌های پست از یک API قبل از ایجاد ابرداده برای آن صفحه استفاده می‌شود:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const res = await fetch(`/api/posts/${params.slug}`)
const post = await res.json()
return {
title: post.title,
description: post.summary,
openGraph: {
title: post.title,
description: post.summary,
url: `https://clerk.com/blog/${params.slug}`,
images: [{ url: post.image }],
},
}
}
export default function BlogPost({ params }) {
return <h1>Blog Post: {params.slug}h1>
}
هر مکانی که صفحه به صورت پویا بر اساس منبع داده تولید می شود از این روش استفاده می کند.
وراثت ابرداده Next.js
هنگام سفارشی سازی ابرداده Next.js، نیازی به تعیین مقادیر یکسان در همه مسیرها ندارید.
Next.js به طور خودکار قوانین وراثت را از مسیر والد به هر مسیر فرزندی اعمال می کند، اگر آنها تعریف نشده باشند. با استفاده از مثال وبلاگ، اگر ریشه وب سایت دارای متادیتای زیر باشد که در بالاترین فایل طرح بندی تعریف شده است:
export const metadata = {
title: 'Clerk | Authentication and User Management',
description:
'The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.',
keywords: ['Next.js', 'Authentication', 'User Management'],
openGraph: {
title: 'Clerk',
description: 'The best user management and authentication platform.',
url: 'https://clerk.com',
},
}
و همچنین دارای این تابع است که متادیتا را برای پست های وبلاگ تولید می کند:
export async function generateMetadata({ params }) {
const res = await fetch(`/api/posts/${params.slug}`)
const post = await res.json()
return {
title: post.title,
description: post.summary,
openGraph: {
title: post.title,
description: post.summary,
url: `https://clerk.com/blog/${params.slug}`,
},
}
}
این keywords مقدار همچنان در پست وبلاگ تنظیم می شود حتی اگر به صراحت در آن تعریف نشده باشد generateMetadata تابع این به این دلیل است که ابرداده فرزند، فراداده والد را بازنویسی می‌کند، اما تنها در صورتی که مقداری وجود داشته باشد.
نتیجه گیری
همانطور که در سراسر این راهنما آموخته اید، سفارشی کردن ابرداده در Next.js می تواند تأثیر قابل توجهی بر تجربه کاربر و نحوه رتبه بندی وب سایت شما توسط موتورهای جستجو داشته باشد. با درک نحوه تعریف و تولید متادیتا به صورت پویا، می‌توانید تجربه‌ای بی‌نظیر و آموزنده برای بازدیدکنندگان خود ایجاد کنید.
از یک سیستم مدیریت کاربر که برای ادغام آسان با برنامه Next.js شما طراحی شده است استفاده کنید. بیشتر بدانید
