אתם יכולים להשפיע על האופן שבו האתר שלכם יוצג כשאנשים ישתפו אותו דרך הרשתות החברתיות, על ידי הוספת כמה שורות קוד לכל דף. כך תוכלו למשוך יותר אנשים לאתר שלכם על ידי הצגת קטעים מקדימים עם מידע עשיר יותר ממה שזמין בדרך אחרת.
אם מוסיפים כמה שורות קוד לכל דף, אפשר להשפיע על האופן שבו האתר ייראה כשתשתפו אותו ברשתות החברתיות. כך תוכלו למשוך יותר אנשים לאתר שלכם על ידי הצגת קטעים מקדימים עם מידע עשיר יותר ממה שזמין בדרך אחרת.
סיכום
- משתמשים במיקרו-נתונים של 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
.
המאפיינים והתכנים יכולים לקבל את הערכים הבאים:
נכס | תוכן |
---|---|
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 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"
לבסוף, לפני הפרסום, חשוב לוודא שדף האינטרנט מופיע כצפוי בכל רשת חברתית.