2010年4月5日 星期一

Facebook摘文與 meta content的關係


2010.11.3更新,因為Facebook一直改版,且和Google衝突,目前這個方法失效,頭很痛。

這個問題困擾綸太郎很久了,為什麼每次將自己的文章貼上Facebook後,截取的文章內容永遠是"分享在Google Blogger設立部落格的心得及技巧教學",今天終於獲得解答,可能有朋友已經知道為什麼,但是綸太郎自己比較及實驗過後,發現了答案,覺得很高興,跟大家分享。


問題就是出現在我的Blogger在head區有設meta content/description,如以下語法,
<meta content='分享在Google Blogger設立部落格的心得及技巧教學' name='description'/>
可參考Blogger template模板教學課程---概說及基本結構這篇文章,這是用來告訴搜尋引擎這個網站內容為何及做什麼用的,關於部落格的描述,或許很多朋友不清楚這些meta的用法,所以沒有這個問題。

所以推測在Facebook貼網址連結時,他會擷取文章片段,應該是以meta content/description為第一順位,沒有的話才會擷取文章最前面的文字區段。

所以解決方法就是將這段語法刪除,這樣就不必每次都要去改文章內容了,省事許多。



之前網友冷言也有告訴我這個資訊,可是當時我似懂非懂,現在才知道他在說些什麼。
blogger的meta-description,會附加於每一頁,對facebook分享來說,實在是很大影響。facebook會提取meta資料作分享內容,但meta就會令每一頁都只會出現同一篇網頁描述。
利用Abin's Tech Note的讓側邊列(Sidebar) 的元件只在首頁顯示/不顯示,就可以令meta只在首頁出現,這樣做也有助優化SEO。
這是我小小的分享,希望對各位有所幫助。

所以如果我要讓搜尋引擎知道部落格內容又要在Facebook上貼連結時要出現該篇的簡短內容,就要在語法前後加上兩段敘述,如下,
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='分享在Google Blogger設立部落格的心得及技巧教學' name='description'/>
</b:if>

只讓meta敘述出現在首頁,單篇文章是消失的,這樣就能兩全齊美了,應該就是這樣,大家可以試看看,有問題再來研究,也謝謝冷言網友的說明。

延伸閱讀:
讓側邊列 (Sidebar) 的元件只在首頁顯示/不顯示

