Mobile SEO - Công nghệ SEO trên điện thoại di động

Hàng triệu người sử dụng hiện nay truy cập web thông qua Smartphone chạy trên Android, iOS, hoặc Windowns. Vì thế, nhu cầu hiện nay bắt buộc các trang web phải thay đổi để theo kịp xu thế và từ đó đưa ra các thiết kế web để hấp dẫn cộng đồng.

Phiên bản Destop của site có thể khó khăn để quan sát và sử dụng trên một thiết bị di động. Một phiên bản không thân thiện với điện thoại di động và tạo cho người sử dụng những trải nghiệm gây nản lòng sẽ bị lãng quên. Trong chiều ngược lại, một phiên bản thân thiện với điện thoại di động sẽ hấp dẫn khách truy cập.

Cập nhật Google gần đây bắt buộc một Website nên thân thiện với điện thoại di động sẽ mang lại hiệu quả trên Mobile Search Engines. Ghi chú rằng, một Website mà không thân thiện với điện thoại di động sẽ không chịu bất kỳ sự tác động nào trên phương tiện tìm kiếm thông thường khác.

Trong chương này, chúng ta sẽ xem cách tạo một Website thân thiện với điện thoại di động để đảm bảo khách truy cập mà truy cập Website từ các thiết bị di động các một trải nghiệm tuyệt vời.

Mobile SEO là gì?

Mobile Search Optimization là tiến trình thiết kế một Website để làm cho nó thích hợp để quan sát trên các mà hình khác nhau có dải băng thông thấp của các thiết bị di động. Bên ngoài tất cả các quy tắc SEO đã áp dụng với các Website trên máy tính, chúng ta cần thực hiện các hoạt động sau trong khi thiết kế một Website cho các thiết bị di động. Một Website là thân thiện với điện thoại di động nếu chúng có các thuộc tính sau:

Có thiết kế mà vừa thực hiện tốt trên các Destop vừa thực hiện tốt trên Mobile. Nó không chỉ giảm sự bảo dưỡng Website mà còn làm nội dung của nó phù hợp với các Search Engine.
Nội dung của một Mobile Website là dễ dàng để đọc trên Mobile mà không phải Zoom màn hình. Nó có Font, màu, và Layout phù hợp.
Nó là dễ dàng để điều hướng trên một màn hình nhỏ. Nó cung cấp các link và các nút (button) mà có thể dễ dàng sử dụng bởi ngón tay.
Một Mobile Website là nhẹ để nó nhận ít băng thông hơn và giúp nó tải nhanh hơn.
Home Page của Mobile Website đóng vai trò quan trọng trong việc kết nối người sử dụng với nội dung mà họ tìm kiếm. Vì thế, các Mobile Website tốt đảm bảo các đường link quan trọng nhất được hiển thị trên Home Page mà chúng đủ để nhìn thấy.

Thứ hạng của Website phụ thuộc vào việc người sử dụng thân thiện nó tới mức như thế nào. Bạn có thể theo các Guideline sau để thiết kế một Mobile Website thân thiện nhất.

Tối ưu hóa site cho Mobile

Nếu site của bạn đã được tối ưu hóa cho các Search Engine, thì khi đó nó sẽ không quá khó khăn để tối ưu hóa nó cho các thiết bị Mobile. Chúng ta chia thành 3 bước:

Bước 1: Chọn một Mobile Configuration

Bước 2: Thông báo Search Engine

Bước 3: Tránh các lỗi thông thường

Chọn một Mobile Configuration

Có ba Mobile Configuration – Cấu hình điện thoại di động khác nhau để bạn chọn:

Loại 1: Responsive Web Design (Thiết kế web có độ phản hồi cao)

Loại 2: Dynamic Serving (Xử lý động trên cùng một URL cho cả hai phiên bản)

Loại 3: Separate URLs (Hai Website có đường dẫn riêng biệt)

Mỗi loại có các lợi thế và bất lợi riêng. Google đề nghị sử dụng thiết kế có độ phản hồi cao, tuy nhiên, nó hỗ trợ cả 3 cấu hình trên. Bảng sau giới thiệu cách Cấu hình Mobile ảnh hưởng tới URL và HTML code của bạn.

Mobile Configuration	URL	HTML
Responsive Web Design	Cùng một URL	Cùng HTML
Dynamic Serving	Cùng một URL	Các HTML khác nhau
Separate URLs	Khác URL	Các HTML khác nhau

Thiết kế Web có tính phản hồi cao

