Categories :

SEO và Khả năng tiếp cận: Kỹ thuật SEO Website

Chúng tôi hy vọng bạn thích loạt bài này về SEO và khả năng tiếp cận. Trong phần cuối cùng, Cooper cho bạn thấy các chiến lược SEO kỹ thuật mà bạn triển khai trên trang web của mình có thể giúp làm cho nó dễ hiểu, dễ hoạt động, dễ hiểu và mạnh mẽ hơn như thế nào.

Ảnh bảng trắng với ghi chú viết tay về cách các SEO kỹ thuật có thể tập trung vào khả năng tiếp cận.

Nhấp vào hình ảnh bảng trắng ở trên để mở phiên bản lớn hơn trong tab mới!

Phiên âm Video

Này, người hâm mộ Moz. Chào mừng đến với phiên bản mới nhất của Whiteboard Friday. Tôi là Cooper Hollmaier. Tôi đã làm SEO từ năm 2016 và hôm nay tôi làm việc cho một nhà bán lẻ ngoài trời lớn, giúp chiến lược SEO kỹ thuật của chúng tôi trở thành hiện thực. Cảm ơn bạn rất nhiều vì đã tham dự loạt bài về SEO và khả năng tiếp cận này.

Tôi hy vọng rằng bạn đã có được góc nhìn rộng và các mẹo và thủ thuật mới để tạo nội dung không chỉ gây được tiếng vang với khán giả, hoạt động tốt trong tìm kiếm mà còn có thể tiếp cận được với nhiều người hơn. Hôm nay chúng ta sẽ nói về kỹ thuật SEO và khả năng tiếp cận. 

SEO kỹ thuật và khả năng tiếp cận

Hãy đi sâu vào. Lần trước chúng ta đã nói về Nguyên tắc hỗ trợ tiếp cận nội dung web và bạn có thể nhớ rằng bốn nguyên tắc của WCAG là có thể hiểu được, có thể hoạt động, dễ hiểu và mạnh mẽ.

Perceivable

Là một SEO kỹ thuật, có lẽ bạn quan tâm nhất đến khả năng cảm nhận được vì hoạt động hàng ngày của bạn, luồng công việc hàng ngày của bạn liên quan đến việc đảm bảo rằng các trang, nội dung, trải nghiệm bạn đang tạo có thể truy cập được để tìm kiếm công cụ và có thể cảm nhận được đối với các công cụ tìm kiếm. 

Rất nhiều lần khi chúng tôi xem xét các đề xuất SEO hoặc kiểm tra SEO, tôi nghe thấy rất nhiều chủ đề phổ biến, như thẻ tiêu đề được đưa vào hình ảnh và do đó công cụ tìm kiếm không thể nhìn thấy nó hoặc nội dung tôi đang sản xuất hiển thị với bot nhưng không hiển thị với mọi người. Đây là những vấn đề với nhận thức ở cấp độ cơ sở. Tôi muốn bạn thực hiện suy nghĩ đó và cân nhắc xem bạn có áp dụng điều đó cho toàn bộ khán giả của mình hay không. Vì vậy, tất cả những người đang hy vọng tương tác với dịch vụ hoặc sản phẩm hoặc trải nghiệm của bạn, họ có thể nhận thức được tất cả những điều bạn phải cung cấp ở cấp độ cơ bản không?

1. Phong cách

Hình ảnh danh sách viết tay về các thay đổi kiểu bao gồm văn bản gốc, không nhồi nhét từ khóa và độ tương phản màu sắc.

Một số điều bạn có thể nghĩ sẽ tương tự như những gì bạn sẽ thấy trong cuộc kiểm tra này, chẳng hạn như: Tất cả văn bản của tôi trên trang có hiển thị không? Nó có phải là văn bản đang hoạt động không? Nó có nguồn gốc từ trang, vì vậy tôi có thể chọn nó và sao chép và dán nó, hay nó được đưa vào hình ảnh và không thể truy cập được bằng công nghệ hoặc trình duyệt hỗ trợ hoặc bạn có gì không? Bạn cũng có thể nghĩ: Màu sắc tương phản với nền và văn bản của tôi, nó có phải là độ tương phản phù hợp không?

Có đủ rõ ràng và sắc nét giữa các yếu tố bố cục của tôi không? Nếu mọi thứ có vẻ hơi mờ hoặc không hoàn toàn rõ ràng rằng một thứ gì đó có thể truy cập được đối với công cụ tìm kiếm và người dùng, hãy quay lại bảng vẽ và tìm cách làm cho cả hai điều đó hoạt động tốt. 

2. Đa phương tiện

Hình ảnh danh sách viết tay về các cải tiến đa phương tiện.

Chúng tôi cũng muốn thêm hình ảnh, văn bản, video và âm thanh vào các trang mà chúng tôi đang xây dựng cho khách hàng của mình. Điều quan trọng là các yếu tố phong phú này, giờ đây chúng ta đã loại bỏ văn bản cơ bản và các yếu tố tạo kiểu, các yếu tố phong phú mà chúng tôi đang đưa vào trang cũng có thể nhận ra được bởi tất cả người dùng của bạn. Có một số điều chúng ta có thể làm để biến điều đó thành hiện thực. Đối với hình ảnh, việc cung cấp cho chúng một văn bản thay thế và cung cấp một cái gì đó bổ sung cho hình ảnh đó sẽ giúp người đọc màn hình nhìn thấy nó và một người bị khuyết tật thị giác hiểu được.

Ngoài ra, việc đặt tên những thứ bằng tên thân thiện với con người so với “DSC1352.JPEG” sẽ giúp các công cụ tìm kiếm cũng như công nghệ hỗ trợ nhìn thấy hình ảnh đó và hiểu nó là gì. Bối cảnh trên trang, điều quan trọng là bạn phải đặt hình ảnh trên các trang làm tăng giá trị. Bạn muốn cung cấp cho người dùng một số nội dung bổ sung để cung cấp cho họ cảm giác hơn một chút hoặc cung cấp cho họ thêm một số bối cảnh về những gì bạn đang nói. Thêm hình ảnh để có giá trị, không chỉ để hiển thị trong tìm kiếm hình ảnh của Google. 

Còn về video? Vì vậy, video có một chút khác biệt. Video có một loạt các hình ảnh chuyển động. Vì vậy, mỗi khi tôi nghĩ về chuyển động, tôi tự nghĩ: “Làm thế nào tôi có thể đảm bảo rằng nếu người dùng muốn dừng chuyển động này, họ có thể?”

Có các điều khiển phát lại rõ ràng là rất quan trọng khi chúng ta đang nói về khả năng truy cập cũng như có trải nghiệm trình phát video tuyệt vời cho bất kỳ người dùng nào. Ngoài ra, tương đương đồng bộ cho các lựa chọn thay thế văn bản đó. Chúng tôi đã nói về hình ảnh có các lựa chọn thay thế văn bản. Video cũng cần có các lựa chọn thay thế văn bản, nhưng chúng cần được đồng bộ hóa theo thời gian với video đó. Nếu không, chúng sẽ không có ý nghĩa trong ngữ cảnh. 

Sau đó, đảm bảo rằng chúng có thể phân biệt được. Điều này giống nhau giữa video và âm thanh. Chúng tôi muốn đảm bảo rằng tiền cảnh và hậu cảnh có thể dễ dàng phân biệt với nhau. Nếu video của bạn có cảm giác bùn, nếu âm thanh của bạn có bùn và khiến tôi phải căng tai hoặc căng mắt để có thể nhìn thấy nội dung đó và hiểu điều gì đang xảy ra, bạn cần phải sắc nét hơn một chút, rõ ràng hơn một chút về hai sự phân biệt đó.

Sau đó, văn bản bảng điểm. Giống như bạn cần phụ đề chi tiết cho video, đối với âm thanh, bạn muốn có bản ghi văn bản, vì vậy nếu tôi có thể ở một nơi ồn ào và tôi không thể nghe thấy âm thanh hoặc tôi không cắm tai nghe hoặc tôi cần để sử dụng công nghệ hỗ trợ, tôi có thể truy cập âm thanh đó. 

Đây là tất cả những điều bạn sẽ thấy khi xem xét mã với tư cách là một kỹ thuật viên SEO và bạn nên biết.

Nếu bạn không có những điều này đang diễn ra, trên trang web của bạn, tôi sẽ cho phép bạn đặt những câu hỏi đó, những câu hỏi khó như: Này, có văn bản nào thay thế cho hình ảnh này không? Người khuyết tật thị giác, người khuyết tật thính giác sẽ tiếp cận những thứ này như thế nào? 

3. Cấu trúc trang

Ảnh của hình ảnh vẽ tay so sánh các cấu trúc trang khác nhau.

Ba và bốn là về cấu trúc trang và HTML ngữ nghĩa. Vì vậy, điều này ít hơn một chút về điều này có thể cảm nhận được và nó có phải là loại dễ hiểu không.

