title: 讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） --- **摘要** 不論是 Google+ 或 Facebook，當你貼網址到這兩個社群網站上面時，社群網站會自動擷取目標網頁的標題、摘要及特色圖片，不過這些資訊可不是隨機從文章內取得，必須有符合 Open Graph 規範的 meta 標籤才能讓社群網站正確讀取，一般來說你得自己把程式碼加到 WordPress 佈景內，不過現在只要安裝 WP Open Graph Meta 就可以了！ **Category** - [wordpress相關](https://www.soft4fun.net/category/how-to/wordpress-relate) **Tag** - [WordPress外掛](https://www.soft4fun.net/tag/wordpress%e5%a4%96%e6%8e%9b) - [WP Open Graph Meta](https://www.soft4fun.net/tag/wp-open-graph-meta) **圖片清單** - ![讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） wp-open-graph-meta-01_thumb](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/wp-open-graph-meta-01_thumb.png "讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） wp-open-graph-meta-01_thumb") - ![讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） all-in-one-seo-pack_thumb](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/all-in-one-seo-pack_thumb.png "讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） all-in-one-seo-pack_thumb") - ![讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） settings_thumb](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/settings_thumb.png "讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） settings_thumb") - ![讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） open-graph_thumb](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/open-graph_thumb.png "讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） open-graph_thumb") --- 不論是 Google+ 或 Facebook，當你貼網址到這兩個社群網站上面時，社群網站會自動擷取目標網頁的標題、摘要及特色圖片，不過這些資訊可不是隨機從文章內取得，必須有符合 Open Graph 規範的 meta 標籤才能讓社群網站正確讀取，一般來說你得自己[把程式碼加到 WordPress 佈景](http://steachs.com/archives/2580)內，不過現在只要安裝 **WP Open Graph Meta**就可以了！ #### 安裝教學 **Step 1** 首先安裝外掛程式，可以 WordPress 後台「新增外掛」裡面搜尋「WP Open Graph Meta」進行安裝，或者從[官方下載頁面](http://wordpress.org/extend/plugins/wp-open-graph-meta/)下載。 [![讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） wp-open-graph-meta-01_thumb](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/wp-open-graph-meta-01_thumb.png "讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） wp-open-graph-meta-01_thumb")](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/wp-open-graph-meta-01.png) **Step 2** 接下來你還得配合一個 SEO 外掛「[All In One SEO Pack](http://wordpress.org/extend/plugins/all-in-one-seo-pack/)」，這個 SEO 外掛可以幫你做很多關於搜尋引擎優化的事情，同時也能讓 WP Open Graph Meta 抓取一些重要的資訊。安裝方式一樣可以從後台搜尋，或者[官方頁面](http://wordpress.org/extend/plugins/all-in-one-seo-pack/)。 [![讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） all-in-one-seo-pack_thumb](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/all-in-one-seo-pack_thumb.png "讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） all-in-one-seo-pack_thumb")](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/all-in-one-seo-pack.png) 以上兩個外掛安裝完成後，基本上不需要做任何設定。 #### 設定特色圖片 由於 WP Open Graph Meta 是搭配 WordPress 的特色圖片才能正確顯示，因此在文章編輯頁面裡面必須設定特色圖片。 另外為了讓摘要可以正確顯示，同樣在文章編輯畫面上找到「文章摘要」將相關內容填入欄位即可。 [![讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） settings_thumb](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/settings_thumb.png "讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） settings_thumb")](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/settings.png) 設定完成後，當你把網址貼到 Facebook 或 Google+ 就會自動擷取正確特色圖片、標題和描述（如下圖） [![讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） open-graph_thumb](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/open-graph_thumb.png "讓社群網站正確擷取 WordPress 的特色圖片及摘要：WP Open Graph Meta（WordPress外掛） open-graph_thumb")](http://pic.soft4fun.net/imgs/-WordPress-WordPress_9EEA/open-graph.png) #### 如果我的版型是客製的 如果你的特色圖片不是使用 WordPress 的特色圖片功能，那麼用 WP Open Graph Meta 就跑不起來了。這種情況下建議你參考[程式碼設定教學](http://steachs.com/archives/2580)自己改佈景。 #### 裝外掛和修改佈景哪個比較好？ 以效能來說，當然是修改佈景比較好，畢竟如果從外掛去產生的話，伺服器得多一個負擔，效能上當然會有所差異。假如你不懂程式碼的話，建議直接安裝外掛並透過頁面快取來減少伺服器的負擔，頁面快取及更多的實用、免費WordPress外掛可以參考以下文章： > [19款實用 WordPress 外掛推薦， > 部 > 費](http://www.soft4fun.net/wordpress-relate/19%E6%AC%BE%E5%AF%A6%E7%94%A8-wordpress-%E5%A4%96%E6%8E%9B%E6%8E%A8%E8%96%A6%EF%BC%8C%E5%85%A8%E9%83%A8%E5%85%8D%E8%B2%BB.htm)