37 則留言:

  1. 謝謝分享。

    我之前也是遇到這樣的問題,所以把meta content整個拿掉了。加上你的方法就能讓meta敘述只出現在首頁囉!

    tzuche

    回覆刪除
  2. 大大有興趣的話,不妨參考小弟這篇文章
    打造方便分享的網頁(續)

    或是官方說明
    Facebook Developers:Facebook Share/Specifying Meta Tags


    裡面有詳述Facebook是怎麼抓取的~

    回覆刪除
  3. 我的情況跟你一樣,不過我不用連結來po文,我是直接用RSS餵BLOGGER的文章給facebook,這樣就能出現每篇文章的內文,為何你要用手動的呢?

    回覆刪除
  4. 本來我也是用RSS,但是更新速度太慢,乾脆自己手動囉。

    回覆刪除
  5. 多勞綸太郎寫一篇教學出來,令更多blogger知道,方便facebook分享甚至是yahoo、google等搜尋工具,令讀者知道網頁內容。
    我也是無意中發覺這方法,幫到大家就好了。

    回覆刪除
  6. To 冷言,有網友一起發現問題,並願意分享解決問題,是很棒的。

    回覆刪除
  7. 綸太郎:

    我Blogger : http://johnsonbetty.blogspot.com
    我發現我要分享到Facebook時
    有寫文章可以顯示文章內容(像最近我寫的標題有好呷的)
    有些文章就不行(就只顯示文章網址)
    不知問題出在哪裡
    可否幫我看看,3Q~~ ^^

    回覆刪除
  8. 我試了一下,好像是文章第一個字不是文字就會這樣,利如數字及標點符號。

    回覆刪除
  9. 綸太郎:

    我弄了一篇簡短的測試文章
    但似乎還是無法在Facebook顯示文章內容說
    能否幫我看看
    不知有無解決辦法 ><"

    回覆刪除
  10. 你要不要試看看這篇文章寫的方式,因為我看你的程式碼沒有這三行敘述,符號和數字不能顯示,是否就儘量選擇少用這兩種,我只能想到這樣。

    回覆刪除
  11. 我遇到個麻煩的問題,就是我的網誌在單篇文章的網址貼上Facebook轉貼連結上面,可是完全沒有摘文,連標題都沒有~
    我試了很多次,還是不知道問題出在哪裡......

    這個問題的擷圖:
    http://yuan817.blogspot.com/2010/07/facebookblogger.html

    回覆刪除
  12. 你要不要試著將java script語法放到比較後面,不要放在一開始的地方,其實facebook的share內容常常變更,常常捉到的東西都不一樣,我的經驗是這樣。

    回覆刪除
  13. 我現在還在處理這個問題,到現在還是搞不定!你說的把JavaScript放在後面一點的,我也試過了......沒用~

    我發現刪掉幾個網頁元素之後,Facebook摘文好像又可以開始使用~
    不過我在想是因為網頁元素太多,還是是某個小工具出的問題?
    (我先暫時恢復成還沒處裡的樣子)

    另外我還想問一下,我最近是在Blogger每改一次,就用Facebook轉貼連結測試摘文一次,如果一直在Facebook轉貼連結同一個網頁,Facebook會不會使用儲存快取而導致測試不準確?

    回覆刪除
  14. 元兒~,你的問題我有看到也有核准,但是不知為何網頁沒有顯示。
    以下是你的問題:
    ================================================
    我現在還在處理這個問題,到現在還是搞不定!你說的把JavaScript放在後面一點的,我也試過了......沒用~

    我發現刪掉幾個網頁元素之後,Facebook摘文好像又可以開始使用~
    不過我在想是因為網頁元素太多,還是是某個小工具出的問題?
    (我先暫時恢復成還沒處裡的樣子)

    另外我還想問一下,我最近是在Blogger每改一次,就用Facebook轉貼連結測試摘文一次,如果一直在Facebook轉貼連結同一個網頁,Facebook會不會使用儲存快取而導致測試不準確?
    ====================================
    這個我就不清楚,前則我有提到他一直不穩定,抓到的東西都常變更。

    回覆刪除
  15. 好吧!我自已在研究看看~另外我有加入Facebook的「讚」按鈕,不過我按下去後出現錯誤,錯誤訊息:「The page at http://yuan817.blogspot.com/2010/07/blog-post_02.html could not be reached.」我猜測會不會和Facebook摘文有關連......
    有部分單篇內容可以正常摘文,有顯示文章標題,但卻多出「#navbar-iframe { display:block }...」字樣,我查過我是有擺「#navbar-iframe」,但原始碼卻找不到「{ display:block }」有夠詭異......

    回覆刪除
  16. 你用了幾個小工具?(包含標題、文章、右側工具)
    我剛剛發現如果網頁元素用太多,Facebook摘文好像就會出我上次一開始問你的這個問題喔!!

    回覆刪除
  17. #navbar-iframe { display:block }
    我測試好像是第一次裝分頁,fb推薦會出現這段文字,如果把它拿掉後,再跑一次頁面,然後再裝回去就沒顯示了,你要不要試看看。
    另外就是只有最近一篇會出現,其他篇我試貼都正常。

    我有18個小工具,其實目前測試你只有第一篇會這樣,其他都很正常,比我的好太多。

    回覆刪除
  18. 我是已經移除好幾個小工具,才會有很多篇變正常,但如果我再加一個小工具,就有一堆篇又不行了~!

    回覆刪除
  19. 看樣子這個問題是無解阿~~~

    我忘記我昨天有沒有在你的這篇網誌留言補充,我要先修正我昨天的說法,並不是網頁元素的數量來決定Facebook摘文狀況,而是網頁的複雜度!昨天我把所有的外掛合併成一個小工具還是沒用......

    根據Justin Chen
    在我的哀嚎文章的留言:
    http://yuan817.blogspot.com/2010/07/facebookblogger.html
    「似乎就跟falkore說的一樣了:"IT seems around the 4/22 facebook implemented a timeout of 5 seconds on the query to get the meta data for the summary title and image." 」

    如果網頁載入時間過長,Facebook就不能正常摘文,華麗和Facebook看樣子不能兩全其美阿......看樣子是無解,除非Facebook修正這個問題~煩......

    回覆刪除
  20. 綸太郎:

    我BLOGGER 接SHARE只能顯示標題和連結。

    試了你的方法仍是這樣,所以維持原本的樣子。

    請問你可唔可給我看看。

    我BLOGGER: http://writtenbyaries.blogspot.com/

    回覆刪除
  21. 這是適合舊版的語法,如果新版就什麼都不要動,維持原狀即可,我自己猜想是因為新網站在網路資料的建檔較少,所以資料庫抓不到內容,網路上有很多人發生這種情形,你可以參考這篇 http://bit.ly/aawR3f
    只是提供的方法我覺得還是沒法解決根本問題。

    回覆刪除
  22. 板主你好…我也有類似的問題,但我的摘文卻是一大段html碼(有點像是blogger內原始碼但卻又不規則),也試過用你上列方法,但沒效~~ 歡迎你到站測試,爬了許多文,還是找不出原因…!!

    回覆刪除
  23. 我測試的是沒有問題,例如蘇澳冷泉這篇 http://www.jijiong.net/2010/09/blog-post_27.html 但是你的文章標題連結,從小小環化這一篇到最新的,都變成很奇怪的連結,不知是否是這個原因。
    http://connect.garmin.com/page/activity/activity.fac....

    回覆刪除
  24. 綸太郎您好:
    上次謝謝您熱血的幫忙,小弟才解決一個Blogger的難題:)
    (所以翰仔把您的連結加在翰仔的推薦網站連結中^^)
    這次,難題又來了…

    我遇到的狀況,和上頭24樓的仁兄有像…
    (有可能是在裝某些小元件時,改到什麼了…)

    以前是FB分享或是Google自動抓文時,會自動去抓「第一篇留言」的內容…
    如果還沒有人留言,才會抓文章的前幾句話…(有時又正常,所以還可以接受…)

    但是,最近的狀況,是按下FB的分享後,會出現一堆語法…如下…

    '); if (r '); } } //]]> // var CommentIndex = 0, CommentPostID = ''; function ShowCommentIndex(PostID) { if (CommentPostID != PostID) { CommentIndex = 0; CommentPostID = PostID; } document.write(++CommentIndex); } //]]> function ElementToggle(id) { var element = document.getElementById(id).getElementsByTagName('div'); for(i = 0; i < element.length; i++) { attribute = element[i].getAttribute('id'); if(attribute == 'toggle') { if (element[i].style.display == 'none') element[i].style.display = 'inline'; else element[i].style.display = 'none'; } } } var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1998650-16']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); if (window.jstiming) window.jstiming.load.tick('headEnd');



    我試過了您本篇文章的修改Meta的方法,結果還是無效,
    請問您有什麼好建議嗎?^^

    回覆刪除
  25. 我研究看看,有網友曾說是轉址造成一些元件的錯誤,你先更改java script的位置,例如將analystic的程式碼放到最後,就是放到</body>前面即可,試看看。

    回覆刪除
  26. 測試過後將相關文章及留言編號拿掉,過2天facebook的連結就不會出現程式碼,可能是這兩個hacks造成的,或許移動程式碼位置到較後面看看,會不會改善。

    回覆刪除
  27. 綸太郎真的是太熱心啦~~~~

    謝謝你的協助,我再來測試看看^^

    回覆刪除
  28. 你好~~~

    我遇到一個和前面板友很類似的問題

    我的首頁有使用文章縮圖以及內容節錄
    當我加上Facebook的分享按鈕之後
    只要分享時,文章的內容都會自動秀出

    summary_noimg = 200; summary_img = 110; img_thumb_height = 150; img_thumb_width = 225; //=1) { imgtag = ''; summ = summary_img; } var summary = imgtag + '' + removeHtmlTag(div.innerHTML,summ) + '

    這段程式碼,無法擷取文章的內容

    不曉得是哪個地方相衝了呢??

    回覆刪除
  29. 和javaScript相衝,我只能選擇不要裝,或是將語法移到比較後面,哪個地方衝到,因為我不會js語法,所以沒法幫上忙。

    回覆刪除
  30. 謝謝你馬上回我~~~
    我移動語法位置後就沒有亂碼出現問題了...
    但是現在變成文章內容空白~~~(-_-;)

    回覆刪除
  31. 通常改過以後,一兩天都還不會很正常,再等看看,或是再換個位置,Blogger對FB的支援很怪。

    回覆刪除
  32. 您好,我的網站是
    http://tetsuyoh.blogspot.com/
    我已經測試過很多次,FB Share鈕的部份
    可是分享的狀態還是非常奇怪
    最新文章那篇,標題是對的,可是內文會顯示留言張貼的注意事項文字
    其他文章則是沒縮圖沒內文摘要
    如果是有留言的文章,內文的部份就會顯示第一則留言
    我已經試到腦爆了,希望可以指導一下,非常感謝

    回覆刪除
  33. 這是存在很久的問題,至今無解,google跟fb相衝,改好了,fb又改系統,又不行了。

    回覆刪除
  34. 感謝這個討論串,奮戰了將近一天,其中站長在 28F 提到的 相關文章 hack 的處理方式解決了我的問題,我把相關文章的 code 移到文章後面後,facebook 終於可以正確的抓到內容了,真是十分感激~~

    另外看了站長您的留言區,還滿適合安裝小弟寫的 hack「Blogger留言回覆系統」,可以有引言、作者插隊回覆功能,稍微改一下顏色就能套用您的 blogger。

    回覆刪除
  35. 謝謝你的分享 有空再來用看看。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能