Đây là một kiểu hiểu rõ ràng, nhưng nó cũng nên có một chút về nhận thức. Có một loạt H1 trên một trang, như bạn có thể tưởng tượng, một công cụ tìm kiếm có thể cảm thấy rất bối rối, phải không? Họ giống như, được rồi, có một loạt H1 trên trang này. Tôi thực sự không chắc trang này nói về cái gì. Thêm cấu trúc và các tiêu đề xếp tầng để biểu thị mối quan hệ cha-con sẽ giúp nội dung của bạn dễ hiểu hơn một chút. Sẽ dễ dàng hơn để hiểu những gì đang xảy ra. 

4. HTML ngữ nghĩa

Điều tương tự với HTML ngữ nghĩa. Chúng tôi có xu hướng đặt nhiều div và khoảng cách và các phần tử không xác định được trong HTML của chúng tôi. Nhưng bằng cách đánh dấu chúng theo những cách thích hợp hơn, để chúng tôi hiểu ý nghĩa của chúng, hiểu những thẻ đó chứa gì, cho dù đó là điều hướng hay biểu mẫu hoặc bảng, cung cấp thêm lớp thông tin và khả năng hiểu được sẽ cho phép các công cụ tìm kiếm và công nghệ hỗ trợ để có thể phân tích cú pháp những thứ đó, để cho phép họ nhận thấy những thứ bạn đang đặt trên trang của mình khác với những thứ khác và cung cấp trải nghiệm phong phú hơn.

Hoạt động được

Được rồi, vì vậy chúng tôi có thể nhận thức được nội dung. Nhưng làm thế nào để chúng tôi đảm bảo rằng nó có thể hoạt động? 

1. Sơ đồ trang web HTML

Ảnh của ví dụ về sơ đồ trang web HTML được vẽ tay.

Một số khuyến nghị SEO mà tôi thường thấy mọi người thực hiện là xây dựng một sơ đồ trang web HTML và đặt breadcrumbs trên trang của bạn. Rất nhiều lần bạn có thể nhận được một số phản hồi từ điều đó. Sơ đồ trang web HTML là thứ cực kỳ quan trọng mà chúng tôi biết đối với SEO, đối với khả năng khám phá của các trang đó nằm sâu trong hệ thống phân cấp trang web của chúng tôi.

Chúng tôi biết rằng breadcrumbs cũng khá quan trọng đối với khả năng khám phá. Cả hai yếu tố này đều giúp người dùng có công nghệ hỗ trợ điều hướng trang web tốt hơn. Sơ đồ trang web HTML cho phép nếu menu của bạn không bao gồm tất cả các trang trên trang web của bạn hoặc nếu nó gây nhầm lẫn hoặc bạn đang sử dụng JavaScript hoặc một số công nghệ khác không thể truy cập vào ngăn xếp công nghệ của tôi.

2. Breadcrumbs

Ảnh về ví dụ breadcrumbs vẽ tay.

Sau đó, breadcrumbs cho phép tôi phân tích cú pháp lên và xuống cụ thể, giả sử đó là một trang tìm kiếm sản phẩm trên trang web thương mại điện tử mà không cần phải quay lại menu và sau đó phân tích cú pháp qua từng mục menu một lần nữa. Vì vậy, hai điều này cực kỳ quan trọng đối với điều hướng nhưng cũng đặc biệt đối với những người đang điều hướng bằng bàn phím và sử dụng công nghệ hỗ trợ.

3. Phát triển bàn phím trước tiên

Hình ảnh của máy tính và bàn phím vẽ tay.

Sau đó, một điều không liên quan đến SEO nhưng vẫn quan trọng và có thể liên quan, hãy phát triển trang web và bàn phím trải nghiệm của bạn trước. Không phải ai cũng có chuột hoặc khả năng sử dụng chuột vì khuyết tật vận động hoặc do khiếm khuyết hoặc do thiếu công nghệ hoặc phần cứng. Vì vậy, hãy đảm bảo rằng bạn phát triển bàn phím trước và bạn sẽ thu hút được nhiều người hơn trong số những người mà bạn đang muốn kết hợp với khán giả của mình.

Có thể hiểu được

1. Ngôn ngữ

Ảnh mã HTML viết tay chỉ định LANG =

Có thể hiểu được. Vì vậy, chúng tôi nói về SEO quốc tế, khi chúng tôi giao dịch với các quốc gia khác nhau và các ngôn ngữ khác nhau, tầm quan trọng của việc sử dụng HTML trên trang của chúng tôi để biểu thị ngôn ngữ của trang là gì. Nó giúp các công cụ tìm kiếm cung cấp kết quả phù hợp trong bối cảnh quốc gia hoặc quốc tế phù hợp. Nó cũng giúp trình đọc màn hình đọc to nội dung của bạn bằng ngôn ngữ phù hợp.

