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

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

Eiji Kitamura

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

סיכום

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

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

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

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

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

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

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

שימוש ב-schema.org ובמיקרו נתונים כדי לספק תקצירים מסוג rich snippet ב-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.

אימות של תקצירי תוצאות חיפוש מתקדמות (rich snippets)

כדי לאמת rich snippets ב-Google+, אפשר להשתמש בכלים כמו:

• הכלי לבדיקת הנתונים המובנים – Search Console

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

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

<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 של הדף, הם מספקים מידע על תקציר תוצאת החיפוש (rich snippet) כשמשתפים את הדף.

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

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

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

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

מידע נוסף

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

• ogp.me

אימות של תקצירי תוצאות חיפוש מתקדמות (rich snippets)

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

• כלי לניפוי באגים

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

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

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

כדי ש-Twitter Card יפעל, הדומיין שלכם צריך להיות מאושר ולהכיל מטא תג שכולל את 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

אימות של תקצירי תוצאות מתקדמים (rich snippets)

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

• מאמת הכרטיסים

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

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

<!-- 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
• התג link עם המאפיין href נמצא בשימוש ב-itemprop="image" במקום שימוש חוזר בתג meta עם property="og:image"

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