2010-4-23 下午 03-41-42.png 呼~關於Open Graph的應用真是多到寫不完,不過在掛各種Soical plugins的時候,你是否先有把網站的內容編輯好呢?做SEO,為了要提交正確的資料給搜索引擎,所以要正確的編輯meta description及keywords。同理,要把善用各種Soical plugins,你是否編輯了正確的meta呢?其中又跟"說讚"按鈕最為有關係。

為什麼要編輯Meta?

以示範站來看,這是還沒編輯Meta前的狀況:

2010-4-23 下午 03-56-38.png  

在沒有設定meta的時候,預設就是抓取<title>中的文字。而設立這些meta的用意之外,還有許多重要的資訊可以提供給Facebook,讓粉絲專頁跟網站做更緊密的結合。例如在說明文件中的示範網站IMDb:

open-graph.png 

在新版的個人頁面中,你會發現以前加過的「粉絲專頁」(現在因應Art的說法,往後統稱為FB專頁)跟以前填過的興趣都參在一起了(這也是為什麼要變成"Like"的重要原因)。而當你將滑鼠移到上方時,你會看到這個網頁有多少人"說讚"。

open-graph-profile.png

而且透過Meta的設定,讓說讚的人能夠傳到更清楚的訊息給他的朋友知道,這是哪個網站的哪篇文章。

open-graph-stream.png

最基礎Open Graph Protocol 的 Meta編輯

根據範例,我們有基礎的五項meta可供編輯:

 <meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>

1. og:title

open-graph-stream.png 

在沒有設定的情況下,預設會抓原HTML程式碼中<title>的內容

2.og:site_name

open-graph-stream.png 

3. og:type

open-graph-profile.png 

og:type可設定的完整列表:http://developers.facebook.com/docs/opengraph#extra-data

4. og:url

連結頁面的網址

5. og:image 

open-graph-profile.png 

階Open Graph Protocol 的 Meta編輯

基本上一般的網站只需要編輯前面五項meta就足夠了,然而還有許多其他可供編輯的進階項目:

1. fb:admins

設定網站的Facebook專頁管理者是誰,唯有管理者才能進入Faceboook上的平台進行管理。相關教學文章請見Facebook教學|Open Graph|fb.admin應用篇

<meta property="fb:admins" content="USER_ID1,USER_ID2"/>

加了fb.admins及og:type的meta之後,你的網站在Facebook上就也會有獨立的專頁頁面。不過這個頁面除了管理者是進不來的,管理者在這個獨立專頁上可以進行一般Facebook專頁的動作(譬如說貼連結、狀態更新),在網頁上按過讚的人,也可以與其互動。

2. fb:app_id

<meta property="fb:app_id" content="1234567"/>

fb:appid是當你設定Facebook精準行銷Facebook insights)後,可以取得的一段程式碼。將這段程式碼加在網頁上後,你遍能在Facebook精準行銷的頁面追蹤,有多少人分享了網站上的資訊,這部份等改天資訊比較豐富的時候,再來好好介紹關於精準行銷分析研究。

2010-7-15 上午 10-25-39.png 

 

3. og:descriptions

當我們按完讚的時候,通常會有留言框跑出來,而當我們在留言框留言的時候,這樣的一個動作就同等於「分享」的這個動作。而我們在打造方便分享的網頁(續)一文中便有提過,如果我們要控制轉貼文章的敘述時,我們必須設定<meta name="description" content="description " /> ,而在Open Graph Protocol中,我們則可以透過"og:description"的設定去呈現。

    <meta property="fb:admins" content="USER_ID"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>

4. 地區Meta值

現在當紅的服務,除了SNS之外,莫過於LBS服務了。雖然官方說明中並沒有很細寫為什麼要添加關於地區的Meta值,但我想或許跟Facebook未來要拓展LBS服務脫不了關係。

如果你是一個店面,你有以下這些數值可以填寫

    <meta property="og:latitude" content="37.416343"/>
<meta property="og:longitude" content="-122.153013"/>
//這兩個是Google定位服務所提供的數值
<meta property="og:street-address" content="1601 S California Ave"/>
//地址
<meta property="og:locality" content="Palo Alto"/>
// 所在城市
<meta property="og:region" content="CA"/>
//州別
<meta property="og:postal-code" content="94304"/>
//郵遞區號
<meta property="og:country-name" content="USA"/>
//國家

5. 聯絡資訊

