האם אי פעם רצית שאתר Next.js שלך יופיע כאובייקט עשיר בעת שיתוף במדיה חברתית? אם כן, אז אתה צריך ליישם את פרוטוקול Open Graph.

חבילת next-seo מקלה על הוספת תגיות Open Graph לאתר Next.js שלך. אתה יכול גם להשתמש בגישה ידנית יותר לשליטה עדינה יותר על התוצאה המוגמרת.

לבסוף, תרצה לשקול בדיוק איזה מידע לכלול בתגים שלך.

מה זה Open Graph?

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

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

מדוע להשתמש ב-Open Graph Protocol?

ישנם שלושה תחומים עיקריים ש-Open Graph אמור לשפר: מעורבות במדיה חברתית, SEO ותעבורה לאתר.

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

instagram viewer

2. שפר את SEO

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

3. הגדל את התנועה לאתר

לבסוף, Open Graph יכול לעזור להגדיל את התנועה לאתר. על ידי הקלה על משתמשים לשתף את התוכן שלך, אתה יכול להגדיל את מספר האנשים שרואים אותו. זה, בתורו, יכול להוביל ליותר מבקרים באתר ולהגדלת התנועה.

4. שפר את חווית המשתמש

יתרון נוסף בשימוש בפרוטוקול Open Graph הוא בכך שהוא יכול לשפר את חווית המשתמש באתר שלך. על ידי הכללת מטא נתונים, אתה יכול לסייע לנגישות ולעשות שימוש חוזר בנתונים, כדי להבטיח שהמשתמשים יראו את המידע הרלוונטי ביותר. זה יכול להוביל לחוויה כללית טובה יותר באתר שלך, מה שיכול להוביל ליותר מבקרים חוזרים.

למה להשתמש ב-Next.js?

ישנן שתי סיבות עיקריות להשתמש ב-Next.js: כדי לשפר ביצועים ולהקל על הפיתוח.

1. שיפור ביצועים

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

2. הפוך את הפיתוח לקל יותר

Next.js יכול גם להקל על הפיתוח על ידי מתן דרך פשוטה לעשות זאת צור אפליקציות React שניתנו על ידי שרת. זה יכול לעשות את זה מהיר וקל יותר לפתח ולפרוס אפליקציות React.

כיצד ליישם את פרוטוקול ה-Open Graph ב-Next.js

ישנן שתי דרכים ליישם Open Graph Protocol ב-Next.js: שימוש בחבילת next-seo או יצירת התאמה אישית _document.js קוֹבֶץ.

שיטה 1: שימוש בחבילת next-seo

הדרך הקלה ביותר ליישם את Open Graph Protocol ב-Next.js היא להשתמש בחבילת next-seo. חבילה זו תיצור עבורך באופן אוטומטי את התגים הדרושים.

כדי להתקין את חבילת next-seo, הפעל את הפקודה הבאה:

npm להתקיןהַבָּא- SEO --לשמור

לאחר התקנת החבילה, תוכל להשתמש בה על ידי הוספת הקוד הבא שלך index.js קוֹבֶץ:

יְבוּא { NextSeo } מ 'next-seo';
const DemoPage = () => (
<>
<NextSeo
 כותרת="הכותרת שלך"
 תיאור="זהו תיאור הדגמה"
 קנוני="https://www.example.com"
 openGraph={{
 כתובת אתר: 'https://www.example.com',
 כותרת: 'פתח את כותרת הגרף',
 תיאור: 'פתח את תיאור הגרף',
 תמונות: [
 {
 כתובת אתר: 'https://www.example.com/og-image01.jpg',
 רוחב: 800,
 גובה: 600,
 alt: 'Og Image Alt',
 סוּג: 'תמונה/jpeg',
 },
 {
 כתובת אתר: 'https://www.example.com/og-image02.jpg',
 רוחב: 900,
 גובה: 800,
 alt: 'Og Image Alt Second',
 סוּג: 'תמונה/jpeg',
 },
 { כתובת אתר: 'https://www.example.com/og-image03.jpg' },
 { כתובת אתר: 'https://www.example.com/og-image04.jpg' },
 ],
 שם אתר: 'YourSiteName',
 }}
 טוויטר={{
 ידית: '@ידית',
 אֲתַר: '@אֲתַר',
 סוג כרטיס: 'סיכום_תמונה_גדולה',
 }}
 />
<ע>דף הדגמה</p>
</>
);
יְצוּאבְּרִירַת מֶחדָל DemoPage;

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

הפעל את הפקודה הבאה כדי להפעיל את שרת הפיתוח:

npm run dev

לִפְתוֹחַ http://localhost: 3000 בדפדפן שלך כדי לראות את דף ההדגמה.

שיטה 2: שימוש בקובץ Custom _document.js

דרך נוספת ליישם את Open Graph Protocol ב-Next.js היא ליצור התאמה אישית _document.js קוֹבֶץ. קובץ זה יאפשר לך לציין את תגיות Open Graph בעצמך ו ליצור קוד לשימוש חוזר עבור כל הדפים.

כדי להגדיר מותאם אישית _document.js קובץ, צור קובץ חדש בקובץ שלך דפים ספרייה עם התוכן הבא:

יְבוּא מסמך, { HTML, Head, Main, NextScript } מ 'הַבָּא/מסמך';
מעמדהמסמך שלימשתרעמסמך{
סטָטִיאסינכרון getInitialProps (ctx) {
const initialProps = לְהַמתִין Document.getInitialProps (ctx);
לַחֲזוֹר { ...initialProps };
 }


render() {
לַחֲזוֹר (
<HTML>
<רֹאשׁ>
<מטא מאפיין="og: כתובת אתר" תוכן="https://www.example.com" />
<מטא מאפיין="og: כותרת" תוכן="פתח את כותרת הגרף" />
<מטא מאפיין="og: תיאור" תוכן="פתח את תיאור הגרף" />
<מטא מאפיין="og: תמונה" תוכן="https://www.example.com/og-image.jpg" />
<מטא מאפיין="og: site_name" תוכן="YourSiteName" />
<מטא שם="טוויטר: כרטיס" תוכן="סיכום_תמונה_גדולה" />
<מטא שם="טוויטר: אתר" תוכן="@אֲתַר" />
<מטא שם="טוויטר: יוצר" תוכן="@ידית" />
</Head>
<גוּף>
<ראשי />
<NextScript />
</body>
</Html>
 );
 }
}
יְצוּאבְּרִירַת מֶחדָל המסמך שלי;

הוסף את התוכן שלהלן לקובץ index.js שלך:

const DemoPage = () => (
<>
<ע>דף הדגמה</p>
</>
);
יְצוּאבְּרִירַת מֶחדָל DemoPage;

קוד זה מייבא את רכיב המסמך מ-next/document ויוצר מותאם אישית המסמך שלי רְכִיב. הוא מציין את הכותרת, התיאור והתמונה עבור הדף שלנו, כמו גם את שם האתר והטיפול בטוויטר.

הפעל את הפקודה הבאה כדי להפעיל את שרת הפיתוח:

npm run dev

לִפְתוֹחַ http://localhost: 3000 בדפדפן שלך כדי לראות את דף ההדגמה.

הוספת תגיות Open Graph לאתר שלך יכולה לתת לך שליטה רבה יותר על האופן שבו הוא מופיע בפוסטים במדיה חברתית ויכולה לעזור לשפר את שיעורי הקליקים. אתה יכול גם לשפר את האופן שבו האתר שלך מופיע ב-SERPs, מה שיכול בסופו של דבר להוביל לשיפור דירוג האתר.

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