Google đề nghị sử dụng thiết kế có độ phản hồi cao bởi vì nó là cấu hình Mobile đơn giản nhất và rất dễ dàng thực hiện. Nó phục vụ cùng một HTML code trên cùng một URL, tuy nhiên nó điều chỉnh màn hình hiển thị dựa trên kích cỡ màn hình của thiết bị di động.

Dynamic Serving

Dynamic Serving là một kiểu cấu hình Mobile mà địa chỉ URL của Website không thay đổi, nhưng nó phục vụ nội dung HTML khác nhau khi được truy cập từ một thiết bị Mobile.

Khi nội dung của bạn được phục vụ động từ Server, đảm bảo bạn thông báo Google rằng nội dung nó đang Crawling có thể trông khác trên các thiết bị Mobile. Nhược điểm lớn nhất của cách tiếp cận này là bạn sẽ phải thực hiện việc xử lý bổ sung trên nội dung của bạn tại Server trước khi phục vụ nó tới người dùng. Hướng tiếp cận này đặt trình tải không cần thiết trên Server và làm cho nó chậm hơn.

Separate URLs

Khi bạn duy trì hai URL khác nhau – một cho người sử dụng Mobile và một cho người sử dụng Destop – đảm bảo bạn thông báo cho Google một cách dứt khoát khi tới Server với mỗi phiên bản. Google không đề nghị sử dụng Separate URLs bởi vì nó có thể phát hiện tự động rằng các trang Mobile là khác với các trang Destop.

Hướng tiếp cận này không thực tế khi bạn có một Website lớn bởi vì duy trì hai phiên bản của cùng một Website sẽ yêu cầu lượng thời gian và tiền bạc gấp đôi. Tại cùng một thời điểm, bạn không thể tránh khỏi các sự không đồng nhất về nội dung trong khi duy trì hai phiên bản.

Từ quan điểm của SEO, mỗi URL thực hiện riêng rẽ. Vì thế, thứ hạng của Destop sẽ không bao giờ được nhập thêm vào thứ hạng Mobile và chúng sẽ luôn luôn được coi là hai Website riêng biệt. Chúng tôi không đề nghị duy trì URL khác nhau cho các phiên bản Mobile và Destop nếu bạn muốn nhận các lợi ích từ SEO.

Thông báo Search Engine

Đảm bảo Google và các Search Engine khác hiểu cấu hình Mobile của bạn. Điều quan trọng nhất trong tất cả, Google phải hiểu trang của bạn để mà nó có thể xếp hạng một cách chính xác. Cách bạn thông báo Google phụ thuộc vào cấu hình Mobile – Responsive Web Design, Dynamic Serving, hoặc Separate URLs.

Trong trường hợp site có một Responsive Web Design, các thuật toán của Google có thể hiểu nó một cách tự động mà không cần bạn phải thông báo cho Google. Khi bạn có một Responsive Web Design, bạn chỉ cần đảm bảo có thẻ meta sau trong header:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport quyết định cách trang web sẽ được hiển thị trên một thiết bị. Một site với Responsive Web Design có kích cỡ đa dạng dựa trên kích cỡ màn hình hiển thị. Khai báo một Viewport để mà Webpage hiển thị chính xác trên bất kỳ thiết bị nào.

Nếu Website của bạn là Dynamic Serving, đảm bảo bạn cho phép Google dò tìm cấu hình của bạn sử dụng một Vary Header.

Vary: User-Agent

Vary Header là quan trọng để nói cho các Search Engine rằng nội dung khác nhau sẽ được phục vụ khác nhau trên các thiết bị Destop và Mobile. Header này là thật sự quan trọng khi nội dung của bạn được phục vụ bởi bất cứ Cache System nào như Content Delivery Network và những hệ thống này sẽ sử dụng Header này trong khi phục vụ nội dung trên các thiết bị khác nhau.

Trong trường hợp bạn duy trì Separate URLs, ví dụ: example.com và m.example.com, thì bạn có thể thông báo Google bằng việc thêm một thẻ link đặc biệt rel=alternate trong phiên bản Destop và ngược lại như sau:

Desktop page should have following in its header:
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com" >
Mobile page should have following in its header:
<link rel="canonical" href="http://www.example.com" >

Tránh các lỗi thông thường cho Mobile SEO

Để tối ưu hóa Website của bạn cho các thiết bị Mobile, đảm bảo rằng bạn tránh các lỗi sau:

