如何將 logdown 文章轉成 Facebook Instant Article

如果你希望 logdown 上的文章讓 Facebook Instant Article(以下簡稱 IA ) 也能吃,目前需要一些手動修改,我把我遇到的問題列舉如下:

貼圖

當圖片拖拉到文章裡之後,如果直接讓 IA 吃,會出現這樣的錯誤:

HTML 元素未包含任何文字: 請避免包含空白的 HTML 元素

(此處錯誤,更新於下方)解決方法很簡單,只要在貼圖連結的前後用<figure></figure>包起來即可

<figure>
![oooo.jpg](http://user-image.logdown.io/ooo.jpg)
</figure>

正確貼圖方式
根據 IA 有關圖片的說明

圖像的指定方式是使用標準的 HTML5 <figure> 元素,該元素用於包裝 <img> 元素及其相關註解。代表圖像的 <figure> 元素必須獨立包含在文章正文內,且不得包含在 <p> 元素內。

不過 logdown 現在被 IA 抓取的時候,會被<p>給包住:

<p><figure><img src="http://user-image.logdown.io/9IcQi1dTl6iq70zAyulA_%E6%94%BE%E7%94%9F.jpg" title=""></figure></p>
HTML 元素未包含任何文字: 請避免包含空白的 HTML 元素

即便我看文章本身的 HTML 長這樣

<figure><img src="http://user-image.logdown.io/9IcQi1dTl6iq70zAyulA_%E6%94%BE%E7%94%9F.jpg" title=""></figure><p></p>

所以現在文章裡的圖都要手動去把前後的<p></p>刪掉才能正常發布

更新

這裡指的更新是說當文章在 logdown 發佈,並且被 IA 抓到之後,如果你做了修改,要怎麼讓 FB 知道並且更新?我們需要加底下這段 code 在 header 中:

<header>
    <!-- The published and last modified time stamps -->
    <time class="op-published" dateTime="2017-4-14T13:00"></time>
    <time class="op-modified" dateTime="2017-10-1T14:49"></time>
</header>

我們要修改的就是 op-modified 這一行,只要更新時間比 IA 那邊紀錄的晚, IA 就會重抓,如果你等不及記得去粉專上面手動更新 RSS feed,很快,在 logdown 更新完,十秒不到 IA 就能抓到了

另外要注意的是,IA 只會抓取 24 小時內的更新,擷取 說明 如下:

如果對現有即時文章的更新已超過 24 小時(依據 op-modified 時間計算),則提取會將其忽略。舉例來說,如果在 10 月 8 日中午 12:00 提取摘要,而摘要中某篇文章的 op-modified 時間為 10 月 7 日上午 11:59,則提取會忽略這篇文章。