本部落格已搬家
點此前往新部落格

新主機測試中...

Your posts match “ FB ” tag:

社群網站分享顯示優化

這年頭網站的訪客不一定都從搜尋引擎來,Facebook 或一些社群網站也會導入流量,網站自己也都會放一些分享到 FB 之類的按鈕,就跟以前的網站都有「設為首頁』跟「加入我的最愛」一樣。但常常會發生網頁分享出去,摘要跟圖片顯示得異常,為什麼呢? 因為沒設定相關資訊啊!

這裡有兩篇 FB 訊息牆上顯示的新聞,如果你是新北市的居民,可能會點哪則呢?


有人可能會看到左邊的小字有關水門資訊,想點進去看個詳細,有的人可能是標題黨,因為標題比較誘人就點進去,有人可能點有圖片的,有人可能喜歡看蘋果日報,影響使用者點擊的因素是很複雜的。

但實際上很多網站的分享按鈕都只是放心安的,常常點擊分享出去之後,顯示的是一些奇怪的內容,本來想分享產品,結果變成分享笑話。

常見的問題有:

  • 頁面標題未做優化,如甚至每一頁的標題名稱都一模一樣,沒有商品名稱或頁面名稱。
  • 頁面標題未做優化,如甚至每一頁的標題開頭都叫「 OOOOOOXXXXX有限公司 專提供OOOOOOOOOOOOOO 台灣第一OOOOOOOOOOO - 商品名稱」,重要的名稱都在後面,根本看不到。
  • 頁面描述未做優化,有時候是取頁面內容「原始碼」的前幾個字,如果東西是從 word 貼的,就是一堆雜亂的原始碼。有時候取頁面內容濾除原始碼的前幾個字,但是頁面內容是一大張圖或影片,完全沒有字可以顯示...
  • 分享的文章無封面圖顯示,或是顯示的是毫不相干的圖片,如箭頭的圖片,登入按鈕的圖片,網頁橫幅背景...

實際上這些東西是可以人為控制的,這叫做 Open Graph Protocol (OGP,開放社交圖表/开放内容协议)

分享出去的標題與描述,可以使用 og:title 與 og:description 屬性,
如以下範例:

< meta property="og:title" content="【更新】昌鴻來襲「雙北生活資訊」看這裡 | 即時新聞 | 20150710 | 蘋果日報" />
< meta property="og:description" content="昌鴻颱風來襲,預計將給北部帶來強大的風雨,雙北民生資訊目前最新狀況,整理如下。(即時新聞中心/綜合報導)捷運:正常營運。公" />

在搜尋引擎時代,有些網頁從業人員可能都記得 meta title 與 meta 描述的字數,但是在社群分享與行動裝置時代,og:title 跟 og:description 的字數是沒有定則的,因為每個裝置、每個平台上的顯示方式都不一樣!

以 Facebook 為例 (此處範例都先將封面圖片隱藏):

字數設定有這麼重要嗎? 是沒有很重要,只是會鬧笑話而已。例如...

分享出去的縮略圖,可設定使用 og:image 屬性來設定:
如以下範例:

