首頁 找知識 社群行銷. 優化你的網站在FACEBOOK、GOOGLE+…分享的顯示內容

優化你的網站在FACEBOOK、GOOGLE+…分享的顯示內容

你有沒有想過,當有人在Facebook分享你的文章時,你的文章顯示方式是否如你所想。當Facebook在抓取我們的網頁內容的時候,如果沒有其他的輔助資訊,它只能猜測哪些內容是重點,哪些不是重點。 這時候我們可以使用Open Graph優化我們的文章在社群網站的顯示內容。

Open Graph

open-graph

上圖是我們使用Open GraphFacebook抓取出來的分享內容。

open-graph-01

這一張是使用Open Graph優化之後的顯示內容。底下是我們所使用的原始碼

<!--作者-->

<meta name="author" content="Astralweb">
!--縮圖-->

<meta property="og:image" content="http://cdn.astralweb.com.tw/wp-content/uploads/2015/04/002.jpg">

<!--標題-->

<meta property="og:title" content="Photoshop教學:【基礎篇】修改眼鏡的反光影像" />

<!--說明-->

<meta property="og:description" content="有時拍照後眼鏡的反光影像並不是我們想要顯現的,我們可以使用Photoshop更換想要呈現的效果!這篇文章就要教你如何使用Photoshop修改眼鏡的反光影像" />

目前大多數的主流社群分享平台都已經支援Open Graph ,例如:FacebookGoogle+TwitterLinkenInPinterest…。

Twitter Card

另外Twitter還有一個專屬的Twitter Card 標籤。Twitter Card有許多不同的類型,可以在此網站(點選)查看所有的Twitter Card類型 底下我們以 summary card作示範

<meta name="twitter:card" content="summary" /

<meta name="twitter:site" content="@Astralwebtaiwan" />

<meta name="twitter:title" content="Photoshop教學:【基礎篇】修改眼鏡的反光影像" />

<meta name="twitter:description" content="有時拍照後眼鏡的反光影像並不是我們想要顯現的,我們可以使用Photoshop更換想要呈現的效果!這篇文章就要教你如何使用Photoshop修改眼鏡的反光影像" />

<meta name="twitter:image" content="http://cdn.astralweb.com.tw/wp-content/uploads/2015/04/002.jpg" />

<meta name="twitter:url" content="http://www.astralweb.com.tw/photoshop-reflective-glasses/" />

同時使用Open Graph和Twitter Card

因為Twitter也支援 Open Graph,為了避免原始碼太過冗長,因此我們必須避免掉重複的部份。底下就是同時使用Open GraphTwitter Card的範例

<meta name="twitter:card" content="summary" />

<meta name="twitter:site" content="@Astralwebtaiwan" />

<meta name="twitter:creator" content="@Astralwebtaiwan" />

<meta property="og:url" content="http://www.astralweb.com.tw/photoshop-reflective-glasses" />

<meta property="og:title" content="Photoshop教學:【基礎篇】修改眼鏡的反光影像" />

<meta property="og:description" content="有時拍照後眼鏡的反光影像並不是我們想要顯現的,我們可以使用Photoshop更換想要呈現的效果!這篇文章就要教你如何使用Photoshop修改眼鏡的反光影像" />

<meta property="og:image" content="http://cdn.astralweb.com.tw/wp-content/uploads/2015/04/002.jpg" />

為什麼要使用Social Meta Tags

使用Social Meta Tags最直接影響是:可以由我們自己決定網頁顯示在網路社群平台時的畫面。適當的圖片和文字內容可以讓網站在社群平台曝光時更吸引人,增加來自社群平台的流量,提高點擊率。

關於 Astralweb

Astralweb
歐斯瑞是全台唯一MAGENTO雙認證的專業公司,精通網站前後台功能規劃,擁有GOOGLE ADWORDS、BING ADS關鍵字廣告認證,精通網路行銷與搜尋引擎優化。 Astral Web(歐斯瑞有限公司)起源於2008年美國洛杉磯,我們用心達到客戶要求,所有專案透明化,客戶擁有網站所有權,提供自由開放的合作模式及友善的溝通環境。 我們是一群對網路充滿熱情的專業團隊,堅信網路的力量無遠弗屆,人人都有機會開創網路事業。

大家都在看

0

當人人都是自媒體,直播平台如何破解用戶基數問題?

受新冠疫情影響,民眾配合在家防疫不出門,讓直播話題再掀熱潮,由於直播不受限於空間場域,正好符合防疫減少接觸的要點,且因應疫情,越來越多商家、藝人投身於直播的行列,利用網路直播的方式與觀眾互動,在線上建立彼此間連結,填補了大眾的居家娛樂生活。本次《 Social Lab 社群實驗室》追蹤各類型直播平台網路聲量,並進一步深入自媒體直播及網路直播平台,剖析熱門頻道內容類型,提供最真實的聲音供業者做為參考。

還想知道更多數位新知?快來訂閱 dcplus 關鍵分享報

您希望收到哪些資訊呢?