搜尋
首頁CMS教程&#&按學習如何讓WordPress支援google AMP

學習如何讓WordPress支援google AMP

Jul 16, 2021 pm 05:20 PM
googlephpwordpress

1.關於AMP

在行動網路的時代,儘管網站響應式設計可以滿足多螢幕(pc、手機、ipad等)瀏覽,但google在2015年10月推出了更快移動頁面訪問速度的技術-Accelerated Mobile Pages(AMP 加速移動頁面),AMP頁面是大大簡化了移動頁面,旨在提高針對移動頁面的訪問速度,AMP的特點如下:

  1. AMP的HTML程式碼是標準HTML的子集,大大簡化了html的程式碼,部分Html程式碼將不再適用,如table, frame等。
  2. 大幅簡化css,且只能寫在HTML中,不能呼叫外部CSS檔。
  3. JS大部分功能不能用了,但很多互動功能也就沒了,雖然影響了豐富的交互,但速度提升了速度。
  4. 加強對頁面資源控制,例如圖片、影片等使用者下拉到圖片時再載入。
  5. 充分利用高速緩存,Google將AMP頁面緩存在自身的伺服器上。

更多關於AMP的內容參考下面的連結:

  1. AMP官方網站:https://www.ampproject.org
  2. AMP的路線圖:https://amp.dev/community/roadmap/?referrer=ampproject.org

AMP剛推出時,只限於新聞的頁面,2016年8月谷歌宣布AMP將應用於所有類型的行動頁面。目前,雖然google明確表示AMP頁面不會影響排名,但google如此不遺餘力的推廣AMP,難保將來不會在演算法中考慮AMP的因素。

2.讓WordPress支援AMP

AMP很適合新聞、部落格等資訊資訊類的網站,作為老牌部落格系統WordPress在2016年10月6日推出了AMP的官方插件,目前該插件極大簡化了文章頁面,文章AMP頁面把導航、留言等都去掉了,只保留了文章內容本身,此頁面也同時兼容桌面電腦(pc)上瀏覽,首頁、分類、翻頁等都沒有相對應的AMP頁面,我預期後續版本應該會增加更多的功能,如果你不想等,也可以直接改造這個外掛加入導覽、分類等功能。

安裝啟動WordpPress的AMP外掛程式後,外掛程式會建立一個AMP文章頁面,該頁面連結URL是在原始頁面的連結URL加上“/amp”,以本部落格文章連結為例:

原文文章頁面連結://www.watch-life.net/wordpress/wordpress-google-amp.html ‎

AMP頁面的連結://www.watch-life.net/wordpress /wordpress-google-amp.html/amp

為了讓google的搜尋引擎擷取到AMP頁面,在原文版面的HTML裡需要指明AMP頁面的位址,也就是用amphtml標籤指明AMP版本位址:

<link>

在AMP的頁面的HTML程式碼中也要用canonical標籤指明原始文章頁面位址:

<link>

AMP頁面在PC端展示

學習如何讓WordPress支援google AMP

AMP頁面在手機端的展示

學習如何讓WordPress支援google AMP

3.AMP頁面在谷歌搜尋的展示

AMP頁面被google搜尋索引後,在搜尋結果裡看到AMP的頁面,頁面描述最前面有閃電標記和AMP字樣。使用者點擊後,頁面會迅速打開,顯示的是Google伺服器上的快取頁面。在google搜尋裡AMP頁面如下圖展現:
學習如何讓WordPress支援google AMP

4.百度是否會跟進AMP?

國內的站長最關注是百度(baidu)搜尋是否會跟進AMP呢?好消息是百度也支援類似AMP,壞消息是百度2016年8月搞了自己一套類似的AMP-Mobile Instant Pages(MIP 行動網頁加速器),AMP和MIP非常相似,無論是HTML、CSS、禁用大部分JS、資源控制、快取等都幾乎和AMP相似,還有原頁面與MIP頁面的互相引用方法(加標籤),都和Google AMP一樣,官網的頁面佈局、選單排程、技術說明裡的內容幾乎也是吃驚的一致,看見百度的MIP基本上就是照搬AMP了。那百度為什麼不跟google一樣用AMP呢?況且AMP還是開源的。我想一個重要的原因是AMP使用的需要調用官網的JS庫,用於控制資源加載、緩存等功能:

<script></script>