這也很好奇,到底是填來幹嘛的,或許真的跟往後的LBS服務脫不了關係啊。2010/08/30更新:這邊的設定與最新的Facebook Places有關係唷!

    <meta property="og:email" content="me@example.com"/> //Email
<meta property="og:phone_number" content="650-123-4567"/>
//電話
<meta property="og:fax_number" content="+1-415-123-4567"/>
//傳真

以上就是針對這次Facebook所釋放出的Open Graph API,為了打造一個具有社群功能的網站,你所應該要加上的Meta值。如有錯誤歡迎指正唷!

資料來源:http://developers.facebook.com/docs/opengraph#extra-data


創作者介紹

網路行銷零元本鋪|你的網路行銷教練|邱小黑

eProMotor 發表在 痞客邦 PIXNET 留言(14) 人氣()


留言列表 (14)

發表留言
  • 秋刀魚
  • meta的編輯

    小黑這篇寫得很棒哦~ ︿︿讚~來支持一下

    今天早上我研究一下,就將meta掛上去了,
    但我覺得meta的內容編輯未來說不定會出現規則,因為meta的編輯沒限制,運用的文字將會有機會出現爭議!

    例如: http://blog.lohasbed.tw
    如果你點旁邊的讚,FB狀態就會組合出有意思的內容!

    其實我部落格也有創意式的組合。但內容可以更誇張的有創意或爭議性~只是目前還在觀察,會不會影響到SEO~
    小黑你覺得咧?META會不會可能設定規則或者會否影響SEO?
  • 秋刀魚,你這招實在很讚 = = b ,要叫Art來看一下 XD

    至於會不會影響SEO,那是一定會的啊!而且就你下的meta來說,其實算是把關鍵字也列進去了,應該也不被視為black hat~真有趣 :D

    eProMotor 於 2010/04/23 22:18 回覆

  • 趣活族 - 創意商品
  • 版大!你好!
    我查看了很多文件! (包含Facebook官方文件)
    但寫得都語意不清!

    可否請教fb:app_id 這個標籤是要用在哪裡的? 它的用途是?
    有寫文件似乎又寫fb:app_id與fb:admins 不能同時使用?

    可否請您指教!謝謝!
  • fb:appid是當你設定Facebook精準行銷(Facebook insights)後,可以取得的一段程式碼。將這段程式碼加在網頁上後,你遍能在Facebook精準行銷的頁面追蹤,有多少人分享了網站上的資訊,這部份等改天資訊比較豐富的時候,再來好好介紹關於精準行銷分析研究。

    相關討論
    http://forum.developers.facebook.com/viewtopic.php?pid=222645

    eProMotor 於 2010/07/26 16:25 回覆

  • happinex
  • 請問一下 說"讚"的語法 貼在無名BLOG是不是無效啊?
    我怎麼試都不行耶
  • 請捨棄無名吧~

    eProMotor 於 2010/07/26 16:23 回覆

  • 臺灣蝕
  • 沒錯!請捨棄無名、唾棄牠謝謝.....
  • 徐強
  • 難得有這麼專業的人才呀
  • 888
  • 抱怨一下:X!!無名爛死了!!竟然無法將讚的語法貼在無名部落格!要跳槽又有點不捨,朋友全部都在無名,文章照片等資料也全在無名...請問小黑你有沒有推薦的部落格呢?最好是能讓我將無名資料全部移轉的,以及可以用讚語法的部落格,感恩啦!!!
  • 888
  • 還有請問一下那一本書(網路集客力),看完之後就會seo詳細操作及各行銷手法?因為博客來沒有顯示目錄所以有點不清楚要不要買(窮人如我)
  • 媜媜
  • 請問一下 說"讚"的語法 如何貼在痞客幫部落格
  • wukungfu
  • 請問這個可以使用在痞克邦嗎?
  • 燕文
  • 板大安,我自己弄了個LIKE BUTTON,但是fb:admins我應該填甚麼好呢?
    我沒有填fb:admins跟fb:app_id的時候點了連結都錯誤,加上app_id就一切正常,只是我很好奇fb:admin要從哪裡取得呀...
  • 馬雅咖啡貓
  • 請問我在網頁上設定
    <meta property="og:title" content="FB TEST" /> ...等
    但卻出現警告
    Undefined attribute name (property).
    是我沒有定義好嗎
    整個設定好之後
    也沒有可以按讚,更別說是管理頁面了
    感謝賜教與解答
  • test
  • testing
  • NSR*FZR
  • 謝謝分享!
找更多相關文章與討論