網站裝修紀錄 #2 Facebook分享抓不到網站資訊

Winsome on 2020-03-06 Fri

前幾天把Facebook粉絲頁弄好，想說要來分享文章的時候，
就遇到了一個問題: "Facebook抓不到我的網站資訊!"
標題圖片都空空如也，怎麼分享的下去

好傷心，看來要Fix一下了
那除了想要解決這件事，也想把之前沒有懂的SEO，再研究推進一點
所以兩件事：

找出Facebook抓不到網站資訊的原因
研究SEO

Facebook抓不到網站資訊的原因

分析問題

首先我先推測一下
我看了網站的html是有我寫的一堆meta tag的，但是網站原始碼卻沒有
我想可能是爬蟲爬過的時候，server side render出來的部分還不包括這些meta tag
meta tag比較後面才從client side產生

有找到幾個類似的討論，像是

大概歸納出來幾個解法

1. 使用facebook偵錯工具
1. 改用Next.js
1. 使用prerender相關服務(像是prerender.io)

1使用facebook偵錯工具

因為Facebook會做cache，所以可以先來這邊試試看重新抓取，
如果有抓到，就會cache起來，之後分享就會有圖片標題了。
這感覺會時好是壞，不是我要的，先跳過

2 改用Next.js

改用Next.js這個成本太高，跳過

3 使用prerender相關服務

因為我是用netlify部署的，它剛好有個prerender的服務

Prerendering is a process to preload all elements on the page in preparation for a web crawler to see it.

真是太棒了，所以我馬上開啟這個功能，重新deploy，就解決了

補記

我也有在沒有開啟prerender的情況下，用FB偵錯工具重新抓取後，抓到網站資訊
我看到這份文件Facebook 網路爬蟲有寫到爬蟲爬得到的條件，有

任何開放社交關係圖屬性都需要在網站的前 1 MB 內容之前列出，否則將遭到截斷。
請確保網路爬蟲可以在幾秒鐘內抓取內容，否則 Facebook 將無法顯示該內容。

重寫SEO

我覺得這篇文章寫得很好：Meta Tags for SEO: A Simple Guide for Beginners
我先推進一些知識後，就開始一個一個改

Tag

有幾個基本的，都加一加
<title>就是出現在分頁上面的標題

<head>
  <meta charset="UTF-8">
  <title>blabla</title>
  <meta name="description" content="blabla">
  <meta name="keywords" content="blabla">
  <meta name="author" content="blabla">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

參考

lang語系

<html lang="zh-Hant" data-react-helmet="lang"></html>

語系我是寫zh-Hant

參考

Language-Territory Information

Facebook

我以前都不知道在og:什麼，原來是指The Open Graph protocol
所以og:是給Facebook看的，可以用的tag，官網裡面都有寫

參考

想要你的文章讓更多使用者點閱，Open graph你不能不知道！！

Twitter

雖然我沒有在用Twitter，也是要加，我是參考這個文件Optimize Tweets with Cards

schema-org

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

schema.org(結構化資料標記)是Google, Microsoft, Yahoo and Yandex一起做的，
它可以用幾種方式寫出來：RDFa, Microdata and JSON-LD
可以描述很多東西，像是產品、人、書、電影......等
簡單說就是照著它的規則寫，好讓搜尋引擎呈現更詳細的資訊，讓使用者更一目瞭然，然後就會更想點進去

那schema-org的部分，我是用kentcdodds的schema-org.js來修改

可以使用結構化資料測試工具直接來看改完的成果

注意：

dev要測試的話，可以搭配ngrok來測試
記得用build完後的結果測(npm run build -> npm run serve)

參考

六角學院 - Google SEO 結構化 microdata

後記

過程有看到react-snap這個套件，感覺也是可以，先記起來

Pre-renders a web app into static HTML. Uses Headless Chrome to crawl all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get the best loading performance.

Share

目錄