3 Cách sử dụng Chrome DevTools để kiểm tra SEO

Với Chrome DevTools, bạn có thể kiểm tra nhanh những vấn đề cơ bản về SEO – từ khả năng thu thập thông tin, dữ liệu đến hiệu suất. Hãy cùng khám phá 3 phương thức hiệu quả sau để sử dụng nó nhé. 

Một trong những bộ công cụ kỹ thuật sẵn có quan trọng nhất của bất cứ chuyên gia SEO nào chính là Google Chrome. 

Bất kể là phần mềm SEO mà bạn có thể sử dụng là để tự động kiểm tra hay để chẩn đoán các vấn đề về SEO trên quy mô lớn, Chrome DevTools cung cấp các phương thức thiết yếu cho việc kiểm tra nhanh các vấn đề SEO. 

Hiện tại, có rất nhiều bài báo đề cập tới một vài cách mà Chrome DevTools có thể hỗ trợ các chuyên gia SEO và các nhà phát triển. 

Tuy nhiên, tôi muốn chia sẻ một vài trường hợp thực tế khác nhau mà ở đó các chuyên gia về SEO có thể dựa vào bộ công cụ DevTools

• Khắc phục sự cố liên quan đến hiệu suất hoạt động của trang web.
• Kiểm tra kỹ cách Google nhận biết trang web của bạn. 
• Kiểm tra nhanh lỗi thu thập thông tin. 

Đối với những ai chưa bao giờ trải nghiệm bộ công cụ DevTools của Chrome thì việc truy cập đơn giản chỉ là nhấp chuột phải vào một trang web bất kỳ và nhấp vào mục Inspect (Kiểm tra). 

Tiếp cận điều này từ cái nhìn của những chuyên gia SEO, tôi khuyên bạn nên sử dụng cả Element pane – cho phép bạn xem cả DOM và CSS cũng như bật một vài công cụ khác trong ngăn điều khiển. 

Để bắt đầu, hãy kích chuột phải và chọn Inspect (Kiểm tra)

Điều này được mặc định sẽ hiển thị ra bảng Elements, đưa đến cho bạn cái nhìn tổng quát về DOM và style sheets (biểu định kiểu web) được dùng để soạn trang. 

Chỉ riêng chế độ xem này đã cung cấp cho chúng ta rất nhiều thứ để đi sâu vào, nhưng để tận dụng tối đa công năng của bộ công cụ thì hãy cấp quyền cho console drawer. 

Nhấp vào ba dấu chấm bên cạnh biểu tượng cài đặt, và cuộn xuống để hiển thị console drawer. 

Ngoài ra, hãy nhấp vào phím Escape.

Với việc bật cả console drawer và bảng điều khiển từng phần (element panel), người dùng có thể có cái nhìn sơ qua về code đang được hiển thị trong DOM và những style sheets đang được dùng để viết code đó trong trình duyệt. 

Cũng như một loạt các công cụ có thể được truy cập từ console drawer khác. 

Tùy thuộc vào tần suất sử dụng DevTools của bạn, console drawer có thể chỉ hiển thị console riêng. 

Console panel (Bảng điều khiển) cho phép bạn xem những tin nhắn đã ghi và chạy JavaScript – tuy nhiên chúng ta không làm điều đó hôm nay. 

Thay vào đó, chúng ta sẽ tập trung vào việc bật 3 công cụ bổ sung:

• Network conditions
• Coverage
• Rendering

Dưới mục More Tools, chọn từng mục trong số 3 mục trên cho đến khi chúng xuất hiện dưới dạng các tab trong console drawer. 

Bảng điều khiển DevTools sẽ trông giống như sau: 

Bây giờ 3 ngăn này đã được bật, hãy bắt đầu khắc phục sự cố. 

Một trong những cách thức thường bị bỏ qua nhiều nhất để sử dụng DevTools là dựa vào khả năng gắn liền với Chrome để chuyển đổi User-Agent.

Bài test đơn giản này sẽ giúp phát hiện ra một vài vấn đề khác nhau bằng cách cung cấp các thông tin chi tiết về cách mà Googlebot xem và xử lý thông tin trên 1 trang web. 

