بیاموزید که چگونه ابرداده صفحات خود را برای تجربه کاربری بهتر و پوشش سئوی بهبود یافته سفارشی کنید.
عنوان صفحات، متا تگ ها و توضیحات متا برای سئو مهم هستند. آنها اولین چیزهایی هستند که کاربر در SERPS می بیند و تعیین می کند که آیا آنها به وب سایت شما مراجعه می کنند یا خیر. بنابراین مهم است که عناوین، متا تگ ها و توضیحات وب سایت خود را بهینه کنید.
در Next.js، آنها را از طریق کامپوننت head custom اضافه می کنید. می توانید آنها را در تمام صفحات برنامه اضافه کنید یا آنها را برای هر صفحه سفارشی کنید.
افزودن تگ Global Head به همه صفحات Next.js
Next.js _app.js را برای مقداردهی اولیه صفحات فراهم می کند. می توانید از آن برای ایجاد متا تگ های به اشتراک گذاشته شده در تمام صفحات استفاده کنید.
import '../styles/globals.css'
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return <>
<Head>
<meta name="author" content="John Doe"/>
</Head>
<Component {...pageProps} />
</>
}
export default MyApp
اگر می‌خواهید صفحه‌ای دارای عنوان و توضیحات سفارشی باشد، کامپوننت head را به آن اضافه کنید و Next.js از آن به‌جای صفحه پیش‌فرض در مؤلفه App استفاده می‌کند.
افزودن متا تگ ها و توضیحات به یک صفحه خاص Next.js
متا تگ ها و توضیحات استاتیک برای صفحاتی که محتوای آنها ثابت می ماند، به عنوان مثال، صفحه اصلی مناسب است.
فایل /pages/index.js را باز کنید و تگ head را با عنوان و توضیحات مناسب تغییر دهید.
import Head from "next/head";
const Home= () => {
return (
<>
<Head>
<title>Blog</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name='description' content='Programming Articles'/>
</Head>
<main>
<h1>Welcome to my blog!</h1>
</main>
</>
);
};
export default Home;
با وارد کردن آن از next/head به کامپوننت Head دسترسی پیدا می کنید. با افزودن عناصر به تگ head یک صفحه HTML کار می کند. بسته به جایی که این مؤلفه را قرار می دهید، متا تگ ها و توضیحات در کل برنامه یا در صفحات جداگانه در دسترس خواهند بود.
افزودن عنوان، عرض ویوپورت و توضیحات در فایل _app.js تضمین می‌کند که تمام صفحات دارای ابرداده یکسان هستند.
این صفحه دارای محتوای ثابت است، اما گاهی اوقات ممکن است بخواهید صفحاتی ایجاد کنید که محتوای پویا مصرف می کنند.
افزودن عنوان و توضیحات متا پویا به صفحه Next.js
بسته به نوع استفاده، می توانید از getStaticProps()، getStaticPaths() یا getServerSideProps() برای واکشی داده ها در Next.js استفاده کنید. این داده ها محتوای صفحه را تعیین می کند. از آن برای ایجاد ابرداده برای صفحه استفاده کنید.
برای مثال، ایجاد ابرداده برای برنامه Next.js که پست‌های وبلاگ را ارائه می‌کند، خسته‌کننده خواهد بود.
راه پیشنهادی ایجاد یک صفحه پویا است که یک شناسه دریافت می کند که می توانید از آن برای واکشی محتوای وبلاگ استفاده کنید. سپس می توانید از این محتوا در کامپوننت head استفاده کنید.
import { getAllPosts, getSinglePost } from "../../utils/mdx";
import Head from "next/head";
const Post = ({ title, description, content }) => {
return (
<>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
</Head>
<main>{/* page content */}</main>
</>
);
};
export const getStaticProps = async ({ params }) => {
// get a single post
const post = await getSinglePost(params.id, "posts");
return {
props: { ...post },
};
};
export const getStaticPaths = async () => {
// Retrieve all posts
const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } }));
return {
paths,
fallback: false,
};
};
export default Post;
تابع getStaticProps داده های پست را به عنوان props به کامپوننت Post ارسال می کند. مؤلفه «پست» عنوان، توضیحات و محتوا را از ابزارها تخریب می‌کند. سپس کامپوننت head از عنوان و توضیحات در متا تگ ها استفاده می کند.
Next.js یک چارچوب بهینه شده است
شما به تازگی یاد گرفتید که چگونه از کامپوننت head برای اضافه کردن عناوین و توضیحات متا به پروژه Next.js استفاده کنید. از این دانش برای ایجاد هدرهای سازگار با SEO، بالا رفتن از SERP و جذب بازدیدکنندگان بیشتر به سایت خود استفاده کنید.
به غیر از کامپوننت head، Next.js مؤلفه های دیگری مانند Link و Image را ارائه می دهد. این مؤلفه‌ها خارج از جعبه بهینه‌سازی شده‌اند و ایجاد وب‌سایت‌های سریع سئو را آسان‌تر می‌کنند.