【網路應用】AMP 行動加速網頁建構您的 amp ,未使用 Yoast Seo

為什麼要使用AMP在未使用 Yoast Seo 下又應該如果建構呢? 行動加速網頁 ( Accelerated Mobile Pages )如果您是用 WordPress 建站有福了,只需安裝其外掛,就可以解決了,但是要讓它得到完善的解決,(尤其未使用 Yoast Seo 下)那應該如何做呢? 我們就來談談應該怎做比較呢 ?

行動加速網頁 AMP ( Accelerated Mobile Pages )其實如何您的要求不多,只要安裝 其外掛就能解決

Yoast SEO 的做法

行動加速網頁(Accelerated Mobile Pages) 其實如何您的要求不多,只要安裝 其外掛就能解決大多數的問題.不再像以前那麼的困難. 但是如果要有最好的效果,那您應該這樣做.以達到使用者的最佳體驗.科技進步,移動設備的來臨讓網站載入的時間快速就是爭取使用者的要素,雖然不能確定未來是否在移動設備上的發展是否到像電腦一樣的快速,(我覺得不無可能,行動加速網頁的發展不以商業考量來說,主要是讓 3G 手機使用者能夠有所體會),但在這當下,善用外掛來加速文章的速度當然是好的.讓使用者有所體驗是好的.
又因社團中有人寫了一篇很棒的文章(用3個外掛達到最佳效果.但前提下必需安裝 Yoast SEO. 如果您是使用 Yoast  的話, 不妨看看這個文章:

如何在WordPress網站上安裝AMP版的網頁,提升SEO排名


安裝amp-wp外掛

amp
在沒有使用付費外掛下,千萬不要安裝一些其它相關的外掛.會讓您得不償失,所以:先從官方安裝amp-wp外掛 ,並啟用它.在文章的部份就能得到效果.(您可以點選圖片就可連結到官方外掛並下載或安裝它。啟用它).

這時在文章的部份應該就會有明顯的效果。您可以在文章的後面加上 (postname/amp/ )看是否有轉換成功,如果要知道是否正確請在網址後面加上:

|/amp/#development=1 or/amp#development=1. 並再打開 F12 查看是否有紅色的警告.

  1. 其它驗證的方法:利用官方的網址查看是否 PASS
  2. 比較建議的是安裝壙充功能,它十分的方便:在這裡前往 在這不多做說明了。

add google analytics

當您安裝完後雖然己成功,但欠缺了 Google 的分析.所以並不會被收錄所以您可以在您的子主題  functions.php 加入下面的語法.並把其 UA-XXXXX-Y 修改為自己的代碼.這一點很重要,您必需要有分析才會被收錄. (PS.不用查看我的,我沒有開放網站.)


add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
function xyz_amp_add_custom_analytics( $analytics ) {
    if ( ! is_array( $analytics ) ) {
        $analytics = array();
    }
    // https://developers.google.com/analytics/devguides/collection/amp-analytics/
    $analytics['xyz-googleanalytics'] = array(
        'type' => 'googleanalytics',
        'attributes' => array(
            // 'data-credentials' => 'include',
        ),
        'config_data' => array(
            'vars' => array(
                'account' => "UA-XXXXX-Y"
            ),
            'triggers' => array(
                'trackPageview' => array(
                    'on' => 'visible',
                    'request' => 'pageview',
                ),
            ),
        ),
    );
    return $analytics;
}

結構化您的 NewsArticle

默認的情況下,文章會轉成: BlogPosting ;如果要轉成:NewsArticle 那您必需在子主題中加入:下面的語法。請注意,這為子主題的語法,而圖片您也可以用你圖片的路徑,比如
‘url’ => get_stylesheet_directory_uri() . ‘/uploads/2016/11/wplog.png’, //重要的是圖片必需是: 600×60(W×H)
‘url’ => get_template_directory_uri() . ‘/uploads/2016/11/wplog.png’, //這是未使用子主題的路徑


//url請修改自己的圖片路徑
add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );
function xyz_amp_modify_json_metadata( $metadata, $post ) {
    $metadata['@type'] = 'NewsArticle';
    $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
       'url' => get_stylesheet_directory_uri() . '/images/my-amp-metadata-logo.jpg',
        'height' => 60,
        'width' => 600,
    );
    return $metadata;
}

這時您可以前往驗證,如果您的網站己開放,可以前往這裡驗證
最基本的就是利用結構化工具驗證
如果您還不滿足您可以在您的子主題下開一個資料夾命名與路徑為: /wp-content/yourtheme/amp/ 並 copy 到路徑
/wp-content/plugins/amp/templates/style.php and single.php (或裡面您想修改的可改變的東西)到您的 /wp-content/yourtheme/amp/資料夾去修改內容.

重點提示

如果要有好的結果(結構化)您的特色圖片寬必需大於: 696px;metadata-logo 必需是:600 ×60, 這是最基本的要求。

原文來源:傳送門