למדתי את הערך של מטא תגים בדרך המביכה לפני שנים שלחתי דף נחיתה שהייתי גאה בו, פרסמתי את הקישור בכמה מקומות, וצפיתי בו מופיע בכל מקום ככתובת URL חשופה ללא כותרת, ללא תיאור, וסמל תמונה שבור הדף עצמו היה בסדר - אבל מעולם לא הוספתי פתח גרף תגיות, אז כל פלטפורמה חברתית חזרה לנחש, וכל אחד מהם ניחש לא נכון התוכן היה טוב והצגת הקישור הייתה זבל, מה שאומר בפועל הרבה פחות קליקים ממה שהגיע לדף.
מטא תגים הם הבלוק הקטן של HTML שמחליט איך הדף שלך נראה בכל מקום מלבד בדף עצמו: ב-Google' תוצאות s, ב-Slack unpurl, בכרטיס פייסבוק או לינקדאין, בציוץ קל לטעות בהם כי יש שלושה תקנים חופפים - תגי SEO סטנדרטיים, Open Graph וכרטיסי טוויטר - וכל אחד רוצה שמות נכסים מעט שונים למה שהוא לרוב אותו מידע שאני בונה Toolz.dev ולכתוב הרבה תוכן סביבו, אז הגדרתי מטא נתונים כל הזמן, ובניתי את מחולל מטא תגים כדי לייצר בלוק תג נכון, שלם ומוכן להעתקה מסט אחד של כניסות - עם אזהרות אורך כך שלעולם לא אשלח כותרת שנקטעת שוב.
TL;DR: מטא תגים שולטים בקטע החיפוש שלך ובתצוגות המקדימות של הקישורים החברתיים שלך. אתה צריך שלושה סטים חופפים - תגי SEO סטנדרטיים, גרף פתוח עבור רוב הפלטפורמות וכרטיסי טוויטר - והם חולקים את רוב התוכן שלהם אך משתמשים בשמות תכונות שונים. ה מחולל מטא תגים בונה את שלושתם מטופס אחד, מזהיר אותך כאשר הכותרת שלך עוברת ~60 תווים או התיאור עובר ~160, בורח מהטקסט שלך בבטחה ויכול לפלוט בלוק JSON-LD תואם, הכל בדפדפן שלך.
מה הם מטא תגים ולמה הם חשובים?
מטא תגים הם אלמנטים שחיים בתוך דף 's <head> ולשאת מידע על הדף ולא על תוכן המוצג בו. ה <title> תגית וה <meta name="description"> תג הם שני הוותיקים והחשובים ביותר: יחד הם בדרך כלל יוצרים את הכותרת הניתנת ללחיצה ואת שורת הסיכום האפורה בתוצאת חיפוש בגוגל. קבל אותם נכון והתוצאה שלך נקראת היטב ומרוויחה קליקים; השאר אותם בחוץ ומנועי החיפוש מסנתזים משהו מטקסט הדף שלך, לעתים קרובות בצורה מביכה.
מעבר ליסודות האלה יושבים שני סטנדרטים חברתיים. Open Graph, במקור מפייסבוק אך כעת זוכה לכבוד על ידי LinkedIn, Slack, Discord, Pinterest, WhatsApp ועוד רבים, משתמש בתגים כמו og:title, og:description, ו og:image כדי לשלוט כיצד מופיע קישור משותף ככרטיס.Twitter Cards עושים את אותה עבודה עבור Twitter/X עם twitter: תגיות יש חפיפה כבדה - הכותרת והתיאור בדרך כלל זהים בכל השלושה - אבל כל פלטפורמה קוראת את מרחב השמות שלה, אז אתה צריך לספק את שלושתם כדי לכסות בכל מקום שהקישור שלך עשוי להיות משותף.
הסיבה שזה משנה היא מינוף אותו תוכן מקבל באופן דרמטי יותר מעורבות כאשר התצוגה המקדימה של הקישור שלו מלאה ומושכת לעומת חשופה כותרת ותיאור טובים מרימים קליקים מחיפוש; כרטיס Open Graph תקין מרים קליקים מכל שיתוף חברתי מטא תגיות הן הגדרה חד פעמית לכל עמוד שממשיכה להשתלם בכל פעם שהדף נמצא או משותף, וזה בדיוק סוג העבודה ששווה לעשות בזהירות מחולל מטא תגים קיימת כך שההגדרה היא משימת מילוי הטופס ולא משימת העתק-הדבק מהזיכרון.
איך מחולל המטא תגים בונה את התגים?
המחולל לוקח קבוצה מובנית אחת של כניסות - כותרת, תיאור, תמונה, כתובת URL, שם אתר וקומץ אפשרויות - ומאוורר אותם לשלושה בלוקים מתואמים של HTML. הבנת המאוורר מסבירה מדוע טופס אחד מייצר כל כך הרבה תגים.
מתחומי הליבה שלך הוא כותב תחילה את תגיות ראשוניות: ה <title>, המטא תיאור, ומילות מפתח אופציונליות, מחבר, רובוטים, שפה, צבע נושא וקישור קנוני. לאחר מכן הוא עושה שימוש חוזר באותה כותרת, תיאור ותמונה כדי לכתוב את פתח את בלוק הגרף עם ה og: שמות נכסים, הוספה og:type, og:url, ו og:site_name. לבסוף זה כותב את בלוק כרטיס טוויטר עם twitter: שמות, כולל סגנון הכרטיס והידית שלך ממופה ל twitter:site ו twitter:creator. מכיוון ששלושתם שואבים מאותן תשומות, הם נשארים מסונכרנים אוטומטית - אתה לא יכול לתת לפייסבוק בטעות כותר אחד ולטוויטר אחר.
שני פרטים הופכים את הפלט בטוח להדבקה ראשית, רק שדות שאתה ממלא בפועל מייצרים תגים, כך שלעולם לא נשלחים ריקים content="" תכונות שנית, כל ערך נמלט מ-HTML: ציטוט, אמפרסנד או סוגר זווית בתיאור שלך מומרים לישות שלו כך שהוא לא יכול לצאת מהתכונה ולהשחית את הסימון שלך מחולל מטא תגים כמו כן, פולט באופן אופציונלי בלוק נתונים מובנה תואם JSON-LD, שהוא דרך נפרדת אך משלימה לתאר את הדף למנועי החיפוש.
כמה זמן צריך להיות כותרת ומטא תיאור?
זו השאלה שמכשילה את רוב האנשים, והתשובה היא על רוחב התצוגה, לא על כובע תווים קשיח מנועי חיפוש מקצצים כותרות ותיאורים החורגים מהשטח שהם מקצים, כך שהגבולות המעשיים הם הנקודות שמעבר להן הטקסט שלך מתחיל להיחתך עם אליפסיס.
עבור כותרות, כוון לכ-50 עד 60 תווים. גוגל מעבד כותרות ברוחב של עד כ-600 פיקסלים, מה שמסתדר לכ-60 תווים עבור טקסט טיפוסי, ומעבר לכך הוא חותך את הסוף. עבור מטא תיאורים, כוון לכ-120 עד 160 תווים; תיאורים יכולים להגיע לכ-160 לפני חיתוך בשולחן העבודה, והנייד לפעמים קצר יותר. אף מגבלה אינה מדויקת מכיוון ששניהם נמדדים בפיקסלים, לא בתווים - כותרת מלאה באותיות רחבות נחתכת מוקדם יותר מכותרת מלאה באותיות צרות - אבל הנחיות התווים קרובות מספיק כדי לעצב מסביב.
ה מחולל מטא תגים סופר דמויות בשידור חי ומזהיר אותך כשאתה חוצה את הספים: כותרת מעל 60 או תיאור מעל 160 מסומנת כך שתוכל לקצץ אותה לפני שהיא נשלחת. זה גם דוחף אותך כאשר כותרת קצרה מאוד, כי כותרת של 20 תווים מבזבזת מקום שאתה יכול להשתמש בו עבור מילות מפתח. אלו קווים מנחים ולא כללים - כותרת מעט ארוכה היא לא קטסטרופה - אבל לראות את הספירה בזמן שאתה כותב שומר אותך כנה. אם אתה מכוון הרבה כותרות ותיאורים, ה מונה מילים שימושי עבור עותק ארוך יותר שצריך לפגוע ביעד אורך.
מה ההבדל בין תגי SEO, Open Graph וכרטיסי טוויטר?
הם משרתים צרכנים שונים, ולדעת מה זה מה שעוצר אותך מלחשוב שסיימת כאשר כיסית רק אחד. הנה איך שלושת הסטים מסתדרים לשדות שהם חולקים.
| מטרה | תגית SEO | פתח גרף | כרטיס טוויטר |
|---|---|---|---|
| כותרת העמוד | <title> |
og:title |
twitter:title |
| סיכום | meta name="description" |
og:description |
twitter:description |
| תצוגה מקדימה של תמונה | - - | og:image |
twitter:image |
| כתובת קנונית | link rel="canonical" |
og:url |
twitter:url |
| סגנון כרטיס | - - | og:type |
twitter:card |
| ייחוס | meta name="author" |
og:site_name |
twitter:site |
העמודה SEO היא מה שגוגל קוראת עבור תוצאת החיפוש העמודה Open Graph היא מה שרוב הפלטפורמות החברתיות והצ'אט קוראות עבור כרטיסי הקישור שלהן העמודה בטוויטר היא מה שטוויטר/X קורא החפיפה ברורה - כותרת ותיאור חוזרים על כל השלושה - אבל בגלל שכל פלטפורמה מסתכלת רק במרחב השמות שלה, השמטת עמודה פירושה שהפלטפורמה חוזרת לניחוש מחולל מטא תגים ממלא את כל שלושת העמודות מטופס אחד במדויק כך שלעולם לא תשאיר פלטפורמה מנחשת.
האם אני עדיין צריך נתונים מובנים של JSON-LD?
מטא תגים ונתונים מובנים עונים על שאלות שונות, כך שהשימושיים משלימים ולא מחליפים זה את זה. מטא תגים מספרים לפלטפורמות כיצד להציג את הדף שלך; JSON-LD מספר למנועי החיפוש על מה הדף שלך בצורה קריא מכונה שיכולה לפתוח תוצאות עשירות.
JSON-LD הוא בלוק של JSON, עטוף ב-a <script type="application/ld+json"> תג, שמתאר את הדף שלך כישות מוקלדת - אתר אינטרנט, מאמר, מוצר, מתכון וכן הלאה - עם מאפיינים בעלי שם מנועי חיפוש משתמשים בו כדי להבין מערכות יחסים, ובמקרים הנכונים, כדי להציג תוצאות משופרות כמו שורות בתים של מאמרים, דירוגי כוכבים או אקורדיונים של שאלות נפוצות ישירות בחיפוש. זה לא שולט בקטע שלך כמו הכותרת והתיאור; זה מוסיף שכבה של משמעות למעלה.
ה מחולל מטא תגים פולט בלוק JSON-LD מתחיל לצד תגי המטא, המוקלד כאתר אינטרנט או מאמר המבוסס על סוג ה-Open Graph שלך ומאוכלס מאותם שדות. זהו בסיס איתן שאתה יכול להרחיב עם מאפיינים ספציפיים לסוג. כדאי להוסיף נתונים מובנים בכל פעם שאתה רוצה להיות זכאי לתוצאות עשירות, למרות שזה לא מנוף דירוג קסם - הוא מאפשר תכונות, הוא לא מאלץ אותן לתמונה הרחבה יותר של האופן שבו החלקים האלה משתלבים זה בזה, ה ערכת כלים למפתחי אינטרנט roundup מכסה את הכלים שמסביב בהם אני משתמש.
מקרי שימוש נפוצים עבור מחולל מטא תגים
השקת דף או אתר חדש
הברור מאליו כל עמוד חדש צריך כותרת, תיאור וכרטיס חברתי, והקלדת הסט המלא של תגי SEO, Open Graph וטוויטר ביד היא מייגעת ונוטה לשגיאות מילוי הטופס פעם אחת והעתקת בלוק שלם ונכון הופך משימה מטופשת לשלושים ושתיים, ואזהרות האורך אומרות שהדף מושק עם קטע שמוצג במלואו במקום לקצץ ביום הראשון.
תיקון תצוגות מקדימות של קישורים גרועים או חסרים
כאשר מופיע קישור משותף ללא תמונה או טקסט שגוי, הסיבה כמעט תמיד חסרה או פגומה בתגיות Open Graph. בנייה מחדש של התגים עם המחולל - לוודא og:image, og:title, ו og:description כולם נוכחים ונכונים - מתקן את התצוגה המקדימה. לאחר עדכון, הפלטפורמה הרלוונטית ' לפעמים יש לרענן את המטמון באמצעות כלי ניפוי הבאגים שלו, אבל התגים עצמם יוצאים כמו שצריך.
סטנדרטיזציה של מטא נתונים על פני צוות
בפרויקט עם מספר תורמים, מטא תגים נסחפים: בעמוד אחד יש תגי טוויטר, בעמוד אחר אין, בשלישי יש תיאור כפול מהאורך המומלץ. שימוש במחולל יחיד כהתייחסות לאיך נראה ערכת תגים שלמה גורם לכולם לייצר את אותה צורה של מטא נתונים. הפלט משמש כתיעוד של בדיוק אילו תגים הפרויקט מצפה.
הכנת מטא נתונים למסגרת
ב-Next.js, Nuxt, React, או דומה, אתה לא מדביק גלם <meta> תגיות - אתה מזין ערכים לתוך ראש או מטא נתונים API. המחולל עדיין שימושי כמקור האמת עבור אילו תגיות וערכים אתה צריך: מלא את הטופס, קרא את הסט המלא ותרגם אותו למסגרת שלך & #39;s אובייקט מטא נתונים זה מסיר את הניחוש לגבי איזה og: ו twitter: שדות לכלול.
למה ליצור מטא תגים בדפדפן?
ה מחולל מטא תגים פועל לחלוטין בצד הלקוח הכותרות, התיאורים, כתובות האתרים וקישורי התמונות שאתה מזין נשארים בדפדפן שלך ולעולם לא מועלים, והכלי עובד במצב לא מקוון לאחר הטעינה. שהפרטיות חשובה מכיוון שלעתים קרובות אתה מכין מטא נתונים עבור דפים שעדיין אינם ציבוריים - מוצר שלא פורסם, מסע פרסום של client's draft, כלי פנימי. הדבקת זה במחולל בצד השרת פירושה מסירת התוכניות הבלתי מוקדמות שלך למישהו אחר 's יומנים; לעשות את זה בדפדפן פירושו שהוא לעולם לא עוזב את המחשב שלך פרטיות נתונים בכלים מקוונים מדריך מסביר מדוע אני מתייחס לזה כבלתי ניתן למשא ומתן.
עבודת מטא נתונים מתחברת גם לכמה משימות שכנות. ה מְרַגֵל בונה את כתובת האתר הנקייה שהקנונית שלך ו og:url תגיות point to. The מקודד ישויות HTML שימושי כאשר אתה צריך לברוח ביד דמות עקשנית. וה מקודד/מפענח כתובת URL מטפל בקידוד עבור פרמטרי השאילתה שלעתים תולים כתובת URL קנונית. יחד הם מכסים את העבודות הקטנות והמדויקות שמקיפות משלוח דף בצורה נכונה.
שָׁוא
אילו מטא תגים יוצר המחולל?
הוא יוצר את תגיות ה-SEO הסטנדרטיות - כותרת, תיאור, מילות מפתח, מחבר, רובוטים, שפה, צבע נושא וקנוני - בתוספת תגיות Open Graph כגון og: title, og:description, og:image ו-og:url, והתאמת תגיות כרטיס טוויטר זה יכול גם לפלוט בלוק נתונים מובנה של JSON-LD רק השדות שאתה ממלא מייצרים תגיות, כך שהפלט נשאר נקי.
כמה זמן צריכים להיות הכותרת והמטא תיאור שלי?
כוון לכותרת של כ-50 עד 60 תווים ותיאור של כ-120 עד 160 תווים גוגל מקצץ טקסט מעבר לנקודות האלה כי הוא מודד רוחב בפיקסלים, לא תווים מדויקים המחולל נחשב כפי שאתה מקליד ומזהיר אותך כאשר כותרת או תיאור צפויים להיות מנותקים בתוצאות החיפוש.
מהם תגי גרף פתוחים והאם אני צריך אותם?
תגיות Open Graph שולטות כיצד הדף שלך נראה כאשר הוא משותף בפייסבוק, לינקדאין, Slack, Discord ופלטפורמות רבות אחרות בלעדיהם קישור משותף עשוי לא להציג תמונה או טקסט מביך לחזרה אם אתה רוצה תצוגות מקדימות אטרקטיביות וניתנות לחיזוי בכל מקום שבו התוכן שלך משותף, תגי Open Graph מומלצים בחום והמחולל בונה אותם עבורך.
מה ההבדל בין שני סוגי כרטיסי הטוויטר?
כרטיס הסיכום מציג תמונה ממוזערת מרובעת קטנה לצד הכותרת והתיאור, בעוד שתמונת סיכום_גדול_ מציגה תמונת באנר גדולה מעליהם השתמש בכרטיס התמונה הגדולה כאשר יש לך תמונת שיתוף רחבה ואיכותית שברצונך לשלוט בתצוגה המקדימה, והשתמש בסיכום עבור כרטיס קומפקטי יותר המחולל מאפשר לך לעבור ביניהם וכותב את הערך הנכון של טוויטר: כרטיס.
איפה אני שם את המטא תגים שנוצרו?
הדבק את הבלוק בתוך רכיב הראש של דף ה-HTML שלך, באופן אידיאלי ליד החלק העליון לפני סקריפטים אחרים. במסגרת כמו Next.js, React או Vue, הוסף את התגים המקבילים דרך ה-framework's head או metadata API תוך שימוש ב-HTML שנוצר כהתייחסות שלך בדיוק לאילו תגים וערכים לכלול.
האם אני עדיין צריך כתובת URL קנונית אם יש לי תגי גרף פתוחים?
כן הקישור הקנוני אומר למנועי חיפוש איזו כתובת URL היא הגרסה הסמכותית של דף כדי למנוע בעיות תוכן כפול, בעוד og:url מגדיר את כתובת האתר המשמשת בתצוגות מקדימות חברתיות. הם משרתים מטרות שונות למרות שהערכים בדרך כלל זהים, כך שהגדרת שניהם היא תרגול טוב.
האם מחולל המטא תגים בחינם ופרטי?
כן. זה לגמרי בחינם ללא מגבלות, וכל תג בנוי ב-JavaScript בתוך הדפדפן שלך. הטקסט, כתובות האתרים וקישורי התמונה שאתה מזין לעולם לא נשלחים לשרת, כך שתוכל להכין בבטחה מטא נתונים עבור דפים שלא פורסמו או פנימיים.
האם הוספת מטא תגים משפרת את דירוג החיפוש שלי?
מטא תגים עוזרים למנועי חיפוש ולפלטפורמות חברתיות להציג את הדף שלך בצורה נכונה, אבל הם גורם אחד מני רבים כותרת ותיאור חזקים יכולים להעלות את שיעור הקליקים, ונתונים מובנים יכולים לאפשר תוצאות עשירות, אך עם זאת איכות התוכן, הקישורים ובריאות האתר עדיין מניעים דירוגים התייחסו למטא תגים טובים כאל עבודת יסוד הכרחית ולא כקיצור דרך לדירוג.
