Tutorial Sử dụng Google Tag Manager để tại Canonical tự động

Thảo luận trong 'Tối ưu hóa On-Page' bắt đầu bởi babyinternet, 17/9/16.

By babyinternet on 17/9/16 lúc 12:21
  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,655
    Đã được thích:
    1,560
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Trong bài viết này chúng ta sẽ tìm hiểu phương pháp để làm thế nào để có thể tạo ra các URL Canonical sử dụng Google Tag Manager và làm thế nào chèn chúng vào mỗi trang trên website một cách tự động. Nếu bạn nào chưa từng sử dụng Google Tag Manager thì vui lòng xem thêm ở đây trước nha.

    Ở đây, chúng ta sử dụng Google Tag Manager và các biến được dịch vụ này cung cấp để thực hiện mục đích.
    [​IMG]
    Tại sao bạn phải sử dụng URL Canonical
    Một URL gốc có thể bị thay đổi nếu như bạn bổ sung thêm các biến trên URL không liên quan đến nội dung trang, nhưng có thể làm thay đổi URL như việc bạn bổ sung thêm các tham số theo dõi chuyển đổi...Điều này thường nằm vượt ngoài tầm kiểm soát của bạn vì bạn không thể hiểu được thằng mắc dịch nào gắn thêm thông số nào vào URL của bạn. Bạn cần phải sử dụng URL Canonical để:
    • Những trang web khác (như Google Cache, archive.org, các công cụ tìm kiếm...) có thể biến được đâu là URL gốc (hay trang gốc) và bỏ qua các biến thể linh tinh.
    • Các thông số liên quan đến SEO/Marketing...được loại bỏ khi index.
    • Giúp Google xác định dễ dàng nội dung ban đầu.
    Tôi phải tạo URL Canonical động như thế nào ?
    Động nghĩa là không tĩnh :D . Nghĩa là hệ thống sẽ tự động sản xuất ra các Canonical khác nhau tùy theo nội dung và cấu trúc do bạn định sẵn. Việc này bắt đầu bằng việc bạn phải làm việc với một "URL sạch". Chúng ta hãy xem một cấu trúc URL thường gặp như hình dưới đây:

    [​IMG]
    Mục tiêu của chúng ta: tạo ra một URL duy nhất (và dĩ nhiên là "sạch" - không có query và anchor). Chúng ta không thể sử dụng {{Page URL}} vì 2 lý do:
    • Query vẫn có giá trị mặc dù nó không phải một phần của Path.
    • Một số vấn đề liên quan đến giao thức khác nhau mà máy chủ chấp nhận biến thể (ví dụ có SSL hay không, có WWW hay Non-WWW...)
    Do vậy, chúng ta cần kết hợp 3 thứ: Protocol + Host + Path vào để tạo thành một biến duy nhất để thao tác.

    Hãy nhìn vào quá trình tạo ra một biến {{Page URL Canonical}}

    1. Tạo {{Page Protocol}} để biên dịch cả https và http
    [​IMG]
    Hãy lưu ý là chúng ta phải cho toàn bộ trang web hoạt động thống nhất trên 1 giao thức duy nhất (hoặc HTTP hoặc HTTPS). Như vậy, việc khai báo tại đây mới mang ý nghĩa tổng thể.

    2. Tạo {{Page Hostname Canonical}}

    Chúng ta cần một biến hostname được sử dụng thống nhất trên toàn trang. Đáng buồn là dù có www hay không thì khi bạn lấy hostname chúng đều có giá trị như nhau.

    Trường hơp này bạn có 2 dự lựa chọn để thực hiện:
    2.1 Lựa chọn 1: Chuyển tên miền có WWW sang Non-WWW bằng 301
    Việc này bạn có thể đọc thêm bài này - trong đó có đủ code để bạn làm.
    Sau đó, bạn tạo Hostname theo mặc định, nhớ kiểm tra lại và chắc rằng Hostname không có WWW.

    [​IMG]
    2.2 Lựa chọn 2: Chuyển tên miền Non-WWW sang WWW bằng 301
    Chúng ta cũng làm như trước đây, vẫn tạo một Hostname không có WWW, và sau đó chèn thêm WWW như một hằng số (constant).

    [​IMG]
    3. Kích hoạt biến tích hợp {{Page Path}}

    [​IMG]

    4. Tạo {{Page URL Canonical}}
    Chúng ta tiến hành liên kết tất cả các biến đã tạo ở trên trở thành một biến mới:

    Mã:
    {{Page Protocol}}://{{Page Hostname Canonical}}{{Page Path}}
    Ghi chú:
    Page Protocol: sẽ trả lại cho ta giá trị HTTP hoặc HTTPS.
    Page Hostname Canonical: WWW hay Non-WWW là do chúng ta tự quyết và sử dụng phương pháp chuyển hướng 301.
    Page Path: bao gồm cả dấu slash (/) và không bao gồm phần Query.

    [​IMG]

    Bây giờ chúng ta đã có một {{Page URL Canonical}} rồi. Việc tiếp theo là chúng ta đưa phần tùy chỉnh này vào để Google Analytics có thể hiểu được nó thông qua Custom dimension.

    Cách chèn URL Canonical vào trang web sử dụng Tag Manager
    Giả sử chúng ta đã có một URL Canonical tự động được tạo trog GTM là {{Page URL Canonical}}.
    Canonical thường được chúng ta chèn vào thẻ <head> của website theo dạng:
    HTML:
    <link href=”{{Page URL Canonical}}” />
    
    Nhưng nó sẽ không làm việc vì phần nội dung và mã sử dụng cho GTM sẽ phải được tải trước và đáng buồn là nó thường được đặt gần cuối thẻ </body>. Nghĩa là ở giai đoạn tải <head> Google sẽ không chấp nhận thẻ link này.

    Một giải pháp khả thi đó là sử dụng mã Javascript để tạo ra đoạn mã chúng ta cần và chèn ngược nó lại head:

    HTML:
    <script>
     var c = document.createElement('link');
     c.;
     c.href = {{Page URL Canonical}};
     document.head.appendChild(c);
    </script>
    Và sau đó, chúng ta có thể chèn ngược nó vào tất cả các trang trên website bằng cách sử dụng GTM như sau:

    [​IMG]

    Làm thế nào để kiểm tra Canonical này có hoạt động ??

    Rất đơn giản: chúng ta kiểm tra các đoạn mã đã được tạo ra mà trình duyệt render.

    Nếu bạn sử dụng Chrome bạn có thể kiểm tra bằng cách thực hiện từng bước sau đây:
    • Mở website trên Chrome
    • F12
    • Click vào Elements
      [​IMG]
    • Ctrl+F và tìm với từ khóa canonical
    • Nếu tag được sinh ra chính xác và nằm ở đoạn cuối của thẻ </head> thì nó được tạo ra từ Google Tag Manager đó :)
      [​IMG]

    Toàn bộ công việc này không quá khó nhưng cần độ tỉ mỉ. Chúc bạn thành công :)

    Nguồn: Moz
    Dịch và biên tập bởi Webmaster.VN
    Ghi rõ nguồn bài ghi phát hành lại.
     
    Drawvn.net thích bài này.

Bình luận

Thảo luận trong 'Tối ưu hóa On-Page' bắt đầu bởi babyinternet, 17/9/16.

Chia sẻ trang này