Sai lầm cần tránh khi chèn URL trực tiếp trong blogspot

Bạn đã biết URL sẽ chuyển hướng sang m=1 khi trang tải trên thiết bị di động. Nếu bạn vẫn chưa biết cụm từ "thiết bị di động" thì đó là chỉ điện thoại thông minh, chẳng hạn như các thiết bị chạy Android, iPhone hoặc Windows Phone. Bạn nên phân biệt nó với các thiệt bí khác: Máy tính bảng, Điện thoại đa phương tiện, Điện thoại phổ thông.

Blogger có một cơ chế đặc biệt nhận biết trang đang hiển thị trên thiết bị nào, nếu đó là thiết bị di động trang sẽ tự động chuyển hướng với tham số m=1 đằng sau URL. Blogger cũng cung cấp các thẻ dữ liệu liên kết tự động thêm sẵn m=1 đằng sau trên smartphone, có nhiều thẻ dữ liệu liên kết nhưng chỉ có loại thẻ đằng sau có tham số url mới được thêm m=1, ví dụ về các thẻ liên kết URL

• <data:blog.url/>: trang hiện tại
• <data:blog.homepageUrl/>: trang chủ
• <data:post.url/>: URL trang bài viết
• <data:label.url/>: URL trang Label
• ...

Người quản trị blog thường không để ý khi chèn URL trực tiếp trong chủ đề HTML của template cụ thể lỗi thường xảy ra khi tạo menu cho blog hay các liên kết dưới chân trang. Lấy ví dụ để chèn liên kết trỏ đến trang contact form demo, thông thường mình sẽ chèn liên kết trực tiếp thế này:

<a href='https://www.thietkeblogspot.com/p/contact-form-demo.html' title='Contact Form Demo'>Contact Form Demo</a>

Khi mình chèn liên kết như vậy nó chỉ đúng trên máy tính còn khi xem trên điện thoại nó sai vì liên kết đang bị thiếu ?m=1 đằng sau. Lí do nó sai là thay vì trên điện thoại liên kết đó phải được thêm sẵn m=1 đằng sau để liên kết không bị chuyển hướng sang m=1. Theo nguyên tắc SEO gọi là liên kết chéo không liên quan khi phân phối cùng một nội dung trên các URL riêng biệt.

Phân biệt URL trên máy tính và URL trên thiết bị di động

Để khắc phục lỗi cần thêm điều kiện URL trên thiết bị di động cụ thể với liên kết trên mình sẽ chèn lại như sau

<a expr:href='data:blog.isMobileRequest ? "https://www.thietkeblogspot.com/p/contact-form-demo.html?m=1" : "https://www.thietkeblogspot.com/p/contact-form-demo.html"' title='Contact Form Demo'>Contact Form Demo</a>

Nếu trang tải trên thiết bị di động URL bằng https://www.thietkeblogspot.com/p/contact-form-demo.html?m=1 còn không URL bằng https://www.thietkeblogspot.com/p/contact-form-demo.html

Hoặc có thể viết điều kiện ngược nếu trang không tải trên thiết bị di động

<a expr:href='!data:blog.isMobileRequest ? "https://www.thietkeblogspot.com/p/contact-form-demo.html" : "https://www.thietkeblogspot.com/p/contact-form-demo.html?m=1"' title='Contact Form Demo'>Contact Form Demo</a>

Cuối cùng bạn cần nhớ khi trang tải trên thiết bị theo sau là URL

Máy tính => URL

Máy tính bảng, điện thoại phổ thông => URL (m=1)

Điện thoại thông minh => URL (m=1)

Bài tham khảo: Thiết lập URL riêng biệt cho máy tính và thiết bị di động trong blogspot