Hướng dẫn cài Google AMP, chèn Google Analytics cho web AMP

Đợt này cũng khá bận, sau khi viết bài Googe đã cập nhật kết quả AMP nhiều bạn có PM qua Fanpage muốn mình viết bài hướng dẫn cài đặt và config Google AMP cho WordPress.

Đây là 1 yếu tố xếp hạng website cũng khá cần thiết, các bạn trong khóa học SEO cũng vừa học qua nên cuối tuần tranh thủ viết bài chi tiết hướng dẫn cài đặt. Tính làm video SEO nhưng sợ khi các bạn làm theo video khó nên mình viết và chụp ảnh lại cho tiện.

Trước khi cài đặt Google AMP cho WordPress bạn có thể xem trước AMP là gì? Nội dung bài viết này bao gồm:

1. Hướng dẫn cài đặt plugin AMP (Automattic).
2. Chèn Google Analytics cho Website AMP.
3. Bài viết liên quan trong AMP.
4. Chèn ảnh Featured Image.
5. Download code mẫu.

Hướng dẫn cài Google AMP, chèn Google Analytics cho web AMP
Hướng dẫn cài Google AMP, chèn Google Analytics cho web AMP

 

1. Hướng dẫn cài đặt plugin AMP (Automattic)

Trong bài viết này mình hướng cài đặt plugin AMP của chính WordPress (Automattic) viết ra nó khá đơn giản dễ sử dụng.

Lưu ý: AMP chỉ hỗ trợ trang post (bài viết) không hỗ trợ page, home, category, tag… Có hai cách cài đặt 1 là các bạn có thể tải Plugin AMP -> Cài đặt trong thư mục Plugins. Bài viết này mình hướng dẫn các bạn cài đặt ngay trong admin cp của website.

Bước 1: Đăng nhập trang quản trị tìm tới menu bên trái Plugins -> Add new -> Gõ ô search (tìm kiếm): AMP sẽ hiện ngay kết quả plugin AMP. Lưu ý chọn by Automattic như hình dưới

Bước 1 chọn add new plugin (Automattic)
Bước 1 chọn add new plugin (Automattic). CLick xem ảnh to.

Bước 2: Các bạn bấm Install Now -> Activate Plugin. Như vậy là chúng ta đã cài đặt xong.
Các bạn có thể kiểm tra bằng cách xem 1 bài viết và thêm vào cuối /amp/
Ví dụ này tôi cài trên website: https://thietkexonghoi.com
Bạn có thể xem link gốc: https://thietkexonghoi.com/tac-dung-loi-ich-xong-hoi/
Link bài viết AMP: https://thietkexonghoi.com/tac-dung-loi-ich-xong-hoi/amp/

2. Chèn Google Analytics cho Website AMP

Các bạn chèn đoạn code sau vào file functions.php của theme bạn đang dùng. Nhớ thay UA-XXXXXXX-XX bằng ID Google Analytics của các bạn. Mình sẽ gửi toàn code vào file .txt ở cuối bài viết để các bạn dễ cài đặt.

/**
 * Code chen Google Analytics vao trang AMP
 */
function my_amp_scripts( $data ) {
$data['amp_component_scripts'] = array(
'amp-analytics' => 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js'
);
return $data;
}
add_filter( 'amp_post_template_data', 'my_amp_scripts' );

function my_amp_analytics( $amp_template ) {
?><amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXX-XX"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics><?php
}
add_action( 'amp_post_template_footer', 'my_amp_analytics' );

/**
 * Het Code chen Google Analytics vao trang AMP
 */

Sau khi đó các bạn lưu lại và mở link AMP của bài viết và truy cập Google Analytics và truy cập vào Tổng Quan trong thời gian thực của Google Analytics như hình dưới đây:

Tổng quan thời gian thực AMP
Tổng quan thời gian thực AMP

Vui lòng xem thêm video hướng dẫn cài đặt config Google Analytics và xem hướng dẫn của Google về Google Analytics trên trang AMP.

3. Bài viết liên quan trong AMP

