כיצד להוסיף כותרות ידידותיות לקידום אתרים לאתר Next.js

כותרות דפים, מטא תגיות ומטא תיאורים חשובים לקידום אתרים. הם הדברים הראשונים שמשתמש רואה ב-SERPS וקובעים אם הוא יעבור לאתר שלך. לכן חשוב לבצע אופטימיזציה של הכותרות, המטא תגים והתיאור של האתר שלך.

ב-Next.js, אתה מוסיף אותם דרך רכיב הראש המותאם אישית. אתה יכול להוסיף אותם בכל הדפים באפליקציה או להתאים אותם לכל עמוד.

הוספת תג ראש גלובלי לכל דפי Next.js

Next.js מספק _app.js לאתחול דפים. אתה יכול להשתמש בו כדי ליצור מטא תגים משותפים בכל הדפים.

יְבוּא '../styles/globals.css'
יְבוּא רֹאשׁ מ 'הבא/ראש'
פוּנקצִיָהMyApp({ Component, pageProps }) {
 לַחֲזוֹר <>
<רֹאשׁ>
<מטא שם="מְחַבֵּר" תוכן="פלוני אלמוני"/>
</Head>
<רכיב {...pageProps} />
</>
}
יְצוּאבְּרִירַת מֶחדָל MyApp

אם אתה רוצה שלדף יהיו כותרת ותיאור מותאמים אישית, הוסף לו את רכיב ה-head, ו-Next.js ישתמש בו במקום ברירת המחדל ברכיב האפליקציה.

הוספת מטא תגים ותיאור לדף Next.js ספציפי

מטא תגים ותיאורים סטטיים מתאימים לדפים שהתוכן שלהם נשאר זהה, למשל, דף בית.

פתח את הקובץ /pages/index.js ושנה את תג ה-head עם הכותרת והתיאור המתאימים.

יְבוּא רֹאשׁ מ "הבא/ראש";
const





instagram viewer
 בית= () => {
לַחֲזוֹר (
<>
<רֹאשׁ>
<כותרת>בלוג</title>
<מטא שם="נקודת מבט" תוכן="קנה מידה התחלתי=1.0, רוחב=רוחב התקן" />
<מטא שם='תיאור' תוכן='מאמרי תכנות'/>
</Head>
<רָאשִׁי>
<h1>ברוכים הבאים לבלוג שלי!</h1>
</main>
</>
 );
};
יְצוּאבְּרִירַת מֶחדָל בית;

אתה ניגש לרכיב Head על ידי ייבוא ​​שלו מ- Next/head. זה עובד על ידי הוספת אלמנטים לתג head של דף HTML. בהתאם למקום שבו אתה מציב רכיב זה, המטא תגים והתיאור יהיו זמינים בכל האפליקציה או בדפים בודדים.

הוספת הכותרת, רוחב יציאת התצוגה והתיאור בקובץ _app.js מבטיחה שלכל הדפים יש את אותם מטא נתונים.

לדף זה יש תוכן סטטי, אך לפעמים, ייתכן שתרצה ליצור דפים שצורכים תוכן דינמי.

הוספת כותרת מטא דינמית ותיאורים לדף Next.js

בהתאם למקרה השימוש, אתה יכול להשתמש ב-getStaticProps(), getStaticPaths() או getServerSideProps() כדי להביא נתונים ב-Next.js. נתונים אלה קובעים את תוכן העמוד. השתמש בו כדי ליצור את המטא נתונים עבור הדף.

לדוגמה, יצירת המטא נתונים עבור יישום Next.js המציג פוסטים בבלוג תהיה מייגעת.

הדרך המומלצת היא ליצור דף דינמי שמקבל מזהה שתוכל להשתמש אליו להביא את תוכן הבלוג. לאחר מכן תוכל להשתמש בתוכן זה ברכיב head.

יְבוּא { getAllPosts, getSinglePost } מ "../../utils/mdx";
יְבוּא רֹאשׁ מ "הבא/ראש";
const פוסט = ({ כותרת, תיאור, תוכן }) => {
לַחֲזוֹר (
<>
<רֹאשׁ>
<כותרת>{כותרת}</title>
<מטא שם="תיאור" content={description} />
</Head>
<רָאשִׁי>{/* תוכן הדף */}</main>
</>
 );
};
יְצוּאconst getStaticProps = אסינכרון ({ params }) => {
// קבל פוסט בודד
const פוסט = לְהַמתִין getSinglePost (params.id, "פוסטים");
לַחֲזוֹר {
 אביזרים: { ...פוסט },
 };
};
יְצוּאconst getStaticPaths = אסינכרון () => {
// אחזר את כל הפוסטים
 const paths = getAllPosts("פוסטים").map(({ id }) => ({ params: { id } }));
לַחֲזוֹר {
 שבילים,
 לסגת: שֶׁקֶר,
 };
};
יְצוּאבְּרִירַת מֶחדָל הודעה;

הפונקציה getStaticProps מעבירה את נתוני הפוסט לרכיב הפוסט בתור אביזרים. רכיב הפוסט מפרק את הכותרת, התיאור והתוכן מהאביזרים. לאחר מכן, רכיב ה-head משתמש בכותרת ובתיאור במטא תגיות.

Next.js היא מסגרת אופטימלית

זה עתה למדת כיצד להשתמש ברכיב head כדי להוסיף מטא כותרות ותיאורים לפרויקט Next.js. השתמש בידע הזה כדי ליצור כותרות ידידותיות לקידום אתרים, לטפס במעלה ה-SERPs ולמשוך יותר מבקרים לאתר שלך.

מלבד רכיב הראש, Next.js מספק רכיבים נוספים כמו קישור ותמונה. רכיבים אלו עוברים אופטימיזציה מהקופסה, מה שמקל על יצירת אתרים מהירים ידידותיים לקידום אתרים.