Sự nguy hiểm của các script bên thứ ba đặt không đúng chỗ

Sự nguy hiểm của các script bên thứ ba đặt không đúng chỗ

Gần đây tôi đã giúp một trong những thành viên trong nhóm SEO của BDA Corp chẩn đoán một trang web khách hàng tiềm năng mới để tìm một số vấn đề gặp phải và tiềm năng để chia sẻ với họ.

Phân tích website tìm vấn đề

Khi tôi kiểm tra trang chủ của họ bằng tiện ích mở rộng Chrome của chúng tôi, tôi đã tìm thấy một thẻ canonical bị đặt sai vị trí. Chúng tôi đã thêm loại phát hiện này một thời gian dài khi lần đầu tiên tôi gặp phải vấn đề này.

Thẻ SEO bị đặt sai chỗ là gì, bạn có thể hỏi như vậy?

Hầu hết các thẻ SEO như tiêu đề, mô tả meta, v.v ... đều thuộc về HTML Head. Nếu chúng được đặt trong HTML BODY, Google và các công cụ tìm kiếm khác sẽ bỏ qua chúng.

Nếu bạn đi đến tab Elements, bạn sẽ tìm thấy các thẻ SEO bên trong thẻ <body>. Nhưng, các thẻ này được cho là nằm trong <head>!

Tại sao một điều như thế này xảy ra?

thẻ canonical đặt đúng chỗ
thẻ canonical đặt sai chỗ

Nếu chúng tôi kiểm tra trang bằng VIEW SOURCE, thẻ canonical được đặt chính xác bên trong HTML Head (dòng 56, trong khi  nằm ở dòng 139.).

Chuyện gì đang xảy ra ở đây? Đây có phải là sự cố của Google Chrome không?

Chúng tôi phát hiện ra cùng một vấn đề với các trình duyệt khác như firefox, IE..

Phân tích cú pháp HTML & syntax highlighting

Tại sao thẻ canonical được đặt chính xác khi chúng tôi kiểm tra XEM NGUỒN, nhưng không phải khi chúng tôi kiểm tra nó trong tab element?

Để hiểu điều này, tôi cần giới thiệu một vài khái niệm dành cho nhà phát triển: lexical analysis and syntax analysis.

Khi chúng tôi xem trang nguồn bằng VIEW SOURCE, trình duyệt sẽ tự động tô màu code (thẻ HTML, nhận xét HTML, v.v.).

Để thực hiện việc này, trình duyệt thực hiện lexical analysis để chia trang nguồn thành HTML tokens.

Nhiệm vụ này thường được thực hiện bởi một lexer. Đây là một nhiệm vụ đơn giản và cấp thấp.

Tất cả các trình biên dịch và trình thông dịch ngôn ngữ lập trình sử dụng lexer có thể ngắt văn bản nguồn thành các mã thông báo.

Làm thế nào để khắc phục điều này

May mắn thay, khắc phục vấn đề này thực sự rất đơn giản. Chúng tôi có hai lựa chọn để xử lý. Một dành cho cách lười biếng và một cách thích hợp chuẩn.

Cách khắc phục thích hợp là theo dõi các tập lệnh chèn các thẻ HTML không hợp lệ vào <body> và di chuyển chúng vào phần <head>.

Cách khắc phục nhanh nhất và lười biếng là di chuyển tất cả các thẻ SEO (và các thẻ quan trọng khác) trước bất kỳ script bên thứ ba nào. Tốt hơn là, ngay sau khi mở thẻ <head>

Một trong những quan niệm sai lầm lớn nhất về SEO kỹ thuật là bạn làm điều đó một lần và bạn đã hoàn thành. Đó sẽ là trường hợp nếu các trang web không thay đổi, người dùng / nhà phát triển đã không phạm lỗi và / hoặc hành vi của Googlebot cũng không thay đổi.

Tôi đã ủng hộ các SEO kỹ thuật học các kỹ năng của nhà phát triển và tôi hy vọng nghiên cứu điển hình này minh họa tầm quan trọng ngày càng tăng của việc này.