Tương tự như chèn Google Analytics cho AMP chúng ta chèn bài viết liên quan sử dụng đoạn code sau và chèn vào phía dưới cùng của file functions.php của theme. Mình sẽ gửi toàn code vào file .txt ở cuối bài viết để các bạn dễ cài đặt.

 /**
 * Code bai viet lien quan cuoi moi bai trong AMP thay so 7 bang so ban muon
 */
 function my_amp_related_posts( $count = 7 ) {
    global $post;
    $taxs = get_object_taxonomies( $post );
    if ( ! $taxs ) {
        return;
    } 
    // ignoring post formats
    if( ( $key = array_search( 'post_format', $taxs ) ) !== false ) {
        unset( $taxs[$key] );
    } 
    // try tags first 
    if ( ( $tag_key = array_search( 'post_tag', $taxs ) ) !== false ) { 
        $tax = 'post_tag';
        $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array( 'fields' => 'ids' ) );
    }
    // if no tags, then by cat or custom tax
    if ( empty( $tax_term_ids ) ) {
        // remove post_tag to leave only the category or custom tax
        if ( $tag_key !== false ) {
            unset( $taxs[ $tag_key ] );
            $taxs = array_values($taxs);
        }
 
        $tax = $taxs[0];
        $tax_term_ids = wp_get_object_terms( $post->ID, $tax, array('fields' => 'ids') );
 
    }
    if ( $tax_term_ids ) {
        $args = array(
            'post_type' => $post->post_type,
            'posts_per_page' => $count,
            'orderby' => 'rand',
            'tax_query' => array(
                array(
                    'taxonomy' => $tax,
                    'field' => 'id',
                    'terms' => $tax_term_ids
                )
            ),
            'post__not_in' => array ($post->ID),
        );
        $related = new WP_Query( $args );
 
        if ($related->have_posts()) : ?>
 
            <aside>
                   <h3>Xem thêm</h3>
                   <ul>
             
            <?php while ( $related->have_posts() ) : $related->the_post(); ?>
 
            <li><a href="<?php echo amp_get_permalink( get_the_id() ); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
 
            <?php endwhile; 
            wp_reset_postdata(); ?>
             
            </ul>
                       </aside>
 
        <?php endif;
         
    }
 
} 
function my_add_related_posts_to_amp( $template ) {
    ?>
    <div class="amp-wp-content">
    <?php my_amp_related_posts(); ?>
    </div>
    <?php
}
add_action( 'amp_post_template_footer', 'my_add_related_posts_to_amp' );
 /**
 * Het code bai viet lien quan cuoi moi bai trong AMP thay so 7 bang so ban muon
 */

4. Chèn ảnh Featured Image

Cũng tương tự ta chèn đoạn code PHP vào cuối functions.php của theme:

 /**
 * Code chen anh Featured Image 
 */
add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
function xyz_amp_add_custom_actions() {
    add_filter( 'the_content', 'xyz_amp_add_featured_image' );
}
function xyz_amp_add_featured_image( $content ) {
    if ( has_post_thumbnail() ) {
        // Just add the raw <img /> tag; our sanitizer will take care of it later.
        $image = sprintf( '<p class="xyz-featured-image">%s</p>', get_the_post_thumbnail() );
        $content = $image . $content;
    }
    return $content;
}
 /**
 * Het code chen anh Featured Image 
 */

5. Download code mẫu

Mình đã lưu file dưới dạng .text các bạn vui lòng xem tại đây.
Các bạn thắc mắc xin vui lòng comment phía dưới hoặc pm cho mình qua fanpage mình sẽ hướng dẫn hoặc teamview giúp các.
Chúc các bạn thành công và nhớ vote, like share bài viết này giúp mình.

Hướng dẫn cài Google AMP, chèn Google Analytics cho web AMP 4.96/5 (99.17%) 24 votes
  1. Em vừa cài AMP,
    Anh cho em hỏi chút là: Sau khi cài AMP xong thì mình có tiến hành khai báo gì trong google search console không ạ?

  2. Google search console cập nhật và nó báo em bị lỗi thằng kk Star Ratings Anh ạ đoạn:

    The attribute ‘vocab’ may not appear in tag ‘div’.

    The attribute ‘property’ may not appear in tag ‘div’.

    Em có nhảy vào plugin kk Star Ratings sửa mà chưa được. Anh chỉ cho em Fix lỗi này như thế nào với ạ?
    Em cám ơn!

    1. Em dùng shortcode trong plugin chèn vào file single.php
      < ?php if(function_exists("kk_star_ratings")) : echo kk_star_ratings($pid); endif; ?>

Leave a Reply

Cùng chủ để Thủ thuật Wordpress

Đăng ký nhận tài liệu SEO

Điền email vào form dưới đây để đăng ký nhận tin tức SEO, tài liệu SEO, Ebook SEO mới nhất!