תגי מטא שיהפכו שיתופים מהאתר שלכם לחתיכים!

get_the_title

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

על אנחנו מדברים?

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

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

  • אהבתם? שתפו!

רגע לפני שקופצים למים

אז מה אנחנו עושים בתכלס?

  • קולטים ומכינים את המידע הנדרש לפוסט הנוכחי מוורדפרס
  • מכינים סט של תגי מטא עבור טוויטר, גוגל+ ופייסבוק
  • מצמידים את תגי המטא שלנו לwp_head (כלומר לראש המסמך)

מכינים את הפונקציה

את הפונקציה הבאה ניתן לשלב ישירות בקובץ Functions.php למרות שלדעתי עדיף להטמיע אותה בקובץ חיצוני אותו אנו כוללים אל הקובץ Functions.php בעזרת פקודת Include… באופן אישי אני אוהב שהקובץ Functions.php מסודר ונקי ככל האפשר.

ראשית ניצור את הפונקציה

שימו לב, אנו יוצרים פונקציה שתכיל את הקוד ומחברים אותה לתג wp_head

add_action('wp_head', 'add_social_metatags');
function add_social_metatags() {

}

נכלול התניה עבור פוסט / עמוד בודד

מכיוון שאנו יכולים למצוא את המידע רק עבור פוסטים / עמודים נכלול התניית "אם פוסט"

add_action('wp_head', 'add_social_metatags');
function add_social_metatags() {
	if (is_single() || is_page()) {

	}
}

נקרא ונשמור את המידע הנדרש

אנו אוספים את הכותרת, התמונה ותקציר ארוך וקצר

add_action('wp_head', 'add_social_metatags');
function add_social_metatags() {
	if (is_single() || is_page()) {

		global $post;
		
		if(get_the_post_thumbnail($post->ID, 'thumbnail')) {
			$thumbnail_id 		= get_post_thumbnail_id($post->ID);
			$thumbnail_object	= get_post($thumbnail_id);
			$image 				= $thumbnail_object->guid;
		} else {	
			$image = ''; // SET A DEFAULT IMAGE
		}
		
		$description = apply_filters('the_content', $post->post_content); ;
		$description = strip_shortcodes($description);
		$description = strip_tags($description);
		$description = preg_replace('/s{2,}/',' ', $description);
		$description = sg_cutString($description, '150');
		$description = preg_replace('/s{2,}/',' ', $description);
		$description = preg_replace("/(^[rn]*|[rn]+)[st]*[rn]+/", "n", $description);
		$shortdesc	 = sg_cutString($description, '50');	
	
	}
}

נוסיף את התגים – הפונקציה השלמה!

להלן הפונקציה המוגמרת, רק להעתיק ולהדביק וסיימת

add_action('wp_head', 'add_social_metatags');
function add_social_metatags() {
	if (is_single() || is_page()) {

		global $post;
		
		if(get_the_post_thumbnail($post->ID, 'thumbnail')) {
			$thumbnail_id 		= get_post_thumbnail_id($post->ID);
			$thumbnail_object	= get_post($thumbnail_id);
			$image 				= $thumbnail_object->guid;
		} else {	
			$image = ''; // SET A DEFAULT IMAGE
		}
		
		$description = apply_filters('the_content', $post->post_content); ;
		$description = strip_shortcodes($description);
		$description = strip_tags($description);
		$description = preg_replace('/s{2,}/',' ', $description);
		$description = sg_cutString($description, '150');
		$description = preg_replace('/s{2,}/',' ', $description);
		$description = preg_replace("/(^[rn]*|[rn]+)[st]*[rn]+/", "n", $description);
		$shortdesc	 = sg_cutString($description, '50');
		
		
		echo '
		<!--=== SCHEMA MARKUP GOOGLE PLUS ===-->
		<meta itemprop="name" content="'.get_the_title().'">
		<meta itemprop="description" content="'.$description.'">
		<meta itemprop="image" content="'.$image.'">		
		
		<!--=== FB META TAGS ===-->
		<meta property="og:title" content="'.get_the_title().'" />
		<meta property="og:type" content="article" />
		<meta property="og:image" content="'.$image.'" />
		<meta property="og:url" content="'.get_permalink().'" />
		<meta property="og:description" content="'.$description.'" />
		<meta property="og:site_name" content="'.get_bloginfo('name').'">
		
		<!--=== TWITTER META TAGS ===-->	
		<meta name="twitter:card" content="summary" />
		<meta name="twitter:site" content="@YOUR-TWITTER-USERNAME" />
		<meta name="twitter:title" content="'.get_the_title().'" />
		<meta name="twitter:description" content="'.$shortdesc.'" />
		<meta name="twitter:image" content="'.$image.'" />
		<meta name="twitter:url" content="'.get_permalink().'" />
		';	
	
	}
}

נכון שזה היה קל?

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

  • אהבתם? שתפו!