Sử dụng Chrome DevTools để khắc phục sự cố - Semalt Prompts



Chrome DevTools không phải là thứ gì đó xa lạ với hầu hết các chuyên gia SEO. Mặt khác, đối với Ñ lients, nó có thể là một trong những điều bạn chưa học được. Chà, tại Semalt, một phần trong quá trình phục vụ nhu cầu SEO của khách hàng dựa vào cách chúng tôi hướng dẫn bạn về các khía cạnh cần thiết của những gì trang web của bạn cần.

Công cụ Chrome Dev dành cho SEO rất quan trọng vì chúng tôi sử dụng nó trong việc khắc phục sự cố. Để cho phép giao tiếp dễ dàng giữa Semalt và khách hàng của chúng tôi, chúng tôi muốn cho bạn thấy cách chúng tôi sử dụng công cụ này để khắc phục các vấn đề về SEO trên trang web của bạn.

Với Công cụ dành cho nhà phát triển của Chrome, chúng tôi có thể xác định các vấn đề cơ bản về SEO, từ khả năng thu thập thông tin của trang web đến hiệu suất của trang web. Trong bài viết này, chúng tôi sẽ nêu bật ba cách chúng tôi sử dụng các công cụ này để phục vụ khách hàng của mình tốt hơn.

Chrome DevTools là gì?

DevTools hay còn gọi là Chrome DevTools là một bộ công cụ hỗ trợ nhà phát triển web được tích hợp trực tiếp vào trình duyệt Chrome. Chúng tôi sử dụng các công cụ này để chỉnh sửa trang nhanh chóng và chẩn đoán sự cố kịp thời. Điều đó giúp chúng tôi xây dựng các trang web tốt hơn cho khách hàng của mình, nhưng chúng tôi có thể làm như vậy nhanh hơn và đảm bảo rằng chúng hoàn hảo.

Tất cả chúng ta có thể đồng ý ở mức độ tuyệt vời rằng Google Chrome là một trong những bộ công cụ quan trọng nhất trong kho vũ khí của bất kỳ chuyên gia SEO nào. Bất kể phần mềm SEO bạn sử dụng để tự động hóa kiểm tra hoặc chẩn đoán các vấn đề SEO trên quy mô lớn, Chrome DevTools vẫn là công cụ bắt buộc phải có. Nhờ khả năng cung cấp những cách quan trọng để kiểm tra các vấn đề SEO một cách nhanh chóng, nhiều chuyên gia SEO, bao gồm Semalt, đã sử dụng nó hết lần này đến lần khác.

Chúng tôi có thể dành nhiều thời gian hơn để thảo luận về nhiều cách Công cụ Chrome DevTools có thể giúp các chuyên gia và nhà phát triển web, nhưng sự chú ý của chúng tôi là về một số thứ cụ thể hơn một chút. Ở đây, chúng tôi muốn chia sẻ với bạn một số trường hợp khác nhau mà chúng tôi đã dựa vào Công cụ dành cho nhà phát triển của Chrome để tìm ra và khắc phục sự cố.

Dưới đây là ba tình huống mà có Chrome DevTools sẽ không phải là một ý tưởng tồi:

Thiết lập Công cụ dành cho nhà phát triển của Chrome để khắc phục sự cố

Rất có thể bạn chưa bao giờ thử sử dụng Chrome DevTools. Chà, truy cập nó đơn giản như nhấp vào một trang web trên SERP và nhấp vào nút kiểm tra. Là các chuyên gia SEO, chúng ta phải cẩn thận hơn thế, nhưng bạn có ý tưởng về cách nó được sử dụng. Tại Semalt, chúng tôi sử dụng cả mặt phẳng Element, cho phép chúng tôi quan sát DOM và CSS, cho phép một số công cụ khác nhau trong ngăn điều khiển.

Chúng tôi sẽ hướng dẫn bạn từng bước về cách công cụ này được sử dụng trong việc khắc phục sự cố SEO.

Để bắt đầu, bạn nên nhấp chuột phải và sau đó chọn kiểm tra. Theo mặc định, bạn sẽ thấy bảng điều khiển phần tử xuất hiện và điều này cho bạn cái nhìn sơ lược về DOM và bản chất của biểu định kiểu được sử dụng trong việc xây dựng trang.

Có quan điểm này cung cấp cho chúng tôi rất nhiều thứ để đi sâu vào; tuy nhiên, chúng tôi bật ngăn điều khiển để tận dụng tối đa bộ công cụ.

