Với chỉ dưới 30% lưu lượng truy cập đến từ thiết bị di động (và một số lĩnh vực có tỷ lệ lưu lượng truy cập di động thậm chí còn cao hơn). Việc làm cho trang web của bạn thân thiện seo trên thiết bị di động là một nỗ lực đáng giá và có thể đẩy bạn lên trước các đối thủ cạnh tranh. Vấn đề duy nhất là: làm thế nào? Bạn bắt đầu từ đâu? Điều gì làm cho một trang web tốt cho SEO trên thiết bị di động?
Các bài viết liên quan:
Lựa chọn cách tiếp cận phù hợp
Có một số cách tiếp cận để tạo sự hiện diện trên web thân thiện với thiết bị di động. Chúng thường được chia thành ba ‘loại’, mỗi loại cung cấp trải nghiệm khác nhau cho người dùng di động:
- Đáp ứng: trang – URL, HTML, hình ảnh, mọi thứ – vẫn giữ nguyên. Nhưng CSS đưa ra các quy tắc khác nhau dựa trên chiều rộng của trình duyệt.
- RESS / Thích ứng / Cung cấp động: URL vẫn giữ nguyên. Nhưng máy chủ gửi HTML và CSS khác nhau dựa trên loại thiết bị đang yêu cầu trang.
- Trang web dành cho seo trên thiết bị di động riêng biệt: thường được lưu trữ trên tên miền phụ. Hoặc đôi khi là một thư mục con (ví dụ: www.domain.com/mobile ). Nhưng nó cũng có thể sử dụng các URL giống như trang dành cho máy tính để bàn. Và chỉ phân phát HTML khác nhau (được gọi là phân phát động) cho khách truy cập trên máy tính. Để bàn và thiết bị di động dựa trên tác nhân người dùng.
Lưu ý về điện thoại phổ thông
Các nguyên tắc này chủ yếu hướng tới việc tối ưu hóa trang web của bạn. Cho các lượt truy cập từ điện thoại thông minh.
Nếu bạn có phần trăm lưu lượng truy cập di động cao đến từ điện thoại phổ thông. Bạn cũng có thể muốn xem xét việc nhắm mục tiêu chúng. Đây có thể là sự cân nhắc lớn hơn đối với các trang web nhắm mục tiêu đến các khu vực địa lý bên ngoài Châu Âu và Bắc Mỹ. Vì tỷ lệ người dùng điện thoại thông minh so với người dùng điện thoại phổ thông trên các vùng địa lý có thể khác nhau đáng kể.
Tùy chọn cơ bản: sử dụng CMS phù hợp với bạn
Nếu bạn có ngân sách thấp hoặc nguồn lực hạn chế, bạn có thể muốn xem xét. Sử dụng hệ thống quản lý nội dung thân thiện với người dùng (CMS) như WordPress. Thiết kế đáp ứng có lẽ là lựa chọn tốt nhất của bạn ở đây, vì có rất nhiều CMS được thiết kế đáp ứng được tạo sẵn. Và thiết kế đáp ứng tốn ít công sức tạo nội dung nhất.
Dưới đây là một số đề xuất của chúng tôi về các chủ đề WordPress đáp ứng tốt và các dịch vụ CMS khác. Có rất nhiều tùy chọn khác có sẵn.
Nền tảng WordPress:
- Elegant Themes có một số chủ đề đáp ứng, giá ~ $ 69 / năm. Họ cung cấp các bản cập nhật và hỗ trợ đầy đủ. Bạn có thể gia hạn hàng năm.
- PressCoders : Chúng tôi đề xuất chủ đề Designfolio , bạn có thể tải xuống miễn phí (với một số hạn chế). Hoặc mua bản quyền đầy đủ với giá 79 đô la. Phiên bản trả phí bao gồm hỗ trợ đầy đủ.
- WooThemes tạo ra các chủ đề WordPress cao cấp tuyệt vời. Một số trong số chúng là miễn phí, hầu hết có giá khoảng $ 80 – $ 140. Tất cả đều sẵn sàng cho seo trên thiết bị di động và có khả năng tùy biến cao.
- Chủ đề đáp ứng từ CyberChimps là một lựa chọn tuyệt vời. Đặc biệt là đối với một trang cơ bản như trang web hoặc blog cá nhân.
Hoặc, đối với người dùng không phải WordPress:
SquareSpace có lẽ là một trong những giải pháp seo trên thiết bị di động WYSIWYG (What You See Is What You Get) tốt nhất tại thời điểm hiện tại và có giá từ $ 8 / tháng (cho dịch vụ cơ bản nhất).
Wix là một dịch vụ WYSIWYG khác và có giá rất hợp lý, khoảng $ 17 một tháng.
Nhưng nếu bạn đã sẵn sàng và có thể tự làm, hãy bắt đầu!
Khách truy cập trên thiết bị di động muốn xem phiên bản trang web của bạn có màu sắc, chủ đề. Và nội dung tương tự như trang web chính để họ có thể chắc chắn rằng họ đang ở đúng trang web. Nhưng họ mong đợi cấu trúc thực tế của trang sẽ khá khác biệt. Màn hình thực sự chỉ nên hiển thị một hoặc hai phần tử cùng một lúc. Thay vì vô số tùy chọn mà chúng tôi hiển thị cho khách truy cập máy tính để bàn cùng một lúc.
Tổ chức nội dung
Khuyến nghị: di động đầu tiên
Đầu tiên di động là một phong trào đang phát triển trong thế giới thiết kế . Ý tưởng cơ bản là các trang dành cho seo trên thiết bị di động nên được thiết kế trước. Sau đó mở rộng thành các trang dành cho máy tính bảng và máy tính để bàn. Không có gì bạn có thể đặt trên một trang dành cho thiết bị di động. Mà không thể tải trên phiên bản dành cho máy tính để bàn. Cách tiếp cận này đặc biệt hữu ích cho các trang web đáp ứng. Và được phân phát động, trong đó nội dung trên phiên bản dành cho thiết bị di động của trang. Phải giống với nội dung trên trang dành cho máy tính để bàn.
Thiết kế trang web dành cho thiết bị di động thứ hai
Nếu thiết kế Mobile First không phải là một lựa chọn, nhiệm vụ của bạn sẽ khó khăn hơn. Nhưng không phải là không thể.
Bắt đầu bằng cách tìm ra những yếu tố nào của trang máy tính để bàn cần có trên trang dành cho thiết bị di động:
- Bạn có thể thu thập dữ liệu người dùng thông qua các công cụ phân tích trang web tiêu chuẩn. Các công cụ tùy chỉnh như CrazyEgg và thử nghiệm UX. Hỏi những câu hỏi: Nội dung nào quan trọng đối với khách truy cập? Cái gì bị bỏ qua? Con đường điển hình mà khách truy cập đi là gì?
- Nhìn vào nội bộ, quá. Nếu bạn cần quảng cáo để hỗ trợ trang web của mình, rõ ràng bạn sẽ không xóa chúng chỉ. Vì bạn phát hiện ra rằng chúng đã bị bỏ qua trong các thử nghiệm người dùng của mình. Mặt khác, nếu trang web của bạn chủ yếu chạy trên các đăng ký. Nhưng bao gồm quảng cáo để kiếm thêm một chút lợi nhuận. Bạn có thể muốn xóa chúng khỏi phiên bản di động của trang web. Để tăng tốc thời gian tải trang và tối ưu hóa trải nghiệm người dùng.
- Chạy một số kiểm tra tốc độ để xác định các phần tử mất một lúc để tải. Tìm ra: Chúng có quan trọng đối với nội dung của trang không? Chúng có thể được giảm thiểu?
Ví dụ
Tất nhiên, họ là vua của seo trên thiết bị di động. Phiên bản dành cho máy tính để bàn của trang web có ba cột. Điều hướng bên, danh sách nội dung chính và danh sách phụ về các xu hướng và quảng cáo. Phiên bản dành cho thiết bị di động chuyển tất cả điều hướng lên đầu trang và chỉ hiển thị cột chính.
Amazon
Có lẽ là ví dụ điển hình nhất về trang thương mại điện tử di động. Các trang sản phẩm dành cho thiết bị di động của nó hiển thị các đoạn trích của tất cả thông tin. Mà phiên bản dành cho máy tính để bàn có, hạn chế số lượng nội dung. Mà điện thoại phải tải xuống nhưng vẫn cho phép khách truy cập vào tất cả thông tin họ mong đợi. Nội dung được ưu tiên để giúp bạn mua nhanh chóng. Bằng cách đặt nút mua ở trên cùng, sau đó là thông tin sản phẩm, sau đó là đánh giá.
Nordstrom
Một trong những trang web di động tốt hơn cho một công ty chủ yếu ngoại tuyến. Các trang sản phẩm bắt đầu với nhiều hình ảnh của sản phẩm mà khách truy cập có thể lướt qua. Sau đó chọn sản phẩm, rồi đánh giá. Mặc dù các bài đánh giá nằm bên dưới thông tin mua hàng. Nhưng có một liên kết đến chúng và phần tóm tắt ở trên cùng. Vì vậy khách truy cập trên thiết bị di động sẽ nhận được nhiều thông tin trong nháy mắt.
Khi bạn đã có ý tưởng về dòng chảy trực quan. Bạn có thể đưa ra các thiết kế ban đầu của mình cho màn hình di động và tìm hiểu sâu về thiết kế di động.
Mối quan tâm về thiết kế di động toàn cầu
Điều hướng trên màn hình nhỏ
Màn hình điện thoại di động quá nhỏ để có thể xem menu điều hướng lớn ngoài nội dung chính. Thay vì hiển thị điều hướng của trang web trên máy tính để bàn. Các tùy chọn điều hướng trên thiết bị di động nên được giảm thiểu.
Sự khác biệt về kích thước của điện thoại thông minh
Hầu hết các điện thoại thông minh đều hiển thị có chiều ngang từ 320px đến 400px mặc dù iPhone cũ chỉ có chiều ngang 240px. Nếu chúng được lật sang một bên, chúng có thể có chiều ngang lên đến 640px. Máy tính bảng có chiều ngang từ 480px đến 800px khi cầm như một cuốn sách. Nhưng chúng có nhiều khả năng được cầm như một chiếc tivi. Làm cho pixel tối đa của chúng có kích thước là 1280px.
Điều đó cung cấp cho bạn một phương sai khá rộng để thiết kế: 320px đến 1280px. Thay vì phục vụ tất cả mọi người , hãy tìm hiểu kích thước màn hình. Mà mọi người thường sử dụng trên trang web của bạn. Nếu bạn sử dụng phần mềm phân tích như Google Analytics. Bạn sẽ có thể dễ dàng tìm thấy dữ liệu này. Đây là ảnh chụp màn hình từ báo cáo Di động> Thiết bị, với ‘Độ phân giải màn hình’ được đặt làm thứ nguyên phụ.
Thiết kế cho cảm ứng
Các ngón tay không có khả năng di chuột hoặc nhấp chuột phải. Và chúng cần một khoảng trống tốt giữa các liên kết để đảm bảo rằng chúng không vô tình nhấn nhầm.
Cung cấp đủ không gian cho ngón tay
Ngón tay không chính xác như chuột. Các ngón tay che khuất những gì họ đang chạm, bạn không thể đưa ra bất kỳ dấu hiệu nào. Cho thấy họ đang di chuột qua tùy chọn phù hợp trước khi chạm. Và họ chạm vào một phần lớn hơn của màn hình so với chuột. Đảm bảo rằng bạn luôn có không gian ít nhất 28 x 28 pixel. Xung quanh các liên kết trên trang web của mình cho những người vụng về.
Đưa ra phản hồi khi màn hình được chạm vào
Với kết nối chậm hoặc bị hỏng, nhiều khách truy cập của bạn sẽ phải đợi một lúc. Để truy cập trang tiếp theo khi họ nhấn vào một liên kết hoặc nút. Cho họ biết rằng điện thoại đã ghi lại rằng họ đã nhấn vào nút bằng cách hiển thị thụt lề nút hoặc đánh dấu hộp được liên kết. Nếu không, khách truy cập của bạn sẽ nhấn vào màn hình của họ. Một cách tức giận và có thể kết thúc không đúng chỗ.
Sử dụng các nút
Các nút xác định rõ ràng nơi người dùng có thể hoặc không thể nhấp để kích hoạt liên kết. Vì, không giống như trên màn hình máy tính để bàn. Bạn không thể sử dụng bất kỳ tín hiệu nào để cho họ biết con chuột của họ. Đang di chuột qua khu vực bên phải, điều quan trọng hơn là xác định không gian có thể nhấp.
Thiết kế lại menu thả xuống
Chúng vẫn hoạt động trên thiết bị di động và có thể là một cách tuyệt vời để ẩn thông tin cho đến khi được yêu cầu. Nhưng chúng thường chỉ mở khi bạn di con trỏ chuột qua chúng. Menu thả xuống dành cho thiết bị di động phải được kích hoạt. Bằng một lần nhấn và menu sẽ hiển thị sự tách biệt rõ ràng giữa các tùy chọn.
Giảm thiểu việc nhập văn bản
Điện thoại di động nhập văn bản chậm hơn và cần có bàn phím ảo. Để làm cho màn hình có thể xem được lớn hơn một nửa. Cắt bỏ thông tin đầu vào không hoàn toàn cần thiết. Chia biểu mẫu thành nhiều trang chỉ chiếm một nửa màn hình. Với nút “tiếp theo” rõ ràng để khách truy cập không phải cuộn.
Sử dụng các tính năng dành riêng cho thiết bị di động
Sự khác biệt giữa các trang web chính và trang web dành cho thiết bị di động tạo thêm cơ hội. Ví dụ: bạn có thể làm cho tất cả các số điện thoại của mình trở thành nhấp để gọi. Và biến địa chỉ của bạn thành một liên kết để điều hướng.
Thiết kế cho các trang web đáp ứng
Đối với những người không quen với thiết kế đáp ứng. Bạn có thể phân phối cùng một mã HTML bất kể kích thước màn hình. Nhưng hãy sử dụng CSS để sắp xếp lại các phần tử đó dựa trên chiều rộng màn hình. Để tìm hiểu thêm, bạn có thể đọc bài viết bắt đầu tất cả. Hoặc đọc mô tả ngắn gọn, tập trung vào SEO trên SEOmoz .
Khi bạn bắt đầu thiết kế một trang web đáp ứng. Sẽ rất hấp dẫn để viết một bộ CSS cho một trang web di động. Một bộ CSS khác cho máy tính bảng. Hoặc máy tính nhỏ và một bộ CSS cuối cùng cho một màn hình máy tính lớn. Nhưng điểm quan trọng của thiết kế đáp ứng là làm cho nó phù hợp với tất cả các kích thước màn hình. Không chỉ những kích thước phổ biến nhất.
Thay đổi kích thước trang web – ví dụ
Nếu bạn đang xây dựng một trang web từ đầu. Hầu hết các nhà thiết kế khuyên bạn nên bắt đầu với một trang web dành cho thiết bị di động. Sau đó giãn cách các phần tử ra khi màn hình lớn hơn. Nhưng hầu hết mọi người đang cân nhắc thiết kế trang web dành cho thiết bị di động. Hiện đã có phiên bản dành cho máy tính để bàn của trang web của họ. Vì vậy chúng tôi đã cung cấp hướng dẫn về cách lấy trang web hiện tại của bạn và thu nhỏ nó lại.
Thu hẹp nội dung (tất cả các phần tử)
Khi chiều rộng của trang nhỏ hơn, tất cả các phần tử, ngoại trừ văn bản, cũng sẽ phải nhỏ lại. Để làm cho việc này tiến triển dần dần thay vì nhảy từ kích thước này sang kích thước khác. Hãy đặt chiều rộng của các đối tượng quan trọng nhất thành phần trăm kích thước màn hình.
Trong ví dụ này, chiều rộng của biểu ngữ phải luôn bằng 100% kích thước màn hình. Để ngăn biểu ngữ quá nhỏ, bạn cũng nên đặt chiều cao pixel tối thiểu cho nó. Sau đó bắt đầu phóng to hình ảnh hơn là thu nhỏ nó.
Văn bản phải luôn bằng 100% kích thước màn hình, trừ đi độ rộng của điều hướng trái và phải. Văn bản sẽ dễ dàng tự làm lại để vừa với ô mà bạn đã đưa cho nó. Vì vậy đây sẽ là một nhiệm vụ khá đơn giản.
Sắp xếp lại nội dung (văn bản hoặc biểu ngữ)
Khi bạn bắt đầu thu nhỏ các đối tượng, chúng sẽ khó hiểu hơn. Đối với một số yếu tố, chẳng hạn như văn bản nổi trên biểu ngữ. Chúng sẽ dễ hiểu hơn khi tự chúng xuất hiện trên màn hình nhỏ hơn. Trong ví dụ này, văn bản nổi trên biểu ngữ ở kích thước màn hình lớn sẽ được di chuyển xuống dưới biểu ngữ khi nó hết chỗ.
Sắp xếp lại nội dung (điều hướng bên trái)
Thông thường, bạn sẽ muốn các tùy chọn trong điều hướng bên trái. Được hiển thị nhiều cho khách truy cập trên thiết bị di động. Di chuyển điều hướng đến cuối nội dung để khi khách đã đọc trang. Các tùy chọn tự nhiên tiếp theo sẽ hiển nhiên.
Xóa nội dung (điều hướng bên phải)
Trước tiên, chúng tôi đã bắt đầu trang bị lại những phần quan trọng nhất vì một lý do. Bạn sẽ thấy một số nội dung sẽ không dễ dàng phù hợp với thiết kế dành cho thiết bị di động. Nếu những đối tượng ít quan trọng nhất không thể tìm được chỗ đứng. Thì hãy tự hỏi bản thân rằng khán giả di động có thực sự cần xem điều này không?
Nếu câu trả lời là không, bạn có thể đặt nó để hiển thị: không hiển thị một khi chiều rộng màn hình quá nhỏ để chứa nó.
Lưu ý: Khi bạn cắt một thứ gì đó ra khỏi trang web dành cho thiết bị di động của mình. Bạn cũng nên tự hỏi mình, bạn thậm chí có cần nó trên trang web dành cho máy tính để bàn không? Đây cũng có thể là cơ hội tốt để bạn dọn dẹp trang web chính của mình.
Khi bạn đã thực hiện tất cả những điều chỉnh này, trang web sẽ có thể thu nhỏ lại để trông giống như sau:
Di chuyển nội dung vào một bố cục cột duy nhất
Các trang web có nội dung dạng dài có thể đơn giản được thu hẹp và kéo dài để phù hợp với nội dung. Mặt khác, các trang web thương mại điện tử có xu hướng có nhiều phần nội dung được phân tách trực quan. Thay vì thông qua chuyển đổi văn bản. Có một số tùy chọn thiết kế:
Sắp xếp lại nội dung thành một cột
Nếu nội dung được phân tách trên trang web chính vẫn dễ dàng chuyển từ phần này sang phần tiếp theo. Chỉ cần xếp chồng nó theo đúng thứ tự. Sử dụng các dấu hiệu trực quan để cho người đọc thấy nơi bắt đầu và kết thúc của một phần. Đối với các trang đặc biệt có nhiều nội dung, bạn nên bao gồm điều hướng ở trên cùng. Để khách truy cập chuyển đến phần mà họ quan tâm nhất.
Ẩn nội dung khi tải
Cân nhắc sử dụng bố cục accordion tương tác, ẩn một số nội dung khi tải dưới tiêu đề, trông giống như các nút. Ví dụ: đây là cách chúng tôi hiển thị Lịch trình Hội nghị của mình qua điện thoại di động. Khách truy cập có thể nhấn để mở rộng các phần để xem thêm chi tiết:
Với một trong hai phương pháp, hãy kiểm tra thứ tự của nội dung để xem nội dung nào chuyển đổi tốt nhất. Bạn có thể ngạc nhiên. Về nội dung có sức thuyết phục nhất đối với khách truy cập trên thiết bị di động.
Nếu bạn thấy rằng nội dung cần được xóa khỏi phiên bản di động của trang web. Hoặc nên được đưa vào phiên bản di động của trang web. Nhưng không phải phiên bản dành cho máy tính để bàn. Bạn có thể viết nội dung đó vào mã HTML nhưng ẩn nó đối với loại thiết bị không nên ‘không thấy nó. Tuy nhiên, nếu đây là một lượng dữ liệu đáng kể. Hãy xem xét một trang web riêng dành cho thiết bị di động .
Thiết kế cho một trang web di động riêng biệt hoặc trang web được phân phát động
Một trang web dành cho thiết bị di động riêng biệt có HTML riêng. Vì vậy nó không bị ràng buộc với việc trông giống trang web chính. Hoặc thậm chí có cùng một tập hợp nội dung hoặc các trang.
Bao gồm hầu hết nội dung từ trang web chính
Bạn có thể cho rằng một số sản phẩm hoặc các trang khác sẽ không cần thiết kế thân thiện với thiết bị di động. Nhưng nói chung, tốt nhất bạn nên bao gồm càng nhiều nội dung trên màn hình càng tốt dưới một số hình thức. Chẳng hạn, có thể khó để tưởng tượng một kịch bản. Trong đó ai đó sẽ hoàn tất việc mua nhẫn kim cương từ điện thoại di động của họ. Nhưng điều đó không có nghĩa là mọi người sẽ không muốn duyệt. Chế tạo và chia sẻ chiếc nhẫn hoàn hảo của họ trên đi làm hàng ngày.
Họ cũng có thể quan tâm đến việc so sánh giá, đọc các bài đánh giá hoặc đọc bản sao tiếp thị. Để có những lựa chọn hàng đầu. Một cách tốt, trực quan để cho phép họ nghiên cứu việc mua nhẫn kim cương trên điện thoại di động của họ. Chỉ cần có trải nghiệm mua sắm tương tự như những gì bạn có trên trang web dành cho máy tính để bàn của mình.
Tóm lại: ngay cả khi chuyển đổi quan trọng không xảy ra trên điện thoại di động. Bạn cũng không nên cho rằng khách truy cập không quan tâm. Đến cùng một nội dung được lưu trữ trên trang web chính.
Một lưu ý về máy tính bảng
Các khuyến nghị chung cho máy tính bảng là bạn phục vụ họ các trang web máy tính để bàn. Chứ không phải là trang web di động riêng của bạn. Điều này là do kích thước màn hình của hầu hết các máy tính bảng gần với kích thước của máy tính xách tay hơn là điện thoại thông minh. Và một trang web dành riêng cho thiết bị di động sẽ không phù hợp. Tuy nhiên, hướng dẫn này có thể thay đổi vì chúng tôi thấy có nhiều sự thay đổi hơn về kích thước máy tính bảng.
Gợi ý liên quan:
- SEO trên WordPress
- Dịch vụ tối ưu hóa Website
- Social Backlink
- Thuật toán của Google
- Công cụ SEOQuake
Cân nhắc phát triển
Các trang web dành cho thiết bị di động phải được xây dựng cho điện thoại di động. Điều này mang lại nhiều thách thức phát triển riêng:
Kết nối không liên tục
Giả sử rằng khách truy cập sẽ có một kết nối chắp vá và làm cho trang web của bạn dễ tải nhất có thể. Nén hình ảnh và mã, đệm video. Và nếu trang của bạn đặc biệt dài – tải hình ảnh xuống trang không đồng bộ. Bằng cách sử dụng JavaScript để trang có thể hiển thị nhanh nhất có thể. Ngay cả khi một số phần tử mất nhiều thời gian hơn. Google có một công cụ tiện dụng sẽ cung cấp cho bạn các đề xuất cụ thể để tăng tốc thời gian tải trang.
Các thiết bị và / hoặc trình duyệt web khác nhau
Kiểm tra trang web của bạn trên các thiết bị và trình duyệt khác nhau. Những gì trông có vẻ cân đối hoàn hảo trên iPhone có thể trông kỳ quặc về một phía trên Samsung Galaxy rộng hơn. Để biết một số bảng tham chiếu hiển thị độ phân giải màn hình cho các thiết bị di động khác nhau.
Vấn đề đa nền tảng
Đồng bộ thông tin khách hàng trên các nền tảng. Người mua hàng đã đăng nhập có thể đặt thứ gì đó vào giỏ hàng của mình trên trang web. Dành cho thiết bị di động và thanh toán sau trên PC để bàn. (Việc thực hiện điều này sẽ phụ thuộc vào cách thiết lập phần phụ trợ của nền tảng trang web của bạn.)
Tránh nội dung web không được hỗ trợ
Cụ thể: Flash. Flash được hỗ trợ bởi hầu hết các trình duyệt máy tính để bàn (lưu IE 10 trong Metro của Windows 8). Và có phần hoạt động trong các trình duyệt Android. Nhưng điện thoại Windows và iPhone không thể chạy được. Lý tưởng nhất, HTML5 nên là một sự thay thế tốt. Bạn cũng có thể sử dụng một phương pháp được gọi là cải tiến liên tục. Xây dựng một trang web có thể được hiển thị tốt bởi tất cả các trình duyệt. Sau đó thêm vào các hiệu ứng Flash và các lớp kỹ thuật nâng cao khác cho các trình duyệt có thể sử dụng chúng.
Phát triển thân thiện với màn hình cảm ứng
Trên màn hình cảm ứng, bạn không thể sử dụng trình đơn thả xuống chỉ hoạt động khi khách truy cập di chuột qua điều hướng. Và bạn không thể đặt mô tả duy nhất về liên kết hoặc hình ảnh trong văn bản ‘alt’.
Xây dựng theo kích thước màn hình
Khi bạn bắt đầu chuyển các thiết kế của mình thành các trang web thực tế. Bạn muốn đảm bảo rằng chúng phù hợp với các thiết bị được sử dụng phổ biến nhất hiện có. Biểu đồ này từ StatCounter cho thấy 14 độ phân giải màn hình di động hàng đầu trong năm 2012 (trên toàn thế giới):
Tuy nhiên, bạn nên thiết kế của mình dựa trên các thiết bị phổ biến nhất được sử dụng để truy cập trang web của bạn. Bởi vì điều này sẽ khác nhau đối với từng trang web. Nó có thể hữu ích khi liệt kê các loại độ phân giải màn hình phổ biến nhất để truy cập trang web của bạn. Và phần trăm tổng số lượt truy cập của bạn từ mỗi loại.
Dựa trên mẫu dữ liệu lưu lượng truy cập di động của khách hàng của chúng tôi. Đây là ví dụ về danh sách đó có thể trông như thế nào:
Danh sách này chiếm khoảng 90% độ phân giải của thiết bị (thực tế có hàng nghìn tùy chọn). Tuy nhiên, các độ phân giải khác thường có chiều rộng tương tự. Vì vậy việc kiểm tra các kích thước này là đủ.
Danh sách đầy đủ các độ phân giải màn hình điện thoại di động khác nhau:
- i-Skool
- CSS3HTML5Help.com
Hình ảnh
Hình ảnh thường là tệp lớn nhất mà trình duyệt phải tải để hiển thị một trang (trừ khi bạn có quá nhiều mã). Đảm bảo rằng bạn đã nén tất cả các hình ảnh bạn đặt trên trang web. Dành cho thiết bị di động của mình nhiều nhất có thể. Có một số công cụ miễn phí để nén hình ảnh. Chúng tôi khuyên bạn nên sử dụng smush.it .
Nếu bạn có nhiều hình ảnh nhỏ trên một trang, đặc biệt là dưới dạng các biểu tượng điều hướng, hãy sử dụng các hình ảnh CSS . Hình ảnh CSS sprites là một hình ảnh duy nhất là sự kết hợp của nhiều hình ảnh trên trang. Bạn có thể chia chúng ra và đặt chúng bằng CSS. Các trình duyệt phải thực hiện cuộc gọi cho mỗi hình ảnh và việc sử dụng sprites cho phép họ chỉ thực hiện cuộc gọi đó một lần.
Đặt câu hỏi về sự cần thiết của hình ảnh. Nền phải là một bức tranh, hay nó có thể là một mẫu lặp lại? Tiêu đề phải là hình ảnh hay có thể là văn bản? Bạn sẽ thấy rằng nhiều trang trông không hoàn chỉnh mà không có hình ảnh trên máy tính để bàn trông hoàn toàn ổn. Nếu không có những hình ảnh đó trên phiên bản dành cho thiết bị di động.
Đây là tất cả những cân nhắc chung áp dụng cho cả ba loại trang web. Bây giờ đã đến lúc xem xét một số đề xuất khác, dựa trên cách tiếp cận bạn đang sử dụng.
Phát triển thiết kế đáp ứng
Khi bạn đã thiết kế xong (đã thảo luận trong phần trước), bạn sẽ cần phải thay đổi kích thước. Và di chuyển từng phần tử thông qua CSS, dựa trên chiều rộng màn hình của thiết bị xem.
Thay đổi CSS theo chiều rộng màn hình thông qua các truy vấn phương tiện
Nhờ giới thiệu các truy vấn phương tiện của W3C trong CSS3. Bạn có thể áp dụng các kiểu dựa trên chiều rộng màn hình với mã sau:
@media screen
and (min-width : XXXpx)
and (max-width : XXXpx)
and (orientation : landscape/portrait)
[elements that you want to follow this style] {*/ Add your styles here */
}
Không nhất thiết phải bao gồm tối thiểu, tối đa và định hướng mọi lúc, chỉ cần sử dụng những gì bạn cần. Ví dụ: nếu bạn muốn một số văn bản nổi trên hình ảnh. Cho đến khi màn hình có chiều ngang 500px, hãy tạo mã:
@media screen
and (min-width : 500px)
.bannertext {
float : right;
}
Miễn là trình duyệt của thiết bị có chiều ngang ít nhất 500 pixel, văn bản sẽ nổi sang bên phải. Nếu trình duyệt nhỏ hơn bất kỳ trình duyệt nào, kiểu này sẽ không được áp dụng. Cách tốt nhất là khi thay đổi kích thước màn hình để tập trung vào một phần tử tại một thời điểm. Và xác định “điểm ngắt” – điểm mà phần tử trông không còn được thiết kế đẹp nữa – và thay đổi CSS ở đó.
Viewport
Truy vấn phương tiện sẽ hoạt động giả sử trình duyệt di động tải trang web. Như thể nó là một cửa sổ rất nhỏ trên màn hình máy tính để bàn. Nhưng nhiều trình duyệt di động cố gắng vừa với toàn bộ trang web trên màn hình của điện thoại. Giả định rằng khách truy cập muốn xem toàn bộ nội dung và phóng to phần họ quan tâm nhất. Để thiết kế đáp ứng hoạt động trên Safari của iPhone và / hoặc Firefox, Android. Hoặc Opera của bất kỳ điện thoại nào, hãy đặt điều này vào tiêu đề:
<meta name=viewport content=”width=device-width, initial-scale=1″>
Điều này cũng có thể được thực hiện trong CSS, mặc dù đây là một tùy chọn mới hơn và không được hỗ trợ trên nhiều trình duyệt:
@-o-viewport {
width : device – width ;
}
“Viewport” là chiều rộng của màn hình hiển thị trên bất kỳ thiết bị nào. Đặt chiều rộng của khung nhìn bằng chiều rộng pixel thực tế của màn hình. Sẽ cho phép các truy vấn phương tiện thiết kế đáp ứng tự đặt một cách thích hợp.
Giảm toàn bộ trang web xuống
Khi trang web của bạn đáp ứng, có nhiều khả năng bạn sẽ thấy thời gian tải trên thiết bị di động lâu hơn đáng kể so với máy tính để bàn. Để làm cho thời gian tải trên thiết bị di động có thể chịu được.
Thu nhỏ kích thước hình ảnh
Hình ảnh chiếm nhiều băng thông hơn bất kỳ phần tử nào khác trên trang web. Luôn nén hình ảnh và làm theo các bước của Smashing Magazine. Để tìm ra cách tốt nhất để chọn giải pháp hình ảnh đáp ứng .
Hợp nhất CSS và JavaScript
Việc tạo một tệp JavaScript hoặc CSS mới theo phần tử là điều thường thấy. Ví dụ: bạn có thể có một tệp CSS định dạng tiêu đề và một tệp khác cho kiểu nền / kiểu chung của tất cả các trang. Tuy nhiên, cả hai đều áp dụng cho cùng một trang. Vì vậy sẽ hiệu quả hơn nếu kết hợp chúng thành một tệp “tất cả”.
Giảm thiểu CSS và JavaScript
Ngoài việc hợp nhất các tệp của bạn, hãy nén chúng bằng cách loại bỏ tất cả các ngắt dòng. Và khoảng cách để tăng tốc thời gian tải hơn nữa. Bạn có thể thực hiện việc này theo cách thủ công hoặc sử dụng bất kỳ công cụ nào trên mạng.
Hạn chế sử dụng thư viện
Có thể có một hoặc hai lệnh mà bạn muốn sử dụng từ một thư viện JavaScript nhất định; nhưng điều đó có làm cho nó đáng để tải toàn bộ thư viện không? Hãy cẩn thận về những thư viện bạn tải và số lượng bạn thực sự đang sử dụng chúng. Nó có thể hiệu quả hơn nếu không có.
Phát triển cho các trang web di động riêng biệt
Nếu trang web dành cho thiết bị di động của bạn có cùng một tập hợp các trang với trang web trên máy tính để bàn. Bạn có thể chọn sử dụng một URL duy nhất cho cả hai. Nhưng phân phát nội dung phù hợp một cách động dựa trên tác nhân người dùng. Nếu bạn muốn có một trang web dành cho thiết bị di động hoàn toàn riêng biệt với các URL khác nhau. Sẽ mất thêm một chút công việc để gắn kết mọi thứ lại với nhau, nhưng cuối cùng thì công cụ tìm kiếm cũng sẽ dễ hiểu.
Tự động phân phát nội dung trên một URL
Kiểm tra Tác nhân Người dùng Kiểm tra để đảm bảo rằng trình thu thập thông tin của công cụ tìm kiếm trên điện thoại di động có thể tìm thấy trang web của bạn. Và bạn có thể xác định chính xác các tác nhân người dùng. Không cung cấp nội dung cụ thể cho Googlebot-Mobile – điều này giống như kỹ thuật che giấu. Tác nhân người dùng Googlebot-Mobile bắt chước iPhone. Vì vậy, miễn là trang web của bạn được triển khai tính năng phát hiện điện thoại thông minh bình thường thì sẽ ổn. Bạn có thể triển khai điều này bằng ngôn ngữ phía máy chủ ( chẳng hạn như PHP ).
Sử dụng Tiêu đề Vary-HTTP để cho Googlebot và Googlebot-Mobile. Biết rằng tác nhân người dùng di động được cung cấp một phiên bản khác.
Cân nhắc phát triển cho các trang web sử dụng các URL khác nhau
Phát hiện tác nhân người dùng
Khi khách truy cập trên thiết bị di động đến phiên bản máy tính để bàn của trang web của bạn. Bạn sẽ cần phát hiện thiết bị của họ và chuyển hướng họ đến URL di động. Bạn có thể sử dụng ngôn ngữ phía máy chủ như PHP để phát hiện tác nhân người dùng. Và chuyển hướng khách truy cập trên thiết bị di động đến phiên bản chính xác của trang web bằng cách thay đổi yêu cầu HTTP.
Sử dụng chuyển hướng
Khi bạn có một trang web riêng dành cho thiết bị di động. Chuyển hướng phải được triển khai trên cả phiên bản dành cho thiết bị di động. Và máy tính để bàn để đảm bảo rằng khách truy cập được đưa đến phiên bản thích hợp nhất của trang web. Nếu bạn không có mối tương quan 1-1 giữa các trang trên máy tính để bàn. Và các trang trên thiết bị di động, bạn nên chuyển hướng đến các tùy chọn có liên quan nhất.
Vì vậy, ví dụ: nếu trang web trên máy tính để bàn có các trang việc làm riêng lẻ nhưng trang web trên điện thoại di động liệt kê tất cả chúng trên một trang, bạn có thể chuyển hướng các trang riêng lẻ đến trang việc làm trung tâm đó, thay vì đến trang chủ trên thiết bị di động. Tuy nhiên, nếu không có trang nào về việc làm trên phiên bản dành cho thiết bị di động, hãy xem xét chuyển hướng người dùng di động đến một trang giải thích điều này và đề nghị đưa người dùng di động đến phiên bản dành cho máy tính để bàn. Ngoài ra, bạn có thể bỏ qua việc sử dụng chuyển hướng trên URL đó và người dùng thiết bị di động sẽ chỉ được cung cấp trang trên máy tính để bàn.
Một số mẹo để thiết lập chuyển hướng chính xác
Nếu có thể, hãy sử dụng chuyển hướng 301 hoặc 302 phía máy chủ, thay vì Javascript. Chuyển hướng Javascript sẽ gây ra độ trễ và thời gian tải lâu hơn.
Chuyển hướng khách truy cập trên thiết bị di động đến trang dành cho máy tính để bàn đến trang có liên quan của phiên bản dành cho thiết bị di động. Và chuyển hướng khách truy cập trên máy tính để bàn đến trang dành cho thiết bị di động sang phiên bản dành cho máy tính để bàn. (Điều này có thể thay đổi nếu phiên bản dành cho thiết bị di động và máy tính để bàn của bạn khác nhau đáng kể. Xem ở trên.)
Bao gồm tùy chọn ghi đè chuyển hướng (ví dụ: “Xem phiên bản dành cho máy tính để bàn”). Và đảm bảo rằng tùy chọn của người dùng được ghi nhớ (bạn có thể sử dụng cookie cho việc này. Nhưng hãy đảm bảo chúng không hết hạn quá nhanh).
Sơ đồ trang web XML dành cho thiết bị di động
Để giúp các công cụ tìm kiếm tìm và hiểu trang web trên điện thoại di động của bạn. Phương pháp hay nhất tiêu chuẩn là tạo một sơ đồ trang web XML dành riêng cho thiết bị di động của tất cả các URL di động của bạn. Và gửi nó tới Google và Bing thông qua các giao diện Công cụ quản trị trang web tương ứng của chúng. Google đưa ra một ví dụ về nó sẽ trông như thế nào ở đây.
Đảm bảo rằng sơ đồ trang web cập nhật tự động khi bạn thêm các trang mới vào trang web dành cho thiết bị di động của mình. Một cách dễ dàng để tạo sơ đồ trang web của bạn là chỉ cần sử dụng Trình tạo sơ đồ trang web của Google (hiện đang trong giai đoạn thử nghiệm). Công cụ này cũng tự động phát hiện các bản cập nhật.
Thẻ Rel = “Canonical”
Khi bạn xây dựng một trang web di động riêng biệt, về mặt kỹ thuật, bạn đang xây dựng các trang trùng lặp. Để tránh các vấn đề về nội dung trùng lặp. Hãy xác nhận rằng phiên bản trang web dành cho thiết bị di động. Và máy tính để bàn có (gần như) nội dung trùng lặp với phiên bản di động của thẻ rel = ”canonical”. Điều này có nghĩa là chỉ phiên bản “chuẩn” của trang mới hiển thị trong kết quả tìm kiếm. Nhưng chuyển hướng tác nhân người dùng của bạn sẽ đưa khách truy cập trên thiết bị di động đến nơi họ cần đến.
Các thẻ hợp quy trỏ từ một trang trùng lặp đến trang gốc. Giả sử rằng bạn muốn phiên bản máy tính để bàn của trang web là phiên bản chuẩn. Thì trang web dành cho thiết bị di động phải có thẻ này trong tiêu đề:
<link rel=”canonical” href=”http://www.example.com/page-1″ >
Tích hợp đa kênh / nền tảng
Điều quan trọng là đảm bảo rằng trang web của bạn hoạt động tốt như nhau trên nhiều kênh, nền tảng và / hoặc thiết bị. Cải tiến liên tục và đồng bộ hóa thiết bị chéo cung cấp hai cách bổ sung để thực hiện điều này.
Cải tiến liên tục cho một trang web di động riêng biệt tương tự như khái niệm ‘thiết bị di động đầu tiên’ cho thiết kế đáp ứng. Bạn bắt đầu với trình duyệt / thiết bị hạn chế cơ bản nhất và HTML ngữ nghĩa. Và xây dựng từ đó theo từng lớp. Ví dụ: bạn có thể xây dựng cốt lõi của một trang web bằng HTML chuẩn. Nhưng hãy thêm các phần tử HTML5 bổ sung cho các trình duyệt hỗ trợ nó. Bài viết này từ Tạp chí Smashing sẽ hướng dẫn bạn quá trình . Tuy nhiên, trước khi bạn đầu tư vào các công nghệ mới. Hãy kiểm tra số liệu phân tích của bạn để đảm bảo rằng khách truy cập của bạn sử dụng các thiết bị có thể diễn giải mã bổ sung của bạn.
Danh sách đầy đủ các độ phân giải màn hình điện thoại di động khác nhau
- i-Skool
- CSS3HTML5Help.com
Đồng bộ hóa thiết bị chéo
Nếu trang web của bạn bao gồm tùy chọn đăng nhập của người dùng. Bạn nên đảm bảo rằng bạn đang theo dõi và đồng bộ hóa tài khoản của người dùng cá nhân trên các thiết bị để đồng bộ hóa giỏ mua sắm, mục yêu thích, danh sách mong muốn, v.v. Việc triển khai điều này sẽ phụ thuộc vào cách phụ trợ của trang web của bạn đã thiết lập.
Kích thước màn hình và sử dụng “chế độ xem”
Nếu bạn thiết kế trang web trên điện thoại di động của mình có chiều ngang 320px và ai đó truy cập trang web trên điện thoại chỉ có chiều ngang 240px, họ sẽ chỉ nhìn thấy 75% chiều rộng trang. May mắn thay, thẻ khung nhìn cho phép bạn yêu cầu tất cả các thiết bị thay đổi kích thước trang theo chiều rộng của trình duyệt.
Hầu hết các trình duyệt đều hỗ trợ thẻ chế độ xem meta HTML. Để triển khai thẻ này, hãy bao gồm văn bản này trong mỗi trang:
<meta name=’viewport’ content=’width=device-width’ />
Cũng có thể chỉ ra chiều rộng dưới dạng số pixel đã đặt, nhưng điều này không được khuyến khích. Bằng cách sử dụng ‘chiều rộng thiết bị’ thay vì chỉ định số lượng pixel. Bạn cho phép tính toán lại dựa trên chiều rộng của màn hình. Ví dụ: nếu người dùng nghiêng điện thoại sang một bên. Trang có thể thay đổi kích thước để phù hợp với chiều rộng mới.
Tuy nhiên, khi trang thay đổi kích thước, nội dung trên trang cũng sẽ thay đổi kích thước trừ khi bạn tắt thuộc tính CSS điều chỉnh kích thước văn bản:
html { -webkit-text-size-adjust : none; text-size-adjust : none; }
Sử dụng mã này sẽ đảm bảo rằng văn bản vẫn giữ nguyên kích thước bất kể hướng thiết bị. Thẻ meta này được hỗ trợ trong iOS, Android. Và các trình duyệt thông thường khác trên điện thoại thông minh. Gần đây, nó đã được đưa vào khai báo CSS @viewport. Nhưng tùy chọn này vẫn chưa được hỗ trợ rộng rãi bởi hầu hết các trình duyệt.
Một lưu ý về thử nghiệm
Đảm bảo rằng bạn kiểm tra thiết kế của mình trên các thiết bị và trình duyệt khác nhau. Có một số công cụ giả lập điện thoại di động có sẵn, cả miễn phí và trả phí. Chúng tôi đã tổng hợp một danh sách các công cụ miễn phí yêu thích của chúng tôi:
Kiểm tra phần tử, trên Chrome
Nhấp vào hình ảnh điện thoại ở góc trên bên phải của thanh phần tử kiểm tra để khởi chạy.
Trình phản hồi
Trình kiểm tra đáp ứng cung cấp một cách nhanh chóng để xem trang web của bạn trông như thế nào trên một số thiết bị di động phổ biến nhất. Cũng cho phép bạn kiểm tra một URL cục bộ (không chỉ các trang trực tuyến). Hãy thử bookmarklet!
Trình mô phỏng điện thoại di động
Trình mô phỏng di động cho phép bạn kiểm tra hiển thị trang web trên các điện thoại cụ thể. Nhiều chức năng hơn một chút, tôn trọng hầu hết các cài đặt của thiết bị bao gồm tác nhân người dùng, hành vi và tính năng. Bao gồm Android, Apple iOS, Windows và Blackberry.
Screenqueri.es
Trình giả lập di động cho phép bạn tự đặt kích thước pixel bằng cách kéo các đường viền. Bạn cũng có thể kiểm tra dựa trên một thiết bị cụ thể.
Một vài tài nguyên bổ sung
- W3 Validator for Mobile : Tài nguyên hữu ích để xác thực mã trang web dành cho thiết bị di động
- Danh sách trình giả lập dành riêng cho thiết bị: Tổng hợp trình mô phỏng và trình mô phỏng dành riêng cho thiết bị.
Kiểm tra tính thân thiện với thiết bị di động của Google , để đảm bảo bạn nhận được thẻ “ Thân thiện với thiết bị di động” đáng yêu đó trên các trang kết quả của công cụ tìm kiếm.
Kỹ thuật tối ưu hóa công cụ tìm kiếm
Khi bạn xây dựng trang web dành cho thiết bị di động của mình, bạn muốn đảm bảo rằng trình thu thập thông tin của công cụ tìm kiếm có thể đọc được nội dung. Google thúc đẩy xếp hạng trang web thân thiện với thiết bị di động và giảm hạng các trang web không thân thiện . May mắn thay, Google khá giỏi trong việc nhận diện các trang web thân thiện với thiết bị di động. Chúng tôi chỉ cần kiểm tra để đảm bảo rằng Google đã làm đúng với một số mẹo SEO.
Mẹo cho tất cả các bản dựng trang web dành cho thiết bị di động
Tìm kiếm địa phương: 4/5 người tiêu dùng truy cập internet tìm kiếm thông tin về doanh nghiệp địa phương . 88% sử dụng điện thoại thông minh và 84% sử dụng PC hoặc máy tính bảng. Đúng vậy: tìm kiếm cục bộ gần như quan trọng trên PC và máy tính bảng cũng như trên thiết bị di động. Xây dựng các trang với thông tin địa phương trên đó hoạt động cho cả trang web dành cho thiết bị di động và máy tính để bàn.
Đánh dấu dữ liệu có cấu trúc: Nếu bạn có một số loại nội dung nhất định, như bài đánh giá, địa chỉ, công thức nấu ăn hoặc video nhúng, cả Google và Bing đều cho phép bạn xác định nội dung đó bằng các thẻ HTML đặc biệt và có thể sử dụng thông tin đó để hiển thị dữ liệu bổ sung, được gọi là đoạn mã chi tiết , trên các trang kết quả của công cụ tìm kiếm của họ. Schema.org cung cấp cho bạn các đánh dấu thích hợp cho cả hai công cụ tìm kiếm.
SEO cho thiết kế đáp ứng
Trang web được thiết kế đáp ứng là cùng một trang web dành cho người dùng máy tính để bàn và thiết bị di động theo quan điểm của công cụ tìm kiếm (vì thứ duy nhất thay đổi là CSS và Google chú ý tối thiểu đến điều đó). Nếu bạn đã tối ưu hóa trang web trên máy tính để bàn của mình cho các công cụ tìm kiếm, bạn không cần phải làm gì thêm cho phiên bản dành cho thiết bị di động. Tất cả những gì bạn cần làm là đảm bảo rằng trang web trên máy tính để bàn được tối ưu hóa chính xác.
Kiểm tra kỹ để đảm bảo rằng Google hiểu rằng trang web của bạn đáp ứng và sẽ tải tốt trên điện thoại thông minh bằng cách thực hiện Kiểm tra tính thân thiện với thiết bị di động .
SEO cho một trang web di động riêng biệt
Vì các trang web dành cho thiết bị di động riêng biệt sử dụng HTML khác nhau cho các đối tác trên máy tính để bàn của chúng, nên cần phải làm nhiều việc hơn để làm cho chúng thân thiện với công cụ tìm kiếm.
Tách trang web dành cho thiết bị di động bằng cách sử dụng các URL giống nhau (được phân phát động)
Trang web thích ứng hoặc được phân phát động giữ các URL giống như phiên bản dành cho máy tính để bàn, nhưng cho phép thay đổi mã HTML cơ bản. Mặc dù các nguyên tắc SEO cơ bản giống như đối với một trang web đáp ứng, nhưng bạn có thể làm thêm một số điều để đảm bảo rằng các công cụ tìm kiếm nhận ra bạn đang làm gì:
Tránh che đậy
Các công cụ tìm kiếm có thể phạt các trang web có vẻ che giấu (tức là hiển thị nội dung khác nhau cho người dùng và cho các trình thu thập thông tin của công cụ tìm kiếm). Đây không phải là vấn đề trong trường hợp một trang web được phân phát động, vì trình thu thập thông tin di động sẽ xem những gì người dùng di động thấy và trình thu thập thông tin trên máy tính để bàn sẽ xem những gì người dùng máy tính để bàn thấy. Tuy nhiên, để làm rõ rằng đây là những gì bạn đang làm, bạn nên sử dụng Vary-HTTP Header (để biết ví dụ về điều này, hãy xem phần Phát triển cho Phục vụ Động trong Phát triển).
Sử dụng tiêu đề này có hai lợi ích bổ sung:
- Nó sẽ cho trình thu thập thông tin di động biết rằng có nội dung di động riêng biệt trên URL này và do đó khuyến khích nó thu thập dữ liệu trang web.
- Nó sẽ báo hiệu cho các máy chủ lưu vào bộ nhớ đệm rằng họ nên xem xét tác nhân người dùng (ví dụ: loại thiết bị) khi quyết định có phân phát một trang từ bộ đệm hay không.
Từ khóa dành riêng cho điện thoại di động
Bởi vì một trang web được phân phát động có thể sử dụng các HTML khác nhau, bạn có thể thay đổi các từ khóa được nhắm mục tiêu cả trong nội dung cũng như các tiêu đề và mô tả meta. Tuy nhiên, bạn chỉ nên làm điều này nếu phân tích từ khóa cho thấy sự chênh lệch đáng kể giữa tìm kiếm trên thiết bị di động và tìm kiếm trên máy tính để bàn. Nếu bạn chưa có dữ liệu từ khoá cho trang web của mình, Công cụ Từ khoá Google Adwords cho phép bạn lọc các tìm kiếm từ khoá cho ‘Web’ và ‘Di động’.
Tiêu đề trang thân thiện với thiết bị di động / mô tả meta
Ngoài việc sử dụng các từ khóa khác nhau trong các tiêu đề và mô tả meta của bạn, bạn cũng có thể muốn xem xét việc rút ngắn các yếu tố này. Vì kích thước màn hình nhỏ hơn nên hiển thị ít ký tự hơn. Giữ thẻ tiêu đề trong vòng 40-60 ký tự và mô tả meta trong vòng 90 ký tự.
Tách trang web trên điện thoại di động bằng các URL khác nhau
Trang web dành cho thiết bị di động trên một URL riêng biệt thực sự là một trang khác và vì vậy bạn có thể thực hiện kiểm tra kỹ thuật một cách độc lập, giống như cách bạn thực hiện đối với trang web trên máy tính để bàn của mình. Chúng tôi muốn sử dụng Danh sách kiểm tra kiểm tra trang web kỹ thuật của Geoff Kenyon, cộng với một số điểm bổ sung có trong Danh sách kiểm tra kiểm tra trang web trên thiết bị di động của chúng tôi.
Tạo cấu trúc URL song song
Trừ khi bạn đã xây dựng trang web trên điện thoại di động của mình với nội dung rất khác với trang web trên máy tính để bàn, cấu trúc URL cho trang web dành cho thiết bị di động của bạn phải phản ánh các trang có liên quan trên trang web máy tính để bàn của bạn càng chặt chẽ càng tốt. Vì vậy, www.example.com/funny-story phải trở thành m.example.com/funny-story , không phải m.example.com/psq234.
Thông tin meta và từ khóa
Một trang web di động riêng biệt có thể nhắm mục tiêu các từ khóa dành riêng cho điện thoại di động trong các thẻ meta và nội dung của bạn. May mắn thay, Google kết hợp các thẻ tiêu đề trên màn hình di động, vì vậy chúng thực sự dài hơn một chút trên SERP trên thiết bị di động so với máy tính để bàn!
Nội dung trùng lặp
Một trang web dành cho thiết bị di động riêng biệt có nội dung giống hoặc tương tự như phiên bản dành cho máy tính để bàn có thể bị coi là trường hợp trùng lặp nội dung và có thể bị công cụ tìm kiếm phạt. Hãy làm rõ rằng trang web dành cho seo trên thiết bị di động của bạn là một bản sao có chủ ý của trang dành cho máy tính để bàn.
Để làm điều này, bạn sẽ cần sử dụng thẻ rel = “canonical”, mà chúng tôi đã trình bày chi tiết trong phần phát triển của tài liệu này. Thẻ này cho các công cụ tìm kiếm biết rằng phiên bản dành cho máy tính để bàn của bạn là nguồn chính, nhưng cũng chỉ ra rằng trang dành cho thiết seo trên thiết bị di động là phiên bản thân thiện với thiết bị di động của trang máy tính để bàn chứ không phải là trùng lặp hoàn toàn.
Tác nhân người dùng chuyển hướng
Nhiều khách truy cập sẽ đến không đúng phiên bản trang web của bạn cho thiết bị của họ và bạn cần chuyển hướng họ. Bạn sẽ chuyển hướng phía máy chủ chứ không phải chuyển hướng Javascript, vì Javascript gây ra độ trễ trong thời gian tải và trang có chuyển hướng Javascript ít có khả năng được lưu vào bộ nhớ cache hơn.
Mẹo xử lý chuyển hướng đến trang web SEO dành cho thiết bị di động
Sử dụng chuyển hướng 301 hoặc 302 . 301 và 302 hoạt động theo cùng một cách nhưng truyền đạt các thông điệp khác nhau tới trình thu thập thông tin của công cụ tìm kiếm. Thông thường, 301 được đề xuất cho mục đích SEO, nhưng đối với tác nhân người dùng chuyển hướng, rel = ”alternate” ghi đè ý nghĩa của chuyển hướng, vì vậy trong trường hợp này, bạn có thể sử dụng một trong hai tùy chọn.
Đảm bảo bao gồm một liên kết đến ‘xem phiên bản dành cho máy tính để bàn’ trên trang web dành cho thiết bị di động của bạn (và ngược lại). Sử dụng cookie để đảm bảo rằng nếu người dùng nhấp vào tùy chọn này, việc phát hiện tác nhân người dùng sẽ bị ghi đè và họ sẽ không bị chuyển hướng lại (trừ khi họ chọn quay lại qua tùy chọn ‘xem phiên bản di động’).
Sơ đồ trang web XML dành cho thiết bị di động
Google và Bing sẽ lập chỉ mục và thông báo cập nhật cho trang web của bạn nhanh hơn nếu bạn có sơ đồ trang web đáng tin cậy và Công cụ quản trị trang web của cả hai công cụ tìm kiếm sẽ cho bạn biết có bao nhiêu URL trong sơ đồ trang web XML của bạn trong chỉ mục của chúng. Các trang web dành cho seo trên thiết bị di động nhận được ít lưu lượng truy cập hơn và được thu thập thông tin bởi một Googlebot khác, vì vậy, điều đặc biệt quan trọng là làm nổi bật dữ liệu này cho trang web dành cho seo trên thiết bị di động của bạn.
Nó cũng hữu ích trong việc giúp các công cụ tìm kiếm hiểu rằng trang web dành cho seo trên thiết bị di động của bạn là một trang dành cho seo trên thiết bị di động và không chỉ đơn giản là trùng lặp. “Tải lên” sơ đồ trang XML riêng biệt của bạn bằng cách đặt nó trên trang web của bạn và thêm URL vào Bing và Công cụ quản trị trang web của Google.
Tệp Robots.txt
Đảm bảo rằng bạn không chặn ‘Điện thoại thông minh-Googlebot’ từ phiên bản máy tính để bàn của mình trong robots.txt và không chặn Googlebot thông thường từ phiên bản di động. Hướng dẫn của Bing không rõ ràng về vấn đề này, vì vậy chúng tôi khuyên bạn nên thực hiện theo phương pháp tương tự và cho phép trình thu thập thông tin của Bing truy cập đầy đủ vào cả hai phiên bản.
Thiết lập và sử dụng Google Analytics
Sau khi trang web của bạn được thiết lập, bạn cần có thể theo dõi cách người dùng của bạn tương tác với nó. Google Analytics là một dịch vụ theo dõi miễn phí ( lên đến 10 triệu lượt truy cập [số lần truy cập trang, giao dịch, mục và / hoặc sự kiện] mỗi tháng), mặc dù có các dịch vụ trả phí tuyệt vời khác. Phần này sẽ thảo luận ngắn gọn về cách thiết lập theo dõi Google Analytics cho điện thoại di động và những chỉ số nào bạn nên xem xét.
Phân tích cho các trang web URL duy nhất (các trang web đáp ứng và phân phát động)
Nếu bạn có một trang web đáp ứng, việc triển khai Google Analytics sẽ giống hệt nhau đối với lưu lượng truy cập seo trên thiết bị di động và máy tính để bàn. Nếu bạn có một trang web động, hãy nhớ bao gồm cùng một mã theo dõi trong HTML trên điện thoại di động của bạn như trên HTML trên máy tính để bàn của bạn.
Vì đường dẫn tệp của URL sẽ giống nhau trên các phiên bản dành cho seo trên thiết bị di động và máy tính để bàn của trang web, nên lưu lượng truy cập đến các phiên bản dành choseo trên thiết bị di động và máy tính để bàn của trang web sẽ được theo dõi cùng nhau. Điều này sẽ cung cấp cho bạn cái nhìn tổng quan đầy đủ về lưu lượng truy cập của bạn trong nháy mắt, nhưng bạn vẫn có thể tách riêng lưu lượng truy cập trên thiết bị di động với các phân đoạn nâng cao.
Nâng cao
Đặt một biến tùy chỉnh theo dõi phiên bản nào của trang web mà máy chủ của bạn đã gửi (điều này sẽ tách biệt với phần thiết bị của GA, vì điều đó sẽ hiển thị thiết bị đã xem trang chứ không phải trang web nào đã được tải). Bạn có thể tìm hiểu thêm về cách đặt các biến tùy chỉnh tại đây .
Các chỉ số quan trọng
Khi bạn có dữ liệu của mình, bạn nên tập trung vào:
- Trang đích: Mọi người vào trang web của bạn có đúng chỗ không?
- Tỷ lệ chuyển đổi và nơi mọi người rời khỏi kênh chuyển đổi: Họ gặp khó khăn ở đâu?
- Tỷ lệ thoát: Mọi người không tìm thấy những gì họ đang tìm kiếm?
- Tìm kiếm trang web và từ khóa tìm kiếm không phải trả tiền: Mọi người đang tìm kiếm gì để bắt đầu?
Phân tích cho các trang web di động riêng biệt bằng cách sử dụng các URL khác nhau
Khi bạn hài lòng với cấu trúc của trang web dành cho seo trên thiết bị di động của mình, bạn cần có thể theo dõi việc sử dụng nó. Vì đây là một trang web riêng biệt sử dụng các URL của chính nó, bạn sẽ cần thêm mã theo dõi vào tất cả các trang phiên bản dành cho seo trên thiết bị di động. Nếu bạn chưa thêm mã theo dõi vào trang web trên điện thoại di động của mình.
Tương lai web di động
Sử dụng các thiết bị thay thế cho nhau?
Khi thị trường điện thoại thông minh và máy tính bảng phát triển, chúng cũng được sử dụng giống như PC (và ngược lại). Will Critchlow lưu ý rằng khi seo trên thiết bị di động ngày càng giống PC (nhanh hơn, duyệt web tốt hơn và dễ mua hơn), PC ngày càng giống thiết bị di động (với các tính năng như Touch, App Stores và InstantOn):
Mọi người đang ngày càng sử dụng nhiều thiết bị tương thích web khác nhau của họ thay thế cho nhau. Một nghiên cứu của Google cho thấy, đáng ngạc nhiên là 77% tìm kiếm trên thiết bị di động xảy ra ở nhà hoặc tại cơ quan; cho biết rằng những người dùng đó đã chủ động chọn sử dụng seo trên thiết bị di động thay vì thiết bị máy tính để bàn có sẵn.
Duyệt qua nhiều màn hình
Có hai cách chính để điều này xảy ra: làm việc giữa các thiết bị hoặc sàng lọc tuần tự, đồng hời sử dụng.
Làm việc giữa các thiết bị
Đây là một hành vi đặc biệt quan trọng mà các nhà tiếp thị cần lưu ý, vì nó có thể làm sai lệch các chỉ số phân bổ (và theo dõi thành công của chiến dịch). Ví dụ về điều này sẽ là khi ai đó truy cập trang web thương mại điện tử trên điện thoại thông minh, thêm một mặt hàng vào giỏ hàng của họ và quay lại sau để mua mặt hàng đó bằng máy tính để bàn.
[ Nguồn dữ liệu và nguồn cảm hứng hình ảnh: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html ]Sử dụng đồng thời
Chỉ đơn giản là khi ai đó đang sử dụng nhiều thiết bị cùng một lúc. Một ví dụ phổ biến là khi ai đó đang xem một chương trình truyền hình và sử dụng điện thoại thông minh của họ để tra cứu thông tin về một sản phẩm được quảng cáo trong thời gian nghỉ quảng cáo.
Đồng bộ hóa nhiều thiết bị
Khi người dùng ngày càng thực hiện các tác vụ trực tuyến trên nhiều thiết bị và đặc biệt là khi họ tham gia vào quá trình sàng lọc tuần tự, khả năng đồng bộ hóa hoạt động giữa nhiều thiết bị sẽ trở nên quan trọng hơn bao giờ hết. Các Amazon Kindle là một ví dụ điển hình của loại đồng bộ. Nếu bạn có nhiều thiết bị được liên kết với tài khoản Kindle của mình, bạn có thể đặt nó để ghi nhớ nơi bạn đã dừng lại khi đọc sách lần cuối, ngay cả khi bạn tiếp tục đọc trên một thiết bị khác.
Lý tưởng nhất là một trang web yêu cầu người dùng đăng nhập cũng sẽ có tùy chọn ‘ghi nhớ tôi’, với cookie dài hạn cho phép đăng nhập đồng thời trên nhiều thiết bị. Bằng cách đó, người dùng không phải tiếp tục đăng nhập mỗi khi họ truy cập trang web, ngay cả khi một tài khoản được mở trên nhiều màn hình cùng một lúc.
Nội dung ở khắp mọi nơi
Cũng như đồng bộ hóa tài khoản, việc người dùng có thể truy cập nội dung từ mọi nơi, trên các nền tảng và thiết bị ngày càng trở nên quan trọng. Khái niệm ‘ nội dung ở khắp mọi nơi ‘ được tạo ra để mô tả một hệ thống quản lý nội dung mới bác bỏ ý tưởng rằng nội dung = trang web. Đúng hơn, nội dung là những gì thường được hiển thị trên một trang web, nhưng cùng một nội dung có thể có nhiều hình thức khác nhau.
Một cách hay để nghĩ về ‘nội dung ở khắp mọi nơi’ là nó giống như thiết kế đáp ứng của nội dung. Thiết kế đáp ứng cấu trúc một trang web theo định dạng các khối xây dựng linh hoạt có thể được sắp xếp lại để phù hợp với nhu cầu của người dùng.
Nội dung ở mọi nơi đều giống nhau đối với nội dung thực tế, chia nhỏ từng loại nội dung (bài đăng trên blog, bài báo, bài đánh giá, v.v.) thành các yếu tố cơ bản hoặc các khối xây dựng (đoạn giới thiệu, dòng tiêu đề, phần giới thiệu, tài liệu tham khảo, tác giả) sau đó có thể được sắp xếp lại và tái sử dụng khi cần thiết. Điều này đặc biệt quan trọng đối với nội dung di động, vì có rất nhiều cách thức người dùng di động truy cập và chia sẻ nội dung.
API thế giới thực
‘API’, hoặc giao diện lập trình ứng dụng, cho phép truy cập vào dữ liệu trong cơ sở dữ liệu. API công khai cho phép các nhà phát triển truy cập cơ sở dữ liệu của người khác và sử dụng dữ liệu cho việc khác. Một ví dụ điển hình về điều này là các ‘ ứng dụng kết hợp ‘ phổ biến . Ví dụ: một ứng dụng mashup rất cơ bản cho phép bạn tự động đăng Tweet của mình trực tiếp lên Facebook. Điều này được thực hiện bằng cách cho phép ứng dụng trong Facebook truy cập API của Twitter và thu thập các Tweet của bạn, sau đó truy cập tường Facebook của bạn để đăng lại.
Nếu bạn quan tâm đến các loại chủ đề này, nhưng thấy các yếu tố kỹ thuật hơi quá, cuốn sách Content Everywhere là một nơi tuyệt vời để bắt đầu học, vì nó được thiết kế cho những người có nền tảng kỹ thuật kém hơn.
Phần kết luận
Việc triển khai seo trên thiết bị di động một trang web thân thiện với thiết bị di động sẽ không có nghĩa là bạn đã hoàn thành việc sử dụng seo trên thiết bị di động. Khi web di động phát triển, chúng ta phải sẵn sàng cho nó. Có một số khả năng khá thú vị đến từ những phát triển này. Các yếu tố phức tạp hơn của lý thuyết ‘nội dung ở khắp mọi nơi’ và trải nghiệm người dùng nâng cao có thể không phù hợp với mọi doanh nghiệp, đặc biệt là đối với các doanh nghiệp vừa và nhỏ. Vậy là được rồi.
Điều quan trọng cần nhớ là mục tiêu cuối cùng của việc triển khai các khái niệm này: cung cấp trải nghiệm người dùng chất lượng cao cho khách truy cập từ mọi loại thiết bị và đảm bảo rằng họ có thể truy cập thông tin và dịch vụ mà bạn cung cấp. Nếu bạn có thể đạt được điều đó, bạn đã thành công.
Xem thêm: SEMrush là gì?
