תגיות Open Graph לאתר: איך הקישור שלכם נראה בשיתוף

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

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

מה עושות תגיות Open Graph לאתר?

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

איפה התגיות יושבות בקוד?

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

האם רק פייסבוק משתמש בהן?

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

מה קורה כשאין תגיות Open Graph?

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

איך נראה ניחוש שהשתבש?

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

האם מערכת ניהול התוכן מוסיפה תגיות לבד?

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

אילו תגיות Open Graph הן חובה?

ארבע: og:title, og:type, og:image ו-og:url. כך כתוב בפרוטוקול עצמו, שמגדיר אותן כמאפיינים הנדרשים לכל עמוד. כשבונים תגיות Open Graph לאתר עסקי, אלה ארבע השורות שכל עמוד חייב לקבל, ועליהן מוסיפים את התיאור, שם האתר והשפה.

מה כל אחת מהן אומרת?

og:title היא הכותרת שתופיע בשיתוף. og:type הוא סוג האובייקט, למשל website לעמוד רגיל או article למאמר. og:image היא כתובת התמונה. og:url היא הכתובת הקנונית של העמוד, שלפי הפרוטוקול משמשת כמזהה הקבוע שלו.

אילו תגיות רשות כדאי להוסיף?

og:description לתיאור קצר, og:site_name לשם האתר, og:locale לשפה, ו-og:image:alt לתיאור התמונה. הפרוטוקול קובע שעמוד שמגדיר og:image צריך להגדיר גם og:image:alt, שמתאר מה יש בתמונה ולא כיתוב לה.

איך כותבים כותרת ותיאור לשיתוף?

כותרת בלי שם האתר, ותיאור קצר שאומר מה הקורא יקבל. המדריך של מטא ממליץ ש-og:title תהיה הכותרת בלי מיתוג כמו שם האתר, ומתאר את og:description כתיאור קצר, בדרך כלל שניים עד ארבעה משפטים, שמופיע מתחת לכותרת. הפרוטוקול עצמו מדבר על משפט או שניים, ולכן תיאור של משפט או שניים עונה על שתי ההגדרות.

האם הכותרת לשיתוף צריכה להיות זהה לכותרת בגוגל?

לא חייבת. הכותרת בתג title נכתבת למי שסורק תוצאות חיפוש, והכותרת לשיתוף נכתבת למי שגולל פיד או צ'אט. לרוב נוח להתחיל מאותו נוסח ולקצר. על כתיבת הכותרת והתיאור לגוגל פירטנו במדריך לכותרת ולתיאור מטא.

מה עושים בעמוד שירות?

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

איזו תמונה לבחור ל-og:image?

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

למה לא לשים טקסט על התמונה?

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

האם כל עמוד צריך תמונה משלו?

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

למה התמונה הישנה ממשיכה להופיע אחרי שהחלפתם אותה?

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

איך נותנים לתמונה כתובת חדשה?

משנים את שם הקובץ, או מוסיפים לכתובת מחרוזת גרסה כמו ?v=2, ומעדכנים את og:image בהתאם. זה אותו עיקרון שבו משתמשים בקובצי עיצוב כדי לעקוף מטמון.

ומה לגבי כותרת ותיאור שהשתנו?

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

איך בודקים את תגיות Open Graph לפני ששולחים קישור?

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

מה בודקים בתוצאה?

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

איך בודקים בוואטסאפ?

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

איך og:url קשורה לכתובת הקנונית?

og:url צריכה להיות אותה כתובת קנונית שמופיעה בתג canonical של העמוד. המדריך של מטא מתאר אותה ככתובת נקייה, בלי משתני סשן, בלי פרמטרים שמזהים משתמש ובלי מונים, וכותב שלייקים ושיתופים של הכתובת הזו מצטברים בה. כשכל גרסה של העמוד מצביעה לאותה כתובת, השיתופים לא מתפזרים.

מה קורה עם קישור שיש בו פרמטרי מעקב?

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

למה כתובת קצרה וברורה עוזרת גם כאן?

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

מה חשוב בתגיות לאתר בעברית?

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

מה עם אתר בשתי שפות?

כל גרסת שפה מקבלת og:locale משלה, ואפשר לציין את השפות האחרות עם og:locale:alternate. הכותרת והתיאור נכתבים בשפה של אותו עמוד, לא מתורגמים אוטומטית.

איך נראים גרשיים בתגית?

בתוך מאפיין HTML כדאי לכתוב ראשי תיבות עם הסימן העברי ״ ולא עם מירכאות רגילות, כי מירכאות רגילות סוגרות את המאפיין באמצע וקוטעות את הכותרת.

האם תגיות Open Graph מחליפות סכמה?

לא. התגיות האלה מתארות איך העמוד ייראה כשמשתפים אותו, והסכמה מתארת לגוגל מה יש בעמוד ומי העסק. הן עושות עבודה שונה, ועמוד טוב צריך את שתיהן. דוגמה טובה היא שם האתר: לפי ההסבר של גוגל על שמות אתרים, המערכת של גוגל מתחשבת גם בתוכן של og:site_name, בתג title ובכותרות בעמוד הבית, אבל כשרוצים לציין העדפה, הנתונים המובנים מסוג WebSite בעמוד הבית הם החשובים ביותר. על סכמה לעסק מקומי פירטנו במדריך לסכמה של עסק מקומי.

האם צריך גם תגיות של רשתות אחרות?

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

מה עושים כשמעדכנים מאמר ישן?

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

מי מגדיר את התגיות כשבונים אתר?

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

מה לבדוק באתר קיים?

שתפו לעצמכם חמישה עמודים שונים: עמוד הבית, עמוד שירות, מאמר, עמוד יצירת קשר ועמוד מוצר אם יש. אם כולם נראים אותו דבר, או שאחד מהם מציג תמונה לא קשורה, התגיות צריכות עבודה.

איך זה מתחבר לשיתוף בוואטסאפ מהאתר?

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

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

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

שאלות נפוצות על תגיות Open Graph לאתר