Tải trang Mobile chậm − Mạng Mobile là chậm hơn các mạng Internet không dây, vì thế nó là quan trọng để tìm cách làm thế nào tăng tốc độ tải trang trên Mobile. Nó là yếu tố xếp hạng quan trọng của Google. Sử dụng một công cụ Mobile SEO để tìm tốc độ tải trang của bạn. Google cung cấp một số các công cụ tốt mà bạn có thể sử dụng. Bạn truy cập link sau: https://www.google.com/webmasters/tools/mobile-friendly/
Đừng đóng khối (block) CSS và JavaScript − Google đề nghị sử dụng CSS và JavaScript nội tuyến cho các Website thân thiện Mobile để chúng có thể được tải cùng với nội dung. Vì thế nếu bạn không có nhiều CSS, thì bạn thử thay đổi nó trong chính thẻ đó; nhưng nếu bạn đang sử dụng nhiều CSS trong các File riêng rẽ, thì bạn thử bao gồm (include) nó tại phần cuối mà sẽ dừng block nội dung khác đang được tải. Quy tắc tương tự áp dụng với JavaScript, mà có thể được giữ trong chính trang đó hoặc được include tại phần cuối của trang. Nếu bạn có thể tránh được việc include tại phần đầu trang, thì sử dụng thuộc tính async trong khi include nó.

<script async type="text/javascript" src="jquery.js"></script>

Mobile Redirects − khi các mạng Mobile thường chậm thì việc quá nhiều sự điều hướng tới trang khác có thể ảnh hưởng tới tốc độ tải trang. Nếu bạn đang duy trì nhiều URL, đảm bảo rằng tất cả điểm link tới các trang liên quan. Trong trường hợp bạn duy trì nhiều URL và nhận ra một người sử dụng đang thăm một trang Destop từ một thiết bị Mobile và bạn có một trang Mobile tương đương tại một URL khác, thì khi đó Redirect người sử dụng tới URL đó thay vì hiển thị một 404 Error.
Hình ảnh nặng (Heavy Images) − Làm tăng thời gian tải, tuy nhiên chúng ta không thể từ bỏ tất cả chúng khi chúng hữu ích và hiệu quả. Vì thế bạn nên duy trì một sự cân bằng tốt giữa văn bản và hình ảnh nặng. Sử dụng một công cụ tốt để tối ưu hóa các hình ảnh của bạn và lưu giữ chúng ở độ phân giải thấp.
Tránh Plug-ins và Pop-ups − Plug-ins như Flash và Java có thể không có sẵn trên thiết bị Mobile người sử dụng. Luôn luôn bảo đảm bạn không có bất kỳ nội dung không Play được trên trang Mobile. Tránh sử dụng Pop-ups trên các trang Mobile bởi vì nó trở nên khá lóng ngóng để đóng các Pop-ups trên một Mobile.

Trong khi tạo một Mobile, luôn luôn ghi nhớ trong đầu rằng người sử dụng có khoảng không gian giới hạn để làm việc trên đó. Vì thế, bạn cần tạo các Title, URL, và các thẻ Meta miêu tả càng súc tích càng tốt – tất nhiên là không làm tổn hại đến bản chất hoặc nội dung thông tin.

Các công cụ hữu ích cho Mobile SEO

Dưới đây liệt kê một số công cụ hữu ích mà bạn có thể sử dụng để tìm ra site bạn thân thiện với Mobile như thế nào:

Google Webmaster Tools − Sử dụng các công cụ và công nghệ Google có sẵn để hiểu những gì nên được sử dụng và cần tránh trong khi thiết kế Destop và Mobile Website.
Mobile Emulator − Nó cho bạn thấy cách site của bạn xuất hiện trên các thiết bị Mobile có kích cỡ đa dạng.
Moz Local − Sử dụng công cụ này để đảm bảo rằng SEO nội bộ là trong trình tự.
Công cụ kiểm tra Responsive Web Design − Sử dụng công cụ này để thấy cách site có độ phản hồi cao trông như thế nào trên các thiết bị Mobile với các kích cỡ mà hình tiêu chuẩn khác nhau.
Screaming Frog − Công cụ hữu ích này cho phép bạn phân tích site và tất cả các Redirect.
User Agent Switcher − Nó là một tính năng bổ sung của Firefox mà bạn có thể sử dụng để tìm xem site của bạn trông như thế nào khi được truy cập từ User Agent khác.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Các bài học SEO phổ biến khác tại VietJack: