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

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

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

איפור של סרטון היום

הוספת תג ראש גלובלי לכל דפי 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 ישתמש בו במקום ברירת המחדל ברכיב האפליקציה.

הוספת מטא תגים ותיאור לדף 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;

אתה ניגש לרכיב Head על ידי ייבוא שלו מ- Next/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 מעבירה את נתוני הפוסט לרכיב הפוסט בתור אביזרים. רכיב הפוסט מפרק את הכותרת, התיאור והתוכן מהאביזרים. לאחר מכן, רכיב ה-head משתמש בכותרת ובתיאור במטא תגיות.

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

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

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