從外部引用圖片的相關(guān)問題

今天這篇文章就聊聊 WordPress 從外部引用圖片的一些問題吧。

最近我的 SiteGround 主機(jī)接連報警，顯示存儲空間不夠，沒辦法進(jìn)行文件更新等一系列操作。其實(shí)這種問題的解決方案就兩個，要么直接花錢買存儲空間，要么花精力優(yōu)化存儲空間。由于第一種花錢買空間的方案，真的是太貴了，比直接再買一臺服務(wù)器都貴，遂放棄。

那現(xiàn)在只剩下優(yōu)化存儲空間這一個方案了，且因?yàn)楹罄m(xù)的主要存儲項(xiàng)主要是圖片與視頻，所以干脆從圖片與視頻這些多媒體資源下刀。

我的初步想法是創(chuàng)建一個專屬于我的圖片管理服務(wù)器（即所謂的圖床），然后將這個項(xiàng)目要用到的所有圖片與視頻等多媒體資料全部放在這個圖床上，然后再生成相關(guān)的圖片鏈接，植入到我的文章或商品詳情中去。

說干就干，我選擇的圖床技術(shù)方案是 Github 與 Vercel。至于為什么選擇這種技術(shù)棧，就是因?yàn)楹唵畏奖闱颐赓M(fèi)，而且 Vercel 提供的一些 CDN 服務(wù)，能完美的滿足我對圖片加載速度的要求。

且更關(guān)鍵的是，這種技術(shù)方案生成的圖片鏈接，我是能夠自定義的。也就是說，我用相關(guān)關(guān)鍵詞去命名圖片，能夠得到路徑很清晰的圖片鏈接，不像 Google Drive 這種方案只能生成亂碼。

有了圖片鏈接，后續(xù)我要做的就是直接將我獲得的圖片鏈接植入到我的文章中或者我的商品詳情中去。其實(shí)做法也很簡單，直接在文章中插入一個 Image 模塊，然后選擇從 URL 導(dǎo)入圖片即可（見下圖）。

等相應(yīng)操作完成后，再補(bǔ)充一下圖片的 Alt 信息即可。

但是這里有個問題需要注意，就是帶有圖片插入鏈接的文章發(fā)布之后，在網(wǎng)站的 Sitemap 文件里，這篇文章的圖片記錄是 0。

比如上圖，便是我寫的一個測試文章，并在文章中插入一張亞馬遜的圖片鏈接。完善好相應(yīng)的圖片 SEO 信息后發(fā)布。可以在網(wǎng)頁的源代碼中看到，除了圖片的鏈接不一樣外，其余的跟上傳到本機(jī)，沒有任何區(qū)別。

但是當(dāng)你去看網(wǎng)站的 Sitemap 文件，你會發(fā)現(xiàn)這篇文章里的圖片引用記錄是 0。也就是說 RankMath 等 SEO 插件認(rèn)為你的這篇文章，并沒有引用圖片。至于從技術(shù)角度出發(fā)，結(jié)果就是這樣。

所以如果你網(wǎng)站的 圖片 SEO 做的很好，且能從圖片搜索引擎上來很多很多流量。那這種方案對于網(wǎng)站維護(hù)而言，還是有比較大的缺陷的。

至于為什么會出現(xiàn)這種情況，主要涉及一個跨域資源引用的問題。再往下就是一些技術(shù)細(xì)節(jié)了，不詳細(xì)展開了。

簡單說說怎么解決這個問題吧。

很簡單，在圖床上綁定一個二級域名。這樣你的網(wǎng)站與你的圖床使用的根域名都是一樣的，那圖片收錄為 0 這個問題便迎刃而解了。

以上。