Đối với chuyên gia điều tra SEO, DevTools có thể thường xuyên hoạt động như 1 chiếc kính lúp cho phép người dùng phóng to một vấn đề cụ thể để tìm ra nguyên nhân gốc rễ. 

2.1 Chuyển đổi User-Agent

Để chuyển user-agent của bạn trong Chrome, hãy sử dụng tab Network Conditions trong console drawer. 

Bỏ chọn Select automatically, và bạn có thể xem nội dung bằng Googlebot Smartphone, Bingbot, hoặc bất cứ user agents nào để cách thức phân phối nội dung. 

2.2 Mobile Alternate Site

Hãy chọn một trang web mà Google có thể không hiển thị thẻ tiêu đề (title tag) hoặc mô tả meta được cập nhật trong SEPRs. 

Sẽ có thể rất khó để xác định lý do tại sao Google dường như lại chọn một tiêu đề (title) hoàn toàn khác hoặc không cập nhật tiêu đề có trong SEPRs từ thẻ tiêu đề (title tag) trước đó. 

Trong trường hợp này, sau khi chuyển User-Agent sang Googlebot Smartphone, ta có thể thấy rất nhanh và rõ ràng rằng trang web này vẫn chạy một trang web di động thay thế cho Googlebot. 

Bởi vì Google đã chuyển sang mobile-first indexing, Google đang xử lý và index các thay đổi trên trang web dành cho thiết bị di động, trong khi không thể theo kịp các cập nhật được thực hiện trên phiên bản miền của máy tính. 

Có vẻ như những trang web di động này giống như di tích từ quá khứ xa xôi, tuy nhiên chúng chắc chắn vẫn đang tồn tại. 

Trên thực tế, 1 trang web: tìm kiếm cho m.*.com cho ra hơn 2 tỷ tìm kiếm ở tìm kiếm Google: 

Trong khi việc phát hiện ra một vấn đề như thế này ở crawl bằng cách tìm kiếm the meta rel=”alternate” không khó thì việc chuyển User-Agent ở Google Chrome lại đưa ra một cơ hội tuyệt vời để phát hiện những vấn đề tiềm năng mà không cần phải rời khỏi trình duyệt. 

2.3 Nhận biết Server Protection quá giới hạn 

Chẳng có gì lạ khi có rất nhiều kẻ xấu ở trên mạng. 

Ngoài ra, cũng không có gì bí mật khi có rất nhiều tin tặc và những kẻ xấu độc hại đang nỗ lực sử dụng sức mạnh của Google để xâm nhập một trang web. 

Đó là lý do tại sao chúng ta không thể có một trang Web ổn định. 

Do đó, một vài nền tảng máy chủ, CDN và nhà cung cấp dịch vụ lưu trữ có thể cung cấp một số tính năng bảo mật gắn liền có thể ngăn chặn các hành vi giả mạo Googlebot với mục đích đảm bảo rằng 1 trang web luôn an toàn trước các trình thu thập thông tin spam. 

Tuy nhiên, đôi lúc một trang web có thể hơi quá đà trong việc bảo vệ và hậu quả là nó vô tình chặn luôn cả Googlebot!

Nếu bạn thấy một thông báo giống thông báo ở dưới đây, có thể đã đến lúc bạn cần phải kiểm tra một số thứ:  

Khi chúng ta nhìn thấy thông báo này trên SERPs của Google, rõ ràng là đang có điều gì bất ổn đang xảy ra. 

Tuy nhiên, trình duyệt đã tải tất cả nội dung mà không gặp vấn đề gì.

Google có nhận thấy điều gì khác biệt không?

Bằng cách sử dụng trình chuyển đổi User-Agent trong DevTools, chúng ta có thể thấy rằng trang web tiếp nhận thông báo này trong khi User-Agent đang được cài đặt cho Googlebot Smartphones. 

Mặc dù đây có thể là cách tốt để dồn những kẻ giả mạo Googlebot đến đường cùng, nhưng họ cũng vô tình chặn luôn Googlebot thật. 

