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

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

Eiji Kitamura

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

סיכום

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

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

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

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

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

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

שימוש ב-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. מאפיינים ותוכן יכולים לקבל את הערכים הבאים:

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

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

מידע נוסף

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

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

כדי לאמת את הסימון שלך ב-Facebook, ניתן להשתמש בכלים כמו:

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

כרטיסי Twitter הם תוסף לפרוטוקול התרשים הפתוח ל-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.

מידע נוסף

למידע נוסף על כרטיסי Twitter, בקר בכתובת:

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

כדי לאמת את תגי העיצוב, 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"

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