Nhấp vào các dấu chấm xuất hiện bên cạnh biểu tượng cài đặt và cuộn xuống cho đến khi chúng tôi bắt gặp tùy chọn Hiển thị ngăn kéo bảng điều khiển. Ngoài ra, chúng tôi chỉ cần nhấp vào phím thoát.

Với bảng điều khiển và bảng điều khiển phần tử được bật, người dùng có thể xem sơ qua mã đã được hiển thị trong DOM. Người dùng cũng sẽ thấy các biểu định kiểu đã được sử dụng để vẽ mã trong trình duyệt. Cũng như một số công cụ khác mà bạn có quyền truy cập từ ngăn điều khiển.

Đối với những người sử dụng lần đầu, ngăn bảng điều khiển có thể không hiển thị chính bảng điều khiển, nhưng sau khi bạn sử dụng Chrome DevTools một thời gian, ngăn bảng điều khiển bắt đầu hiển thị bảng điều khiển. Bảng điều khiển của bạn cho phép bạn xem các tin nhắn đã ghi cũng như chạy javascript. Hôm nay chúng ta sẽ không đi sâu vào vấn đề đó.

Thay vào đó, đây là ba công cụ bổ sung mà chúng ta sẽ xem xét:
Để tìm các công cụ này, hãy chọn nhiều công cụ hơn và chọn từng mục trong số ba mục này để chúng xuất hiện dưới dạng tab trong ngăn bảng điều khiển. Sau khi bật ba bảng này, chúng tôi có thể bắt đầu khắc phục sự cố.

Chuyển đổi tác nhân người dùng trong DevTools

Chuyển đổi User-Agent là một trong những cách bị bỏ qua nhiều nhất để sử dụng DevTools. Đây là một bài kiểm tra đơn giản đã giúp chúng tôi phát hiện ra một số vấn đề khác nhau vì nó cung cấp thông tin chi tiết về cách Googlebot đang xem và xử lý các tính năng thông tin trên một trang web.

Đối với nhóm chuyên gia SEO điều tra của chúng tôi, DevTools được sử dụng như một kính lúp xứng đáng và đáng tin cậy, cho phép chúng tôi Phóng to các vấn đề trong một trang web để không chỉ ngăn chặn các vấn đề đó phát triển mà còn khám phá ra nguyên nhân gốc rễ của các vấn đề đó.

Làm cách nào bạn có thể chuyển tác nhân người dùng của mình trên Chrome DevTools?

Khi chuyển tác nhân người dùng của bạn trong Chrome, bạn sẽ cần sử dụng tab điều kiện mạng trong ngăn bảng điều khiển của mình. Để thực hiện việc này, bạn bỏ chọn lựa chọn tự động, cho phép bạn xem nội dung bằng điện thoại thông minh Googlebot, Bingbot hoặc một số tác nhân người dùng khác để xem nội dung của bạn được phân phối như thế nào.

Trong trường hợp Google không hiển thị thẻ tiêu đề hoặc mô tả meta được cập nhật trong SERP, chắc chắn chủ sở hữu của một trang web như vậy sẽ lo lắng. Việc hiểu lý do tại sao Google chọn sử dụng thẻ tiêu đề hoàn toàn khác hoặc không cập nhật được thẻ là điều quan trọng trong việc đảm bảo rằng các thay đổi bạn đã thực hiện được triển khai.

Sử dụng Chrom DevTool cho trường hợp trang web thay thế trên thiết bị di động

Trong một trường hợp tương tự, sau khi chuyển tác nhân người dùng sang điện thoại thông minh Googlebot, chúng tôi phát hiện ra rằng trang web vẫn đang phân phối một trang web di động thay thế cho Googlebot. Nhưng vì Google đã chuyển sang lập chỉ mục ưu tiên thiết bị di động, nó đã xử lý và lập chỉ mục các thay đổi trên trang web dành cho thiết bị di động nhưng không bắt được các bản cập nhật đã được thực hiện cho phiên bản dành cho máy tính để bàn của Miền.

Bạn có thể cho rằng các trang web di động là một số di tích, nhưng chúng thực sự vẫn tồn tại.

Sử dụng công cụ dành cho nhà phát triển của Chrome trong tính năng bảo vệ máy chủ quá cuồng nhiệt

