ابرداده اطلاعاتی در مورد داده های صفحه وب شما است و برای سئو (بهینه سازی موتور جستجو) و به اشتراک گذاری رسانه های اجتماعی ضروری است.
Metadata چیست؟
فراداده داده‌ای است که داده‌های دیگر را توصیف می‌کند. در زمینه یک صفحه وب، ابرداده اطلاعاتی در مورد صفحه است که مستقیماً به کاربران نشان داده نمی شود، اما می تواند برای موتورهای جستجو، مرورگرها و سایر فناوری ها مفید باشد.
به عنوان مثال، عنوان یک صفحه وب، توضیحات آن، نویسنده، کلمات کلیدی و سایر جزئیات مشابه، همگی ابرداده هستند. اینها در of your HTML document using elements like ، و غیره.
متادیتای پویا چیست؟
فراداده پویا به ابرداده هایی گفته می شود که بر اساس محتوای صفحه تغییر می کنند. به عنوان مثال، ممکن است شما یک وبلاگ با چندین پست داشته باشید و بخواهید هر پستی که در رسانه های اجتماعی به اشتراک گذاشته می شود، عنوان و توضیحات خاص خود را داشته باشد. این را می توان با ابرداده های پویا به دست آورد.
استفاده از Metadata و Dynamic Metadata در Next.js
Next.js از Head جزء از next/head برای اضافه کردن عناصر به of your HTML page. You can use this component to add metadata and dynamic metadata to your pages.
Here’s an example of how you can do it:
import Head from 'next/head'
export default function BlogPost({ post }) {
return (
<>
<Head>
<title>{post.title}title>
<meta name="description" content={post.description} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.description} />
<meta property="og:image" content={post.image} />
Head>
<h1>{post.title}h1>
<p>{post.content}p>
>
)
}
در این مثال، post یک شی حاوی اطلاعات یک پست وبلاگ است. ابرداده های صفحه به صورت پویا بر اساس ویژگی های تنظیم می شوند post.
راه اندازی متادیتا پویا در Next.js
تنظیم ابرداده پویا در پروژه Next.js شما کاملاً ساده است. در اینجا یک مثال گام به گام آورده شده است:
-
کامپوننت Head را وارد کنید: Next.js یک را ارائه می دهد
Headجزء که می توانید برای اضافه کردن عناصر به آن استفاده کنیدof your HTML document. To use it, you need to import it fromnext/headدر فایل کامپوننت شماimport Head from 'next/head' -
از کامپوننت Head استفاده کنید: می توانید از
Headجزء در کامپوننت شما به صورت زیر است:<Head> <title>Your titletitle> Head>در این مثال، a را اضافه می کنیم
-
متادیتا پویا اضافه کنید: برای افزودن ابرداده پویا، فقط باید داده های پویا را به خود منتقل کنید
Headجزء. به عنوان مثال، اگر در حال ساختن یک وبلاگ هستید و می خواهید هر پست عنوان خاص خود را داشته باشد، می توانید این کار را به صورت زیر انجام دهید:import Head from 'next/head' export default function BlogPost({ post }) { return ( <> <Head> <title>{post.title}title> <meta name="description" content={post.description} /> <meta property="og:title" content={post.title} /> <meta property="og:description" content={post.description} /> <meta property="og:image" content={post.image} /> Head> <h1>{post.title}h1> <p>{post.content}p> > ) }در این مثال،
postیک شی حاوی اطلاعات یک پست وبلاگ است. ابرداده های صفحه به صورت پویا بر اساس ویژگی های تنظیم می شوندpost.
اهمیت ابرداده برای سئو و رسانه های اجتماعی
ابرداده برای سئو و به اشتراک گذاری رسانه های اجتماعی بسیار مهم است.
- سئو: ابرداده ها مانند عنوان و توضیحات برای موتورهای جستجو برای درک محتوای صفحه شما و نمایش مناسب آن در نتایج جستجو ضروری است.
-
رسانه های اجتماعی: ابرداده مانند
og:title،og:description، وog:imageبرای نحوه نمایش محتوای شما هنگام اشتراک گذاری در پلتفرم هایی مانند فیس بوک و توییتر مهم هستند.
استفاده از انواع دیگر متادیتا
علاوه بر ابرداده اصلی، انواع دیگری از ابرداده وجود دارد که می تواند مفید باشد:
- متا ربات ها: برای کنترل نحوه فهرست بندی صفحه شما توسط موتورهای جستجو.
<meta name="robots" content="index, follow" />
- Meta Viewport: برای بهبود تجربه در دستگاه های تلفن همراه.
<meta name="viewport" content="width=device-width, initial-scale=1" />
- متا چارست: برای تعریف رمزگذاری کاراکتر.
<meta charset="UTF-8" />
نمونه کامل متادیتا در Next.js
در اینجا یک مثال کامل تر است که شامل برخی از ابرداده های ذکر شده در بالا است:
import Head from 'next/head'
export default function BlogPost({ post }) {
return (
<>
<Head>
<title>{post.title} | My Blogtitle>
<meta name="description" content={post.description} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.description} />
<meta property="og:image" content={post.image} />
<meta property="og:type" content="article" />
<meta property="og:url" content={`https://my-site.com/blog/${post.slug}`} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={post.title} />
<meta name="twitter:description" content={post.description} />
<meta name="twitter:image" content={post.image} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
Head>
<h1>{post.title}h1>
<p>{post.content}p>
>
)
}
بهینه سازی اضافی
- پیش نمایش ها و ریچ اسنیپت ها: استفاده از داده های ساختاریافته (JSON-LD) را برای بهبود قطعه های غنی در نتایج جستجو در نظر بگیرید.
<script type="application/ld+json">
{`
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "${post.title}",
"image": "${post.image}",
"author": "${post.author}",
"publisher": {
"@type": "Organization",
"name": "My Blog",
"logo": {
"@type": "ImageObject",
"url": "https://my-site.com/logo.png"
}
},
"datePublished": "${post.datePublished}"
}
`}
script>
بهترین شیوه ها
- از تکراری شدن بپرهیزید: مطمئن شوید که ابرداده‌ها را کپی نکنید، زیرا این امر می‌تواند موتورهای جستجو را سردرگم کند.
- سازگاری در فراداده: برای اطمینان از تجربه کاربری منسجم هنگام اشتراک‌گذاری محتوا، بین عنوان صفحه و Open Graph و ابرداده توییتر سازگاری داشته باشید.
نتیجه
متادیتا و متادیتا پویا ویژگی های قدرتمندی در Next.js هستند که به شما امکان می دهند صفحات خود را برای موتورهای جستجو و رسانه های اجتماعی بهینه کنید. با درک اینکه چگونه آنها کار می کنند و چگونه می توانید از آنها در پروژه های خود استفاده کنید، می توانید به طور قابل توجهی دید و اشتراک گذاری صفحات وب خود را بهبود بخشید.