< meta property="og:image" content="http://twimg.edgesuite.net/images/ReNews/20150710/420_1218c79f4e530ca40bfd608e5229b85f.jpg/>"

  • 圖片網址要用絕對路徑。
  • 圖片路徑有符號或中文時,FB 會自動做 utf8 encoding (中文字會變成&#x什麼的),就找不到圖片。所以網站要自己先把網址做 ASCII encoding (中文會變成%什麼的)的處理。
  • 圖片尺寸依各平台規定而不同,如 Facebook 至少寬跟高都要超過 200px 才顯示得出來,而且會依不同圖片尺寸、不同裝置顯示不同版面。
  • 圖片主題請放在中央偏上,以免顯示時被裁切掉

如果到了 Google+,又是長這樣

此處只講基本的,其他還有很多的 Open Graph Protocol 屬性,請詳閱 OFP 公開說明書。

Facebook 的測試與除錯工具 - FB Debugger
https://developers.facebook.com/tools/debug/og/object/
Facebook 在第一次分享後,會把網頁摘要儲存起來,之後其他人再分享,只會從儲存的這邊去抓,不會去讀網頁上的。避免如果有文章被十億人瘋傳,光每次分享時的主機請求就把網站搞垮了。

所以網頁更新後,要去 FB debugger 清除舊快取,這樣分享出來顯示的東西,才會是新的。

test.com/ 、 test.com 、test.com/index.html、www.test.com/、 www.test.com... 其實都是連到同一網址,但有時候會產生不同的摘要資訊,要個別檢查與清除。

其他事項
一些比較進步的 CMS 或購物車程式,通常都支援每個頁面/產品可以設定獨立的 og:image 或 meta 相關屬性,而不是整個網站都吃同一份內容。

OGP 就是一個公開的標準,主流的社群平台基本上都支援,不支援的話會再抓meta 描述或標題的東西。但是如 Twitter 等…各種社群平台又有自己專屬的摘要屬性,各平台為了達到差異化功能所額外訂立的屬性,比如說可以讓縮略圖的地方直接顯示影片之類的。基本上的原則就是針對目標族群常用的社群分享做優化。

但是中國一樣是有自己的社群生態系。Facebook、Google+ 神馬的都是浮雲,要翻牆才看得到,中國大陸的人民都用微博、微信、人人、QQ、貼吧...,這些社交服務通常又有自己的屬性與圖片尺寸,所以說大中華市場是很特別的。

以前國民黨統戰的時候都宣傳說大陸人都只能吃啃樹皮,現在教材應該要換成大陸人都連不上 Facebook、Google+,所以要去解救水深火熱中的大陸同胞。但現在則要說台灣人沒有大陸手機號碼或台胞證,想申請支付寶之類的方便又功能強大的大陸的網路服務來玩玩都不行。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


免費的網頁空間最貴

常聽到「網站只要看得到就好,不想花太多錢。」「小公司,用不到這麼好的主機。」「親戚的小孩幫我弄的,他還是學生,先放在免費的網頁空間裡」節省成本的想法是沒錯,用免費的網頁主機空間,每年可以省下幾百塊、幾千塊的費用。

但是天底下沒有白吃的午餐,主機商也是要付電費、人事成本、繳稅的,免費的主機空間到底有哪裡不好呢? 以下列出幾點常見的免費網頁空間的缺點:

一、頁面被強制插入廣告

網頁或程式上傳上去之後,頁面上就被強制插入廣告程式碼。例如有一進頁面就先跳出來的彈出式廣告,或是在右半邊或是下面整塊切出來的頁框式廣告,或是常常破壞版面的插入式廣告。常常造成網頁版面被破壞,或是嚴重干擾網站正常的瀏覽操作,每換一頁就跳一次廣告,頁面內容常常被廣告遮住。

還有各式各樣的廣告類型,有的是主機商宣傳自己的主機服務,有的是國外的偷情網站、交友網站、購物網站,別人看到還以為你在逛色情網站,有的廣告甚至還會帶人去下載病毒,使用者觀感非常差。有時候甚至還會跑出競爭對手的廣告,廣告還比你頁面上的內容吸引人。

雖然道高一尺,魔高一丈,通常去 Google 搜尋輸入 空間名稱+去廣告,就可以找到一些解法,但如果主機商常常更新廣告語法,於是你也得常常去更新你的去廣告語法,而且要是找不到大大分享的去廣告語法,或是佔用太多時間去維護,這都是不符合人力成本的。

二、穩定性與速度

付費購買的主機服務,通常會有主機保證上線時間、備援服務(要另外付費),一分錢一分貨,通常越貴的主機,服務就越多,但是免費主機通常沒有這種事情,這禮拜能用,搞不好下禮拜就沒了。

許多免費空間主機多半放置在海外,雖然說網路無國界,但實際上是隔了一個海洋,常常可以感覺圖片開啟速度就變慢了,或是主機回應時間很久(例如輸入或點擊網址後,一開始頁面空白沒東西的時間特別長)。而且虛擬主機通常是大家共用主機空間,網站效能容易被主機上其他網站影響,三不五時就遇到網站掛掉。花錢買的網頁空間如果掛掉,可以理直氣壯的找客服,但免費網頁空間的客服,通常不怎麼愛理人。

免費網頁空間通常還有不怎麼大的流量限制與空間限制,就算看起來都很大,但還有一些看不到的東西,比如說 MySQL 或 PHP 版本很舊,容易有安全性漏洞,或是資料庫只能開一兩個,還有通常不會列出來的主機資源使用率限制,只要某段時間內太多人瀏覽,或是某支程式占用主機太多資源,就容易被限流,讓網站連不上或是跑很慢。

遇過一個最高科技的,如果短時間上傳太多次 php 程式或 html 頁面,就會發現網頁不管怎麼重新整理都還是舊的,一定要過好幾分鐘才能看到資料更新,要過數小時才能「解鎖」。

三、過一段時間沒去用,網站會被刪掉

註冊時都有各種條款,但有人會去仔細閱讀嗎? 有些免費網頁空間的條款內會寫明「有一段時間內沒有瀏覽量,或是瀏覽量低於多少時,主機會將您帳號底下的檔案與資料庫內容清空。」如 erufa 或 somee 都有此規定。讓你過去花時間製作的內容、累積的資料,通通灰飛煙滅。

這種規定通常會寫在落落長的同意書裡面,不會明顯的寫在產品特色裡,也不會顯示「還還要多少人數才不會讓網站被刪掉的」統計表讓你看。通常是在網站被清空之後收到通知信,或是登入主機控制台時會看到通知,找客服也拿不回資料,遇到也只能認了。

四、資料保密與安全性?
網站上難免會有一些私密資料,例如購物網站會有客戶資料、訂單資料,萬一被消費者發現在某網站消費後,就開始會接到詐騙電話,或是常常收到有的沒的廣告信,或是有些用同樣密碼的網路服務被盜帳號,這個責任算誰的?

有些註冊條款還會有「同意本協定即表示我們可利用您的網站資料...」之類的文句,有人會仔細去看嗎? 天下沒有白吃的午餐!

五、免費贈送的域名,常會被社群網站或搜尋引擎封鎖

有些免費網頁空間會贈送幾個免費子域名,雖然網址後半段可能有主機商的名字,但至少前面開頭還可以選一個自己喜歡的名稱,看起來感覺還可以用?

但後來會發現,把網站登錄搜尋引擎,卻遲遲無法索引,或是把網址分享到 Facebook,無法顯示正確的摘要內容,甚至無法送出貼文。og 相關屬性怎麼設定都沒用,到 FB debug tools 一查,顯示 "This link is blocked." 才發現域名被封鎖。

為什麼免費子域名會被封鎖? 因為有些詐騙網頁、或病毒程式,也會常常使用免費空間或免費域名來做為散播歡樂分享愛的地方,所以系統會判定只要是這個域名來的,就是不安全的來源,會封鎖或限制此域名的內容。一些免費轉址、no-ip 的很多域名都有此情況,Facebook 摘要不出來,有時候不是你 meta 或 og 屬性設錯,而是網站用的域名被封鎖了。

有些免費主機還會贈送免費信箱,讓人可以去寄信,但同理可證,這種信箱寄出的信,也常常收不到。


結論

如果只是要測試程式,或是練功用,那可以用免費空間即可,記得多備份。Google 搜尋時記得還要限定時間「一年內」,不然常常找到一些舊文章,免費主機早就沒了。

如果只是要放 htm 的靜態的個人展示內容,可以考慮 Github pages。如果是要找圖床,或是js, css 的檔案庫,那可以盡量找大間一點的,不過這也說不準,Yahoo 夠大嗎? 無名小站跟 Yahoo 網頁跑哪去了? Google 夠大嗎? Google reader 跟 Google code 跑哪去了?

如果真的是要賺錢做生意用的,那還是花一點錢,換一些安心吧,不要省小錢,花大錢。

要買付費的,也要注意陷阱,看到便宜就買,但可能是第一年優惠價,第二年開始超貴。或是主機放國外,連線速度很慢;或是主機放國內,但常常故障或是出問題,不可不慎。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助