הוספת סכמה (Schema) ונתונים מובנים באתרי וורדפרס

נתונים מובנים (Schema) הם תכונות HTML או סקריפטי JSON-LD שעוזרים למנועי חיפוש לפרש את תוכן העמוד ולהציגו בצורה בולטת בתוצאות החיפוש. לדוגמה, עמוד מתכון יכול להציג מרכיבים, זמן בישול וקלוריות ישירות ב-SERP.

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

מדריך זה מכסה את הרעיון מאחורי נתונים מובנים, את הפורמטים הזמינים, יתרונות SEO וכיצד להוסיף סכמת JSON-LD לאתרי וורדפרס ללא תוספים.

מהם נתונים מובנים?

ניתן לומר כי נתונים מובנים (Structured Data) הם מעין אוצר מילים המורכב מתכונות וערכים של HTML או סקריפטים המתארים בצורה תמציתית את תוכן המסמך או העמוד ואף מוסיפים פרטים מסוימים שלאו דווקא מופיעים עבור הגולש.

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

הרעיון של אוצר מילים זה, ששמו Schema.org, נוצר על ידי שיתוף פעולה בין Google, Microsoft, Yahoo & Yandex ומאז מתוחזק על ידם כמו גם על ידי חברים ב W3C כמו גם אנשים אינדיווידואלים נוספים מהקהילה.

למעשה אתם יכולים לראות ולהתבר לפעילות קהילה זו בעמוד הקהילה הפתוחה.

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

מממ.. אז מה זה בעצם כרטיסי תצוגה עשירה (Rich Snippets)?

זה מתחיל קצת לבלבל, אך אם לומר בפשטות – סכמה או Schema Markup הוא הקוד המאפשר הרבה מהפיטצ׳רים אותם אתן רואים בתוצאות החיפוש, כאשר Rich Snippets הם דוגמה בולטת של פיטצ׳רים אלו. במילים אחרות Rich Snippets במהותם הינם התוצאה של שימוש בסכמה.

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

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

פורמטי סכמה: Microdata מול JSON-LD

סכמות יכולות להיות מוגשות בשלושה אופנים: Microdata, JSON-LD ו RDFa. במדריך זה ניגע ב Microdata ו JSON-LD מכיוון ואלו הנפוצות ביותר. למעשה – כאשר נצלול לדוגמאות ונראה כיצד להוסיף Schema Markup לעמודי אתר הוורדפרס שלכם, נתמקד אך ורק ב JSON-LD.

בואו נראה את ההבדל ברמת הקוד בין Microdata ל JSON-LD עבור עסק מסוים המציג את שעות הפתיחה של העסק. לפני שנציג את ההבדלים בקוד ראו דוגמה לתוצאת חיפוש בגוגל עבור עסק זה (לאו דווקא רלוונטית לזמן כתיבת המאמר):

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

באמצעות MicroData:

<div itemscope itemtype="http://schema.org/Pharmacy">
 <h1 itemprop="name">Philippa's Pharmacy</h1>
 <p itemprop="description">
 A superb collection of fine pharmaceuticals.
 </p>
 <p>Open: 
 <span itemprop="openingHours" content="Mo,Tu,We,Th 09:00-12:00">
 Monday-Thursday 9am-noon
 </span>
 </p>
</div>

באותה מידה ניתן לעשות זאת באמצעות JSON-LD:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "Pharmacy",
 "name": "Philippa's Pharmacy",
 "description": "A superb collection of fine pharmaceuticals.",
 "openingHours": "Mo,Tu,We,Th 09:00-12:00"
}
</script>

ההחלטה באיזה פורמט להשתמש

התיעוד של גוגל ממליץ על JSON-LD כפורמט המועדף. JSON-LD קל יותר לתחזוקה מכיוון שהוא חי בתגית <script> נפרדת ולא מתערבב עם ה-HTML שלכם.

כיצד סכמה משפיעה על SEO

האם סכמה משפרת דירוגים ישירות? התשובה מורכבת. גוגל הצהירה כי נתונים מובנים אינם גורם דירוג ישיר.

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

עם זאת, סכמה עוזרת לגוגל להציג את התוכן שלכם בתוצאות עשירות, מה שיכול להגדיל משמעותית את שיעור ההקלקה (CTR). עמודים עם תוצאות עשירות יכולים לראות עלייה של 20-40% ב-CTR. הטמעה נכונה של סכמה לא תפגע בדירוגים ועשויה לשפר את הנראות וחוויית המשתמש.

סוגי סכמה נתמכים

גלריית החיפוש של גוגל מפרטת את כל סוגי הסכמה הנתמכים עם דוגמאות מימוש. ניתן גם להשתמש ב-Structured Data Markup Helper ליצירת markup בצורה ויזואלית.

הנה סוגי התוכן העיקריים שגוגל תומכת בהם:

• מאמרים – Articles
• ספרים – Books
• קורסים – Courses
• מערכי נתונים – Datasets
• אירועים – Events
• משרות – Job Posting
• עסקים מקומיים – Local Businesses
• מוזיקה – Music
• פודקאסטים – Podcasts
• מוצרים – Products
• מתכונים – Recipes
• ביקורות – Reviews
• פרקים, תוכניות טלוויזיה וסרטים – TV & Movies
• עובדות – Fact Check
• שאלות נפוצות – FAQ
• מדריכים – HowTo
• אפליקציות – Software Application
• וידאו – Video

בנוסף לסוגי תוכן אלו, גוגל גם יבדקו נתונים מובנים המשרתים שיפור בממשק המשתמש:

• פירורי לחם – BreadCrumbs
• תיבת חיפוש – Sitelinks Search Box
• מידע התקשרות – Corporate Contact Information
• לוגואים – Logos
• קישורים לפרופיל רשתות חברתיות – Social Profile Links
• קרוסלות – Carousels

הוספת סכמה לאתרי וורדפרס

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

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

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

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

הנה דוגמאות הקוד:

הוספת סכמה מסוג BlogPosting למאמרים בבלוג

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

הדרך בה אני מבצע זאת היא על ידי הוספת JSON-LD לראש העמוד בצורה הבאה:

function json_ld_article() {
	
	// Schema.org JSON for BlogPosting

	// Only on single Posts & Snippets 
	if ( is_singular( 'post') || is_singular('snippet') ) {
		
		// We need access to the post
		global $post;
		setup_postdata($post);

		// Variables
		$logo = get_template_directory_uri() . '/images/site-logo.png';
		$logo_width = 82;
		$logo_height = 60; // must be 60px and width <=600
		$excerpt = get_the_excerpt();
		$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');

		// Open script
		$html = '<script type="application/ld+json">';

		$html .= '{';
		$html .= '"@context": "http://schema.org",';
		$html .= '"@type": "BlogPosting",';


		$html .= '"mainEntityOfPage": {';
		$html .= '"@type":"WebPage",';
		$html .= '"@id": "' . get_the_permalink() . '"';
		$html .= '},';

		$html .= '"headline": "' . get_the_title() . '",';

		if ( $image )
		{
			$html .= '"image": {';
			$html .= '"@type": "ImageObject",';
			$html .= '"url": "' . $image[0] . '",';
			$html .= '"height": ' . $image[1] . ',';
			$html .= '"width": ' . $image[2];
			$html .= '},';
		}

		$html .= '"datePublished": "' . get_the_date('c') . '",';
		$html .= '"dateModified": "' . get_the_modified_date('c') . '",';

		$html .= '"author": {';
		$html .= '"@type": "Person",';
		$html .= '"name": "' . get_the_author() . '"';
		$html .= '},';

		$html .= '"publisher": {';
		$html .= '"@type": "Organization",';
		$html .= '"name": "' . get_bloginfo('name') . '",';
		$html .= '"logo": {';
		$html .= '"@type": "ImageObject",';
		$html .= '"url": "' . $logo . '",';
		$html .= '"width": ' . $logo_width . ',';
		$html .= '"height": ' . $logo_height;
		$html .= '}';
		$html .= '}';

		if ( $excerpt ) $html .= ', "description": "' . esc_attr($excerpt) . '"';
		$html .= '}';

		// Close script
		$html .= '</script>';

		echo $html;
	}
}
add_action('wp_head', 'json_ld_article');

כל סכמה משתמשת בפרמטר @type לציון הסוג שלה. הקוד משתמש בפונקציות וורדפרס סטנדרטיות כמו get_the_title(), get_permalink() ו-get_the_author() לאכלוס הסכמה באופן דינמי. התנאי is_singular() מבטיח שה-markup נטען רק בעמודים הרלוונטיים.

הוספת סכמה מסוג Person

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

function json_ld_person() {

	// Schema.org JSON for Person

	$html = '<script type="application/ld+json">';

	$html .= '{';
	$html .= '"@context": "http://schema.org",';
	$html .= '"@type": "Person",';
	$html .= '"name": "Roee Yossef",';
	$html .= '"url": "' . home_url() . '",';
	$html .= '"sameAs" : [';
	$html .= '"https://www.facebook.com/roee.yossef/",';
	$html .= '"https://x.com/RoeeYossef",';
	$html .= '"https://www.linkedin.com/in/roeeyossef/"';
	$html .= ']}';

	// Close script
	$html .= '</script>';

	echo $html;
}
add_action('wp_head', 'json_ld_person');

הוספת סכמה מסוג Organization

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

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

