v Facebook摘文與 meta content的關係 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...