目錄
1.關於AMP
2.讓WordPress支援AMP
3.AMP頁面在谷歌搜尋的展示
4.百度是否會跟進AMP?
首頁 CMS教程 &#&按 學習如何讓WordPress支援google AMP

學習如何讓WordPress支援google AMP

Jul 16, 2021 pm 05:20 PM
google php wordpress

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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱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

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

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1272
29
C# 教程
1252
24
wordpress文章列表怎麼調 wordpress文章列表怎麼調 Apr 20, 2025 am 10:48 AM

有四種方法可以調整 WordPress 文章列表:使用主題選項、使用插件(如 Post Types Order、WP Post List、Boxy Stuff)、使用代碼(在 functions.php 文件中添加設置)或直接修改 WordPress 數據庫。

wordpress主機怎麼建站 wordpress主機怎麼建站 Apr 20, 2025 am 11:12 AM

要使用 WordPress 主機建站,需要:選擇一個可靠的主機提供商。購買一個域名。設置 WordPress 主機帳戶。選擇一個主題。添加頁面和文章。安裝插件。自定義您的網站。發布您的網站。

wordpress主題頭部圖片如何更換 wordpress主題頭部圖片如何更換 Apr 20, 2025 am 10:00 AM

更換 WordPress 主題頭部圖片的分步指南:登錄 WordPress 儀錶盤,導航至“外觀”&gt;“主題”。選擇要編輯的主題,然後單擊“自定義”。打開“主題選項”面板並尋找“網站標頭”或“頭部圖片”選項。單擊“選擇圖像”按鈕並上傳新的頭部圖片。裁剪圖像並單擊“保存並裁剪”。單擊“保存並發布”按鈕以更新更改。

IIS和PHP的兼容性:深度潛水 IIS和PHP的兼容性:深度潛水 Apr 22, 2025 am 12:01 AM

IIS和PHP可以兼容,通過FastCGI實現。 1.IIS通過配置文件將.php文件請求轉發給FastCGI模塊。 2.FastCGI模塊啟動PHP進程處理請求,提高性能和穩定性。 3.實際應用中需注意配置細節、錯誤調試和性能優化。

wordpress怎麼導入源碼 wordpress怎麼導入源碼 Apr 20, 2025 am 11:24 AM

導入 WordPress 源碼需要以下步驟:創建子主題以進行主題修改。導入源碼,覆蓋子主題中的文件。激活子主題,使其生效。測試更改,確保一切正常。

wordpress怎麼查看前端 wordpress怎麼查看前端 Apr 20, 2025 am 10:30 AM

可以通過以下方法查看 WordPress 前端:登錄儀錶盤並切換到“查看站點”選項卡;使用無頭瀏覽器自動化查看過程;安裝 WordPress 插件在儀錶盤內預覽前端;通過本地 URL 查看前端(如果 WordPress 在本地設置)。

如果session_start()被多次調用會發生什麼? 如果session_start()被多次調用會發生什麼? Apr 25, 2025 am 12:06 AM

多次調用session_start()會導致警告信息和可能的數據覆蓋。 1)PHP會發出警告,提示session已啟動。 2)可能導致session數據意外覆蓋。 3)使用session_status()檢查session狀態,避免重複調用。

wordpress編輯日期怎麼取消 wordpress編輯日期怎麼取消 Apr 20, 2025 am 10:54 AM

WordPress 編輯日期可以通過三種方法取消:1. 安裝 Enable Post Date Disable 插件;2. 在 functions.php 文件中添加代碼;3. 手動編輯 wp_posts 表中的 post_modified 列。

See all articles