2. Bố cục điều hướng

Hình ảnh của các ví dụ trang web vẽ tay.

Sau đó, bố cục điều hướng và quảng cáo xen kẽ tôi nghĩ là khá phổ biến, nhưng không ai thích điều hướng hoặc bố cục của một trang web khó hiểu. Bạn càng dễ dàng thực hiện, mọi người càng dễ dàng chuyển đổi hoặc làm những gì bạn đang tìm kiếm họ làm với trang web này, cho dù đó là tìm hiểu, cho dù là mua, cho dù đó là tham gia vào một dịch vụ. Điều đó dễ dàng hơn khi điều hướng và bố cục được sắp xếp hợp lý và chúng tôi không sử dụng các từ khác nhau ở những nơi khác nhau để có nghĩa giống nhau. Nó thậm chí còn quan trọng hơn đối với những người có công nghệ hỗ trợ. 

3. Quảng cáo xen kẽ

Ảnh của trang vẽ tay với một

Quảng cáo xen kẽ, không ai thích những cửa sổ bật lên đó trước mặt chúng tôi, điều đó không cho phép chúng tôi duyệt qua phần còn lại của trang web. Google cũng không thích chúng. Nhưng đặc biệt là những người có công nghệ hỗ trợ, nếu chúng ta không xử lý các cửa sổ bật lên đó theo đúng cách, chúng ta sẽ kết thúc với một tình huống mà người dùng có thể mắc bẫy bàn phím và họ không thể thoát ra khỏi quảng cáo xen kẽ hoặc họ không hiểu rằng một quảng cáo xen kẽ thậm chí còn được đưa lên trang. Vì vậy, điều quan trọng là phải hết sức lưu ý khi sử dụng quảng cáo xen kẽ. 

Mạnh mẽ

Cuối cùng nhưng không kém phần quan trọng là mạnh mẽ. Làm cách nào để chúng tôi đảm bảo rằng nội dung chúng tôi đang đưa lên trang tương thích với nhiều loại thiết bị và tình huống? 

1. Xác thực

Ảnh của ví dụ vẽ tay về xác thực JSON + LD.

Chỉ cần sử dụng HTML thích hợp là một cách tuyệt vời để làm điều này. Bạn có thể sử dụng trình xác thực và bạn có thể xem HTML, CSS và JSON-LD của mình. Tạo mã phù hợp và đặc biệt là khi bạn đang sử dụng HTML ngữ nghĩa cũng như cung cấp ý nghĩa cho mã đó, bạn sẽ có nhiều trải nghiệm tốt hơn và mọi thứ xây dựng của bạn dễ tiêu hóa hơn. 

2. Đáp ứng

Ảnh vẽ tay hình ảnh của các trang web thay đổi kích thước cho thiết bị di động, màn hình trung bình và màn hình lớn.

Trang web của bạn có đáp ứng không? Bạn nên làm điều này rồi. Nhưng nếu bạn không, hãy đảm bảo rằng nó đang hoạt động trên thiết bị di động và máy tính để bàn và máy tính bảng và bố cục vẫn giữ nguyên, nó chỉ có thể được thay đổi kích thước hoặc tái tạo hình ảnh theo một cách khác.

3. Có thể tương tác

Ảnh của trang web vẽ tay với các mũi tên để biểu thị các tương tác khác nhau có sẵn.

Đảm bảo rằng nó có thể tương tác. Nếu người dùng muốn có thể phóng to vì họ bị khiếm thị hoặc họ muốn có thể thay đổi màu sắc, thì công nghệ trên trang web của bạn có cho phép họ làm điều đó không? Nó nên. Nếu bạn thực hiện ba điều này ở phía dưới, tôi nghĩ nó sẽ thực hiện rất nhiều công việc nặng nhọc và bạn sẽ phải thực hiện ít công việc hơn vì bạn đã xây dựng trong khuôn khổ, nền tảng để có thể truy cập .

Đó là kỹ thuật SEO và khả năng tiếp cận. Nếu bạn có thêm câu hỏi hoặc muốn một số công cụ xác thực, có một số công cụ ở bên phải ở đây hoặc bạn có thể liên hệ với tôi trên Twitter @cooperhollmaier để được tư vấn thêm. Nhưng cảm ơn bạn rất nhiều vì đã lắng nghe Whiteboard Friday và khả năng tiếp cận cùng với SEO. Tôi hy vọng rằng bạn nắm bắt được điều này và bạn ngày càng trở nên hòa nhập hơn theo cách bạn đang làm SEO trong tương lai.

Nguồn: https://moz.com/blog/technical-seo-and-accessibility