גילוי ברשתות חברתיות

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

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

סיכום

  • משתמשים במיקרו-נתונים של schema.org כדי לספק שם, תיאור ותמונה של הדף ב-Google+.
  • משתמשים בפרוטוקול Open Graph ‏(OGP) כדי לספק ל-Facebook את שם הדף, התיאור והתמונה שלו.
  • משתמשים בכרטיסי Twitter כדי לספק ל-Twitter את שם הדף, התיאור, התמונה ומזהה Twitter.

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

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

עם הרכיבים המתאימים של ה-Markup: השם הנכון, תיאור קצר ותמונה. הוספת הפריטים האלה יכולה לעזור להגביר את ההתעניינות.
עם הרכיבים המתאימים: השם הנכון, תיאור קצר ותמונה. הוספת הפריטים האלה יכולה לעזור להגביר את ההתעניינות.
בלי ה-Markup המתאים, רק כותרת הדף נכללת.
ללא ה-mark up המתאים, רק כותרת הדף נכללת.

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

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

שימוש ב-schema.org + מיקרו-נתונים כדי לספק קטעי מידע מפורטים ב-Google+

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

לדוגמה:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

רוב המטא-נתונים מוטמעים בקטע head של דף אינטרנט, אבל המיקרו נתונים נמצאים במקום שבו ההקשר קיים.

צריך להוסיף את itemscope כדי להגדיר היקף מיקרו נתונים

הוספת itemscope מאפשרת לציין את התג כבלוק תוכן לגבי פריט מסוים.

כדי להגדיר את סוג האתר, צריך להוסיף itemtype

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

צריך להוסיף itemprop כדי לתאר כל פריט באמצעות אוצר המילים של schema.org

itemprop מגדיר מאפיינים ל-itemtype בהיקף. כדי לספק מטא-נתונים לאתרים של רשתות חברתיות, הערכים האופייניים של itemprop הם name, description ו-image.

אימות קטעי מידע עשירים

כדי לאמת קטעי קוד עשירים ב-Google+, אפשר להשתמש בכלים כמו:

כלי בדיקת הנתונים המובנים

שימוש בפרוטוקול Open Graph (OGP) כדי לספק נכסי קוד מידע עשירים ב-Facebook

פרוטוקול Open Graph (OGP) מספק ל-Facebook את המטא-נתונים הדרושים כדי לאפשר לדפי אינטרנט את אותה פונקציונליות כמו אובייקטים אחרים ב-Facebook.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

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

שימוש בתגים meta ממרחב השמות og: כדי לתאר מטא-נתונים

תג meta מורכב ממאפיין property וממאפיין content. המאפיינים והתכנים יכולים לקבל את הערכים הבאים:

נכס תוכן
og:title כותרת דף האינטרנט.
og:description התיאור של דף האינטרנט.
og:url כתובת ה-URL הקנונית של דף האינטרנט.
og:image כתובת ה-URL של תמונה שמצורפת לפרסום המשותף.
og:type מחרוזת שמציינת את סוג דף האינטרנט. כאן תוכלו למצוא קול שמתאים לדף האינטרנט שלכם.

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

מידע נוסף

באתר הרשמי של Open Graph Protocol תוכלו למצוא מידע נוסף על הפריטים שאפשר לצרף לפרסום ב-Facebook.

אימות קטעי rich snippet

כדי לאמת את ה-Markup ב-Facebook, אפשר להשתמש בכלים כמו:

שימוש בכרטיסי Twitter כדי לספק קטעי טקסט מעשירים ב-Twitter

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

שימוש במטא תגים במרחב השמות twitter: כדי לתאר מטא-נתונים

כדי להציג כרטיס Twitter, הדומיין צריך לקבל אישור ולכלול מטא תג עם twitter:card כערך של המאפיין name במקום המאפיין property.

הנה דוגמה מהירה:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

על ידי הקצאת מזהה Twitter לערך של twitter:site, טוויטר מטמיע את המידע הזה בפוסט המשותף כדי שאנשים יוכלו ליצור קשר בקלות עם בעל הדף.

כרטיס Twitter.

מידע נוסף

מידע נוסף על Twitter Cards זמין בכתובות הבאות:

אימות קטעי מידע עשירים

כדי לאמת את תגי העיצוב, Twitter מספקת:

השיטה המומלצת

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

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

שימו לב שמיקרו נתונים ו-OGP חולקים תגי עיצוב מסוימים:

  • itemscope נמצא בתג head
  • השדות title ו-description משותפים בין מיקרו-נתונים לבין OGP
  • itemprop="image" משתמש בתג link עם המאפיין href במקום להשתמש שוב בתג meta עם property="og:image"

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