MIS 腳印

記錄 IT 學習的軌跡

讓 Facebook、Google+『推文』時,正確抓取指定資訊,例如:內容、圖片……

是否遇過「推文」分享時,所抓取的資料,總是無法依需求呈現。其實 Facebook、Google+ 是經由寫在 HTML 上的 meta data 來更精準的對應要抓取的網頁內容,且 meta 的設定方式,都共同採用 The Open Graph protocol,該協議的目地是為了打造更方便分享的網頁。


使用方式

撰寫 WordPress function 將所須的 meta data 寫入至網頁,此 function 原始來源《WordPress筆記》讓Facebook及Google+正確抓取內容及指定圖片 | 就是教不落,小傑在稍做修改和加上註解,以符合我個人的需求:

<?php
/*
 * 插入 Facebook meta(也適用 Google+、Twitter)
 */

function insert_fb_in_head() {
	// global $post 這個全域變數可以取得當前文章的這些訊息: ID、post_title、post_author、post_date、post_excerpt、comment_count 和其他......。
	global $post;

	// 預設圖片
	$defImg = get_template_directory_uri() . '/images/default250x180.png';
	
	// 判斷是否為首頁
	if ( is_home() ) {
		/*
		 * 插入 meta
		 */
		// Facebook 管理者 ID。進入 FB 個人頁面之後 http://www.facebook.com/profile.php?id=數字,數字就是(管理者 ID)
		echo "\n" . '<meta property="fb:admins" content="100000349020722" />' . "\n";
	    
	    // Facebook APP ID。需另外申請
	    // echo '<meta property="fb:app_id" content="APP_ID" />' . "\n";

	    // 類型:網站
	    echo '<meta property="og:type" content="website" />' . "\n";

	    // 網站名稱。網誌名稱
	    echo '<meta property="og:site_name" content="' . get_bloginfo( 'name' ) . '"/>' . "\n";

	    // 標題。網誌名稱 | 網誌描述
	    echo '<meta property="og:title" content="' . get_bloginfo( 'name' ) . " | " . get_bloginfo( 'description' ) . '"/>' . "\n";

	    // 網站(url)
	    echo '<meta property="og:url" content="' . get_bloginfo( 'url' ) . '" />' . "\n";

		// 圖片(url)。預設圖片
		echo '<meta property="og:image" content="' . $defImg . '" />' . "\n";

		// 描述。作者個人資料
	    echo '<meta property="og:description" content="' . get_the_author_meta( 'description', 1 ) . '"/>' . "\n";	
	}

	/*
	 * is_singular() 當前顯示的是不是一個單獨的 post 所形成的頁面。在資料庫裡,is_sigular() 也只是判斷 ID 是否存在即可。
	 */
	// 判斷是否為文章頁面,不是則不繼續
	if ( !is_singular() ) {
		return;
	}

	/*
	 * get_post_thumbnail_id() 取得文章特色圖片 ID,如果没有設定,則返回空 ""
	 */
	$id = get_post_thumbnail_id( $post->ID );

	/*
	 * wp_get_attachment_url() 取得附件的 url
	 */
	$img = wp_get_attachment_thumb_url( $id );

	/*
	 * wp_get_attachment_image_src( $attachment_id, $size, $icon ) 取得圖片的 url、width、height,以陣列形式返回结果
	 *
	 * @ 參數
	 *	● $attachment_id 需取得的附件文章 ID,必選的参数(預設值:None)
	 *	● $size 圖像的尺寸。陣列或字符串類型的值,可選的参數(預設值:thumbnail)。我們知道的 WordPress 特色圖像 string 類型的值有 thumbnail, medium, large, full(依序為最小的缩略圖、中等、大和原始尺寸)4 個值。我們也可以使用自定義圖像的大小
	 *	● $icon 替换附件的 icon 路徑,可选参数(預設值:false)
	 *
	 * @ 返回值 Array
	 *	● [0] => url
	 *	● [1] => width
	 *	● [2] => height
	 *	● [3] => boolean。true 代表原圖尺寸调整過,fasle 代表沒有圖片,或原圖沒有原始尺寸
	 */

	$img = wp_get_attachment_image_src( $id, 'image250x180' );

	// 如果沒有設定特色圖片,就使用預設圖片 url
	if ( !$img ) {
		$img[0] = $defImg;
	}

	/*
	 * 插入 meta
	 */
	// Facebook 管理者 ID。進入 FB 個人頁面之後 http://www.facebook.com/profile.php?id=數字,數字就是(管理者 ID)
	echo "\n" . '<meta property="fb:admins" content="100000349020722" />' . "\n";
    
    // Facebook APP ID。需另外申請
    // echo '<meta property="fb:app_id" content="APP_ID" />' . "\n";

    // 類型:文章
    echo '<meta property="og:type" content="article" />' . "\n";

    // 網站名稱。網誌名稱
    echo '<meta property="og:site_name" content="' . get_bloginfo( 'name' ) . '"/>' . "\n";

    // 標題。文章標題 | 網誌名稱
    echo '<meta property="og:title" content="' . get_the_title() . " | " . get_bloginfo( 'name' ) . '"/>' . "\n";

	// 連結(url)
    echo '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";

    // 圖片(url)
	echo '<meta property="og:image" content="' . $img[0] . '" />' . "\n";

	/*
	 * strip_tags(string, allow) 剝去 HTML、XML 以及 PHP 的標簽
	 *
	 * @ string 必須。規定要檢查的字符串
	 * @ allow 可選。規定允許的標簽,這些標簽不會被刪除
	 *
	 *
	 * mb_strimwidth(string $str, int $start, int $width [, string $trimmarker [, string $encoding ]]) 用来取得指定的寬度截斷字符串
	 *
	 * @ $str 指定字符串
	 * @ $start 指定字符串從何處開始截取
	 * @ $width 截取文字的寬度
	 * @ $trimmarker 超過 $width 數字後要顯示的字符串
	 * @ $encoding 參數為字符編碼。如果省略,則使用內部字符編碼
	 */

	// 描述。對「文章摘要」,設定截取字數
    echo '<meta property="og:description" content="' . mb_strimwidth( strip_tags( apply_filters( "the_content", $post->post_excerpt ) ), 0, 100, "..." ) . '"/>' . "\n";	
}

add_action( 'wp_head', 'insert_fb_in_head', 10 );

參考資料


“讓 Facebook、Google+『推文』時,正確抓取指定資訊,例如:內容、圖片……” 有 3 則迴響

  1. 頭痛很久了 說:

    您好~我在function 最下面加入語法後,按fb分享時依舊無法顯示圖文,下面為檢視畫面語法~請問大大該如何是好?謝謝

    • SmallJacky 說:

      1. 請利用 Facebook Object 看它解析後的結果與問題。
      2. 我看您的網頁原始碼發現,meta 的 og:image、og:url、og:title、og:description 都設定了三個,我猜有安裝 FB 相關的外掛。

      以上您再確認檢查一下,有問題在討論。

  2. […] 參考文章: Moz:Must-Have Social Meta Tags for Twitter, Google+, Facebook and More OXXO.STUDIO:結構化資料 SEO 與 meta 標籤 MIS腳印:讓 Facebook、Google+『推文』時,正確抓取指定資訊,例如:內容、圖片…… […]

發表迴響