這個恐怕是百度不願意採用AMP的一個核心原因,鑑於國內的網路環境(偉大的qiang),難免不讓人擔心這個js庫那天被屏蔽了。目前尚沒有針對MIP的WordPress插件,如果採用WordPress採用MIP的話,目前只能靠換主題模版的方法,這種方法最麻煩的是需要單獨為MIP頁面啟用一個二級域名,我還不打算跟進,覺得這種方法沒有插件來的簡單快速。

更多WordPress技術文章,請訪問WordPress#教學欄位!

以上是學習如何讓WordPress支援google AMP的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
使用WordPress而不是從頭開始編碼網站的優點是什麼?使用WordPress而不是從頭開始編碼網站的優點是什麼?Apr 25, 2025 am 12:16 AM

WordPressisadvantageousovercodingawebsitefromscratchdueto:1)easeofuseandfasterdevelopment,2)flexibilityandscalability,3)strongcommunitysupport,4)built-inSEOandmarketingtools,5)cost-effectiveness,and6)regularsecurityupdates.Thesefeaturesallowforquicke

是什麼使WordPress成為內容管理系統?是什麼使WordPress成為內容管理系統?Apr 24, 2025 pm 05:25 PM

WordPressIsAcmsDuetoItseAsofuse,自定義,USERMANAMECTION,SEO和COMMUNITYSUPPORT.1)ITSIMPLIFIESCONTENTMANGAMEWITHANINTUISIDERFEEFFECE.2)提供extentensiveCustomizationThroughThroughTheMesandPlugins.3)supportrobustuserrolesandplugins.4)supportrobustuserrolesandpermissions.4)增強

wordpress怎麼加評論框wordpress怎麼加評論框Apr 20, 2025 pm 12:15 PM

在 WordPress 網站上啟用評論功能,可以為訪客提供參與討論和分享反饋的平台。為此,請按照以下步驟操作:啟用評論:在儀錶盤中,導航至“設置”>“討論”,並選中“允許評論”複選框。創建評論表單:在編輯器中,單擊“添加塊”並蒐索“評論”塊,將其添加到內容中。自定義評論表單:通過設置標題、標籤、佔位符和按鈕文本來定制評論塊。保存更改:單擊“更新”以保存評論框並將其添加到頁面或文章中。

wordpress怎麼複製子站wordpress怎麼複製子站Apr 20, 2025 pm 12:12 PM

如何復制 WordPress 子站?步驟:在主站創建子站。在主站克隆子站。將克隆導入目標位置。更新域名(可選)。分開插件和主題。

wordpress怎麼寫頁頭wordpress怎麼寫頁頭Apr 20, 2025 pm 12:09 PM

在WordPress中創建自定義頁頭的步驟如下:編輯主題文件“header.php”。添加您的網站名稱和描述。創建導航菜單。添加搜索欄。保存更改並查看您的自定義頁頭。

wordpress評論怎麼顯示wordpress評論怎麼顯示Apr 20, 2025 pm 12:06 PM

WordPress 網站中啟用評論功能:1. 登錄管理面板,轉到 "設置"-"討論",勾選 "允許評論";2. 選擇顯示評論的位置;3. 自定義評論表單;4. 管理評論,批准、拒絕或刪除;5. 使用 <?php comments_template(); ?> 標籤顯示評論;6. 啟用嵌套評論;7. 調整評論外形;8. 使用插件和驗證碼防止垃圾評論;9. 鼓勵用戶使用 Gravatar 頭像;10. 創建評論指

wordpress怎麼上傳源碼wordpress怎麼上傳源碼Apr 20, 2025 pm 12:03 PM

可以通過 WordPress 安裝 FTP 插件,配置 FTP 連接,然後使用文件管理器上傳源碼。步驟包括:安裝 FTP 插件、配置連接、瀏覽上傳位置、上傳文件、檢查上傳成功。

wordpress代碼怎麼複製wordpress代碼怎麼複製Apr 20, 2025 pm 12:00 PM

如何復制 WordPress 代碼?從管理界面複製:登錄 WordPress 網站,導航到目標位置,選擇代碼並按 Ctrl C (Windows)/Command C (Mac) 複製代碼。從文件複製:使用 SSH 或 FTP 連接到服務器,導航到主題或插件文件,選擇代碼並按 Ctrl C (Windows)/Command C (Mac) 複製代碼。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版