Trình chuyển đổi User-Agent không phải là công cụ hoàn mỹ và chắc chắn không phải công cụ vạn năng. 

Trên thực tế, các CDN giống như Cloudflare nổi tiếng trong việc chặn lưu lượng truy cập từ những người có khả năng là giả mạo phương tiện của User-Agent. 

Khi truy cập vào trang web riêng của Cloudflare với Googlebot được đặt như User-Agent, bạn sẽ được chào đón bằng một trang như sau: 

Tương tự, việc chuyển đổi User-Agents sẽ không cho bạn biết liệu Google có thể hiển thị Javascript trong lần chuyển đầu tiên hoặc các vấn đề quan trọng liên quan đến khả năng truy cập khác hay không. 

Tuy nhiên, sẽ rất tốt nếu bạn kiểm tra để nhận biết xem những gì bạn thấy trong SERP có gì bất ngờ không. 

2.4 Chẩn đoán Core Web Vitals trong Chrome DevTools

Một tab quan trọng trong DevTools là tab Performance.

Đây là một cửa ngõ tuyệt vời để khắc phục các vấn đề liên quan đến tốc độ và hiệu suất của trang và cũng đưa ra một số điểm có khả năng thực thi được khi nó xảy ra với Core Web Vitals. 

Mặc dù các chỉ số – một phần của Core Web Vitals thuộc Google vài lần đã là một phần của báo cáo tốc độ và hiệu suất, những điều cực kỳ quan trọng với các chuyên gia SEO là phải làm quen với cách thức làm sao phân tích được những vấn đề này. 

Đặc biệt là khi quản trị viên của web đang dần nhận thức sâu sắc hơn về tầm quan trọng của Core Web Vitals. 

Sử dụng tab Performance ở DevTools là một bước để hiểu thấu đáo hơn về những chỉ số web quan trọng. 

2.5 Cách thiết lập tab Performance giúp gỡ lỗi Core Web Vitals

Trên tab trên cùng của DevTools, hãy nhấn vào tab Performance. 

Chọn nút Screenshots (chụp màn hình), sau đó nhấn vào biểu tượng Refresh trong tab Performance để ghi lại việc tải trang. 

Hồ sơ tải cung cấp góc nhìn tổng quan về thời gian tải trang với thời gian được đánh dấu cho các sự kiện quan trọng. 

Trong phần thời gian, người dùng có thể thấy cờ hiển thị những thứ như FCP (First Contentful Paint) và LCP (Largest Contentful Paint), một trong những Core Web Vitals của chúng tôi. 

Khi di chuột qua cờ của LCP, chúng ta thực sự có thể thấy những phần nội dung đã được gắn cờ chính là phần nội dung lớn nhất trong quá trình tải trang. 

Điều này hỗ trợ loại bỏ những phỏng đoán vì chuyên gia kỹ thuật SEO đang phối hợp với nhóm phát triển và hiệu suất để khắc phục sự cố Core Web Vitals 

2.6 Kiểm tra sự thay đổi Cumulative Layout

DevTools cũng cho phép bạn xác định những yếu tố nào có thể thay đổi bố cục. 

Thông thường, khi quá trình tải hình ảnh và quảng cáo đã hoàn thành, nội dung có thể nhảy xung quanh màn hình. 

Điều này xảy ra khi trang không dành vị trí riêng cho những nội dung này, dẫn đến sự thay đổi và di chuyển của bố cục khi nội dung được tải. 

Để giúp phát hiện ra sự thay đổi bố cục, hãy dùng tab Rendering ở console drawer. 

Kiểm tra lựa chọn ở Layout Shift Regions, tùy chọn này sẽ đánh dấu các vùng của trang có sự thay đổi bố cục trong quá trình tải nội dung. 

Thay đổi bố cục sau đó sẽ được đánh dấu bằng màu xanh khi bạn tương tác với trang. 

Điều này giúp quản trị viên web và các nhà phát triển hiểu những tài nguyên nào có thể cần placeholders. 

Chúng ta thường nghe về soft 404a trong lúc kiểm tra SEO. 