Có rất nhiều cá nhân có ý định xấu trên web. Nhiều tin tặc và kẻ gian ác cố gắng sử dụng Google để chống lại các trang web trên internet. Vì lý do này, một số CDN ngăn xếp máy chủ và các nhà cung cấp dịch vụ lưu trữ khác có thể cung cấp một số tính năng tích hợp nhất định để ngăn chặn các hành vi giả mạo Googlebot khi ý định thực sự của họ là ngăn chặn các trình thu thập dữ liệu spam truy cập vào trang web. Trong một nỗ lực quá mức, các trang web này có thể sẽ chặn Googlebot truy cập vào trang web. Đôi khi, người dùng thấy các thông báo "Yêu cầu trái phép bị chặn".

Nếu chúng tôi gặp những thông báo như vậy trên SERP của Google, chúng tôi ngay lập tức biết rằng lỗi đang xảy ra ngay cả khi trình duyệt tải nội dung mà không có vấn đề gì.

Bằng cách sử dụng tính năng chuyển đổi Tác nhân người dùng, chúng tôi có thể thấy rằng trang web đang gửi thông báo đó ngay sau khi chúng tôi đặt Tác nhân người dùng thành Điện thoại thông minh Googlebot.

Chẩn đoán các Vitals cốt lõi của web trong DevTools

Tab hiệu suất là một trong những tính năng quan trọng nhất của DevTools. Nó đóng vai trò là một cổng tuyệt vời để khắc phục sự cố ảnh hưởng đến tốc độ và hiệu suất của trang. Một lưu ý chung, DevTools có thể cung cấp một số thông tin hữu ích khi nói đến các quan trọng web cốt lõi.

Các số liệu hình thành Sức mạnh web cốt lõi của Google đã là một phần của báo cáo hiệu suất và tốc độ trang trong một thời gian. Điều rất quan trọng là các chuyên gia SEO phải thông thạo cách phân tích các vấn đề này. Là quản trị viên web, chúng tôi đã nhận thức sâu sắc hơn về tầm quan trọng của các quan trọng web cốt lõi đối với hiệu quả tìm kiếm.

Khi sử dụng tab hiệu suất trong DevTools, chúng tôi tiến thêm một bước để hiểu rõ hơn về các chỉ số web quan trọng.

Kiểm tra kỹ các tiêu đề HTTP của bạn và xem lại mã không sử dụng

Bạn đã bao giờ nghe nói về soft 404 trong các cuộc kiểm tra SEO của mình chưa? Chà, soft 404 là khi trình duyệt có thể hiển thị trang 404, nhưng chúng trả về Mã phản hồi 200 OK.
Trong một số trường hợp, nội dung có thể tải chính xác như mong đợi trên trình duyệt; tuy nhiên, Mã phản hồi HTTP có thể hiển thị lỗi 404 hoặc 302. Nó cũng có thể không chính xác hoặc không như những gì bạn mong đợi. Dù bằng cách nào, sẽ rất hữu ích khi xem mã phản hồi HTTP cho mọi trang và tài nguyên.

Mặc dù có một loạt các Tiện ích mở rộng tuyệt vời của Chrome cung cấp cho bạn thông tin có giá trị về mã phản hồi bằng DevTools có thể cho phép bạn kiểm tra thông tin này trực tiếp.

Tại thời điểm này, DevTools hiển thị tất cả các tài nguyên riêng lẻ được gọi để biên dịch trang. Điều đó bao gồm các mã trạng thái tương ứng và hình ảnh hóa thác nước.

Phần kết luận

Với Chrome DevTools, bạn có khả năng tìm và giải quyết các vấn đề cơ bản ngăn trang web của bạn phát huy hết tiềm năng thực sự của nó. DevTools đặc biệt hữu ích trong các cuộc kiểm tra kỹ thuật của bạn. Ngoài những điều này, bạn cũng tận hưởng tốc độ khi sử dụng DevTools. Không cần rời khỏi trình duyệt web của chúng tôi, nhóm của chúng tôi tại Semalt có thể cảm thấy được trao quyền để phát hiện các vấn đề kiểm tra từ việc thu thập thông tin một trang web đến mức độ hoạt động của trang web.

Semalt ở đây để giúp bạn khai thác tốt nhất trang web của mình và chúng tôi hy vọng bạn sẽ liên hệ với nhóm của chúng tôi. Chúng tôi mong chờ tin từ bạn.