function json_ld_organization() {

	// Schema.org JSON for Organization

	$logo = get_template_directory_uri() . '/images/site-logo.png';
	$logo_width = 82;
	$logo_height = 60;
	// Open script
	$html = '<script type="application/ld+json">';

	$html .= '{';
	$html .= '"@context" : "http://schema.org",';
	$html .= '"@type" : "Organization",';
	$html .= '"name" : "' . get_bloginfo( 'name' ) . '",';
	$html .= '"url" : "' . home_url() . '",';
	$html .= '"logo": {';
	$html .= '"@type": "ImageObject",';
	$html .= '"url": "' . $logo . '",';
	$html .= '"width": ' . $logo_width . ',';
	$html .= '"height": ' . $logo_height;
	$html .= '},';
	$html .= '"sameAs" : [';
	$html .= '"https://www.facebook.com/savvy.wordpress/",';
	$html .= '"https://x.com/Wordpress_Savvy"';
	$html .= ']}';

	// Close script
	$html .= '</script>';

	echo $html;
}
add_action('wp_head', 'json_ld_organization');

שימו לב כי אין להטמיע סכמה מסוג Organization בכל עמודי האתר.

הוספת סכמה מסוג WebSite

זוהי סכמה מסוג WebSite המתארת את שם האתר (סאבי בלוג) כמו גם שם חלופי וכתובתו. גם סכמה זו רוחבית לאורך האתר כולו.

function json_ld_website() {

	// Schema.org JSON for WebSite

	$html = '<script type="application/ld+json">';

	$html .= '{';
	$html .= '"@context": "http://schema.org",';
	$html .= '"@type": "WebSite",';
	$html .= '"name": "' . get_bloginfo( 'name' ) . '",';
	$html .= '"alternateName": "Savvy Blog",';
	$html .= '"url": "' . home_url() . '"';
	$html .= '}';

	// Close script
	$html .= '</script>';

	echo $html;
}
add_action('wp_head', 'json_ld_website');

הוספת סכמה מסוג BreadCrumbs

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

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

function json_ld_breadcrumbs() {

	// Schema.org JSON for breadcrumbs

	if ( is_singular( 'post') || is_singular('snippet') ) {

		global $post;
		$post_terms = wp_get_object_terms($post->ID, 'taxonomy', array('fields'=>'ids'));
		$term_name = get_term( $post_terms[0], 'taxonomy') ;

		$html = '<script type="application/ld+json">';

		$html .= '{';
		$html .= '"@context": "http://schema.org",';
		$html .= '"@type": "BreadcrumbList",';
		$html .= '"itemListElement": [';
		$html .= '{';
		$html .= '"@type": "ListItem",';
		$html .= '"position": "1",';
		$html .= '"item" : {';
		$html .= '"@id" : "' . get_site_url() . '",';
		$html .= '"name": "' . get_bloginfo( 'name' ) . '"';
		$html .= '}},';
		$html .= '{';
		$html .= '"@type": "ListItem",';
		$html .= '"position": "2",';
		$html .= '"item" : {';
		$html .= '"@id" : "' . $term_name->term_id . '",';
		$html .= '"name" : "' . $term_name->name . '"';
		$html .= '}},';
		$html .= '{';
		$html .= '"@type": "ListItem",';
		$html .= '"position": "3",';
		$html .= '"item" : {';
		$html .= '"@id" : "' . get_permalink() . '",';
		$html .= '"name" : "' . get_the_title() . '"';
		$html .= '}}]}';
		// Close script
		$html .= '</script>';

		echo $html;
	}

}

add_action( 'wp_head', 'json_ld_breadcrumbs' );

מכיוון ש-Yoast מוסיף סכמה אוטומטית בהתאם להגדרות התוסף, ייתכן שתצטרכו לפלטר את פלט ה-JSON-LD שלו.

בגירסאות Yoast הנמוכות מגירסה 11.0 ניתן להסיר את הסכמה באמצעות הפילטר הבא:

function savvy_remove_yoast_json($data){
	$data = array();
	return $data;
}
add_filter('wpseo_json_ld_output', 'savvy_remove_yoast_json', 10, 1);

ועבור גירסאות Yoast הגבוהות מ 11.0 באמצעות פילטר זה:

add_filter( 'wpseo_json_ld_output', '__return_false' );

בכך סיימנו את דוגמאות הקוד. ניתן לבדוק את הסכמה באמצעות Rich Results Test או Schema Markup Validator.

שאלות נפוצות

סיכום

נתונים מובנים עוזרים למנועי חיפוש להבין את התוכן שלכם ויכולים לפתוח תוצאות עשירות שמגדילות CTR. JSON-LD הוא הפורמט המומלץ וניתן להוסיף אותו לוורדפרס באמצעות פונקציות PHP המחוברות ל-wp_head או wp_footer.

התחילו עם הבסיס – סכמת Article, Organization, BreadcrumbList ו-WebSite – ואז הרחיבו לסוגים ספציפיים כמו FAQPage, HowTo או Product לפי הצורך. השתמשו ב-Rich Results Test לוולידציה של ה-markup.

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