Soft 404s là khi mà trình duyệt có thể hiển thị 1 trang 404, nhưng thay vào đó, thì chúng trả về Mã Phản Hồi 202 OK. 

Trong một vài trường hợp, bạn có thể thấy nội dung tải chính xác như những gì được mong đợi trên trình duyệt, tuy nhiên Mã Phản Hồi HTTP có thể hiển thị 404, 302 hoặc nói chung là những thứ không chính xác và khác xa so với mong đợi. 

Trong bất cứ trường hợp nào, sẽ hữu ích khi xem những mã phản hồi HTTP cho mọi trang và nguồn tài nguyên. 

Mặc dù có một loạt các Chrome Extensions tuyệt vời có thể cung cấp cho bạn thông tin về mã phản hồi thì vẫn có vài điều mà bạn có thể kiểm tra trực tiếp từ DevTools. 

Sử dụng DevTools và điều hướng đến các tab Network.

Tại đây, DevTools hiển thị tất cả các tài nguyên riêng lẻ được tập hợp để biên dịch trang, mã trạng thái tương ứng và hình ảnh trực quan dạng thác nước. 

Có 2 chế độ xem cực kỳ hữu ích ở đây để giúp lọc và sắp xếp thông qua thông tin mã trạng thái. 

Đầu tiên, loại tệp filter ở đầu tab Network sẽ cho phép chúng ta thu hẹp trọng tâm vào những loại nội dung cụ thể: 

Sau khi chọn được 1 nguồn, menu phụ Headers trong tab Networks sẽ cho phép chúng ta xem một loạt các thông tin liên quan đến tệp được chọn. 

Điều này bao gồm tất cả những thông tin tiêu đề HTTP, như là Request URL, Request Method, Status Code, content-encoding, last-modified date, server, v.v. 

Đây có thể là thông tin cực kỳ hữu ích khi khắc phục sự cố. 

Bạn có thể dựa vào thông tin này để:

• Xác minh rằng nén GZip đã được kích hoạt
• Kiểm tra kỹ xem cache-control có hoạt động như mong đợi không
• Xác minh rằng chúng ta đã gửi Google và những user-agents khác mã trạng thái thích hợp. 

3.1 Review mã không sử dụng 

Cuối cùng, tôi luôn muốn để tab Coverage có sẵn trong console drawer. 

Sử dụng tab này, bạn có thể nhanh chóng nhấn tải lại và xác định số lượng mã được chuyển đi đang sự được sử dụng. 

Thông thường, bạn sẽ thấy tệp JavaScript and CSS có một tỷ lệ lớn mã không được sử dụng. 

Khi khắc phục sự cố về tốc độ hoặc hiệu suất của trang web, đây thường là những tài nguyên chặn render đầu tiên nên được đánh giá để tối ưu hóa. 

Nếu bạn đang chuyển hàng loạt CSS chưa bao giờ được sử dụng thì đó sẽ sự tiêu hao rất lớn về hiệu suất. 

CSS luôn chặn render – do đó, những tệp CSS lớn có thể làm chậm đáng kể tốc độ và hiệu suất của trang. 

Bằng cách xác định các scripts không dùng, những chuyên gia SEO có thể thường xuyên hỗ trợ nhà phát triển và quản trị viên web trong việc khắc phục các sự cố nào yêu cầu cần tối ưu hóa nguồn tài nguyên để gia tăng hiệu suất.  

Tóm lại, Google Chrome là một công cụ SEO cực kỳ quan trọng trong kho vũ khí của bạn. 

Tóm lại

DevTools cung cấp một cái nhìn tổng quát về bất kỳ trang web nào và có thể là một phần quan trọng của việc kiểm tra kỹ thuật. 

Tuy nhiên, một trong những phần tốt nhất khi sử dụng DevTools là tốc độ của nó. 

Với đặc tính gắn liền với trang web của bạn, các chuyên gia SEO sẽ luôn có cảm giác được trao quyền để kiểm tra và phát hiện các vấn đề từ việc thu thập dữ liệu đến hiệu suất.

Nguồn tham khảo: 3 Ways to Use Chrome DevTools for SEO Troubleshooting