Nếu bạn đang tiến hành một cuộc đánh giá SEO, bạn có lẽ nên sử dụng công cụ cho nhà phát triển trong Google Chrome. Nhà báo Aleyda Solis chia sẻ về 10 cách để sử dụng các công cụ này để xác định và sửa các vấn đề SEO.
Dù nhiều trong số chúng ta trong ngành đã trả hàng trăm hoặc thậm chí hàng ngàn cho phần mềm SEO giúp cho việc tự động hóa và đơn giản hóa công việc hàng ngày của ta, chúng ta đã có một trong những công cụ SEO tiện dụng nhất trên thị trường với công cụ dành cho nhà phát triển (DevTools) của Chrome. Được tích hợp trong Google Chrome, bộ công cụ biên soạn và sửa lỗi này cho phép ta xác nhận về vài trong số khía cạnh nền tảng và quan trọng của SEO của bất cứ trang web nào.
Trong phần lớn các trường hợp, sử dụng DevTools khá đơn giản. Nhưng có một số ứng dụng rất tiện dụng và không dễ biết cho phân tích SEO. Hãy xem xét chúng ngay bây giờ.
Hãy bắt đầu bằng việc đi đến trang web bạn muốn phân tích trong Google Chrome và mở DevTools. Bạn có thể làm điều này bằng cách chọn More Tools > Developer Tools từ menu Google Chrome ở phía trên góc phải của cửa sổ trình duyệt.
Cách khác, bạn có thể sử dụng cụm phím tắt Ctrl+Shift+I (trong Windows) hoặc Cmd+Opt+I (trong Mac), hoặc bạn có thể nhấp chuột phải ở phần tử trang mà bạn muốn phân tích và nhấn “Inspect” từ menu xổ xuất hiện.
1. Kiểm tra các phần tử nội dung chính của trang, bao gồm cả những thành phần dựng JavaScript
Google giờ đã có thể thu thập và lập chỉ mục nội dung dựa trên JavaScript, nhưng họ không thường làm điều đó trơn tru. Vì thế, cần thiết phải xác nhận các phần tử nội dung chính của trang của bạn - không chỉ đánh giá mã nguồn HTML của chúng, mà cũng phải kiểm tra DOM để xem thông tin sẽ thực sự được dựng và xác định bởi Google như thế nào.
You can directly see the DOM of any page with DevTools in the “Elements” panel.
Bạn có thể xem trực tiếp DOM của bất cứ trang web nào với DevTools trong phần “Elements”.
Sử dụng điều này để đánh giá nội dung của bất cứ phần tử trang nào (như tiêu đề, mô tả meta hoặc văn bản) để xác nhận rằng thông tin mong muốn được hiển thị trong mỗi trường hợp, để đảm bảo nó có thể truy cập bởi Google.
Ví dụ, trong phần trên bên trái của hình chụp phía dưới, ta có thể thấy dòng chữ chính (khung màu đỏ) được chứa trong một lệnh <div>. Nhưng nó thực sự được thực thi với JavaScript, mã lệnh cho nó có thể được thấy ở phần bên trên góc phải, phần thể hiện mã lệnh HTML của trang.
Khi xem xét sự khác nhau này giữa nội dung được hiển thị trong hai trường hợp, bạn có thể tiến hành các bước thích hợp để xác nhận nó có được lập chỉ mục đúng hay không: đánh giá trang lưu tạm trên Google, xác nhận đoạn văn bản được hiển thị trên kết quả tìm kiếm Google khi tìm kiếm cho nó, sử dụng tính năng “Fetch as Googlebot” trong Google Search Console.
2. Tìm kiếm nội dung CSS ẩn
Có một điều được biết là Google bỏ qua các nội dung văn bản mà mặc dù bao gồm trong mã nguồn HTML của trang, nhưng mặc định bị ẩn với người dùng với các thẻ và lựa chọn menu cần phải được nhấn vào để xem hoặc mở rộng ra.
Các cách phổ biến nhất để ẩn văn bản là sử dụng CSS với thuộc tính “display:none” hoặc “visibility:hidden”, vì thế bạn nên kiểm tra xem có thông tin quan trọng nào trong các trang web của bạn có thể bị ẩn theo các cách này không.
Bạn có thể làm điều này với mục “Search” trong DevTools của Chrome, mà bạn có thể truy cập bằng cách nhấn Ctrl + Shift + F (trong Windows) or Cmd + Opt + F (trong Mac) khi mở DevTools. Tính năng tìm kiếm này cho pháp bạn xem không chỉ xem bản thân các tệp trang được mở mà toàn bộ các nguồn được sử dụng, bao gồm CSS và JavaScript.
Ở đây bạn có thể tìm kiếm các thuộc tính mong muốn, trong trường hợp này là “hidden” hoặc “display:none” để xác định liệu chúng có tồn tại trong mã lệnh trang không và ở đâu.
Nhấp vào một kết quả tìm kiếm để xem xét mã lệnh đầy đủ bao quanh thuộc tính mà bạn vừa tìm kiếm. Đánh giá mã lệnh để xem xem văn bản nào bị ẩn, nếu nó là nội dung quan trọng, kiểm tra xem nó có bị Google bỏ qua không, và có hành động thích hợp.
3. Xác nhận các mô tả hình ảnh ALT của bạn
Bên cạnh việc kiểm tra các phần tử như văn bản nội dung chính của trang web của bạn, bạn cũng có thể xác nhận các mô tả ALT của hình ảnh của mình trong mục “Elements”. Nhấp chuột phải trên bất cứ hình ảnh nào và lựa chọn “Inspect”, như hình dưới:
4. Xác định các thiết lập no-index & canonical trong các trang và nguồn
Bạn cũng có thể sử dụng DevTools của Chrome để xem xét thiết lập kỹ thuật của trang web của mình. Ví dụ như bạn có thể xác nhận thiết lập meta robots cho thu thập dữ liệu và thiết lập canonical (tránh trùng lặp nội dung), bằng cách sử dụng mục “Search” để tìm kiếm cho các thẻ đặc biệt và đánh giá xem chúng được thực thi thế nào.
Việt xác thực này không chỉ được tiến hành cho việc thực thi các thẻ này trong vùng <head> của HTML, mà cũng ở trong tiêu mục HTTP, bằng cách đi đến mục “Network” và chọn trang web hoặc nguồn mong muốn để xác thực thông tin tiêu đề, ví dụ như sự tồn tại của liên kết rel=”canonical” trong một tệp hình ảnh như dưới đây.
5. Tìm kiếm trạng thái HTTP trong thiết lập đề mục
Khi kiểm tra thiết lập đề mục của các trang và mã nguồn sử dụng mục “Network”, bạn cũng có thể xác nhận trạng thái HTTP và xem xem có bất kỳ chuyển hướng nào không, kiểu chuyển hướng đó là gì, và các trạng thái lỗi, cũng như sự bao gồm của các thiết lập khác như thẻ x-robot, hreflang hoặc “vary: user agent”.
6. Xác nhận việc tối ưu hóa trang web cho di động bằng cách giả lập bất cứ thiết bị nào
Sự thân thiện với di động giờ là tối quan trọng với SEO, và bạn có thể xác nhận thiết lập trang và nội dung trong di động sử dụng “Device Mode” của DevTools. Lựa chọn này có thể được hiện thị bằng cách nhấn chuột vào biểu tượng thiết bị ở vùng trên bên trái của thanh công cụ hoặc tổ hợp Command+Shift+M (trong Mac) or Ctrl+Shift+M (trong Windows, Linux) khi DevTools được mở.
Trong Device Mode, bạn sẽ có phần điều khiển hiển thị ở phần trên cửa sổ. Ở đây bạn có thể lựa chọn chế độ hiển thị phản hồi (có thể tự do thay đổi kích thước) hoặc chọn một thiết bị cụ thể để kiểm tra trang. Bạn cũng có thể thêm thiết bị tùy chỉnh của mình sử dụng lựa chọn “Edit…”.
7. Truy cập vào thời gian tải trang & xác định các vấn đề về tốc độ
Phân tích bất kỳ thời gian tải trang của trang web nào bằng cách giả lập các trạng thái mạng và thiết bị được sử dụng. Để làm điều này, bạn có thể vào công cụ “Network Conditions”, bằng cách truy cập vào menu Customization ở phía trên góc phải ở dưới phần ““More tools”.
Ở đây bạn sẽ thấy các thiết lập “Caching,” “Network throttling” và “User agent”.
Khi bạn đã chọn xong thiết lập của mình, bạn có thể tải lại trang mong muốn và đi vào thanh công cụ “Network” để xem không chỉ thời gian tải trang đầy đủ (Load) mà đồng thời khi đánh dấu ban đầu của trang được phân tích (DOMContentLoaded), cả hai mục này đều xuất hiện ở bên dưới của cửa sổ. Bạn cũng có thể đồng thời xem thời gian tải và dung lượng của mỗi nguồn được sử dụng, điều có thể được ghi lại bằng cách nhân vào nút đỏ ở phía trái của thanh công cụ.
Để có các khuyến nghị về các hành động cần làm để cải thiện hiệu suất tốc độ trang, điều hướng đến thanh công cụ “Audits” và nhấn nút “Run”. Mỗi khuyến nghị sẽ nói cụ thể về các nguồn liên quan gây nên các vấn đề, như có thể thấy dưới đây:
Thêm vào đó, bạn có thể chụp ảnh lại màn hình của việc dựng trang của bạn với lựa chọn “Filmstrip”. Bằng cách nhấp chuột vào biểu tượng máy ảnh và tải lại trang, bạn có thể xem hình chụp màn hình của trang web của bạn qua các giai đoạn tải khác nhau, điều này cho phép bạn xác nhận những gì người dùng có thể thấy ở mọi giai đoạn.
8. Xác định các nguồn chặn dựng trang
Bạn cũng có thể sử dụng dữ liệu tải trang của các nguồn trong thanh công cụ “Network” để xác định nguồn JS và CSS nào được tải trước khi DOM và có thể chặn nó, đây là một trong những vấn đề với tốc độ tải trang phổ biến nhất. Bạn có thể lọc CSS và JS bằng cách nhấn chuột vào các nút tương ứng (như hình dưới).
9. Tìm kiếm các nguồn không an toàn trong các quá trình di chuyển HTTPS
DevTools của Chrome có thể rất hữu ích trong quá trình di chuyển HTTPS, khi nó cho phép bạn xác định các vấn đề an toàn trong bất cứ trang web nào với thông tin được cung cấp trong thanh công cụ “Security”. Bạn có thể xem xem trang web có an toàn và có chứng chỉ HTTPS hiệu lực không, kiểu kết nối bảo mật, và nếu có vấn đề nội dung phúc tạp nào vì nguyên do không an toàn của bất cứ nguồn nào được sử dụng không.
10. Xác nhận việc thực thi AMP của bạn
Nếu bạn đang thực thi AMP (trang dành cho di động được tăng tốc), bạn có thể xem xét xem có bất cứ vấn đề nào với trang của mình bằng cách thêm chuỗi “#development=1” vào đường dẫn AMP của mình, sau đó kiểm tra thanh công cụ “Console”. Điều này sẽ cho bạn biết có vấn đề, cảnh báo hoặc lỗi nào không - và phần tử nào và dòng lệnh nào được tìm thấy để bạn có hành động thích hợp để sửa chúng.
Phụ lục: Các thiết lập DevTools Chrome cá nhân
Như bạn có thể thấy thì bạn có thể sử dụng DevTools của Chrome cho SEO theo nhiều cách mà bạn sẽ có khả năng dành thời gian với chúng. Vì thế bạn có lẽ muốn cá nhân hóa nó một chút dựa trên sở thích của mình. Bạn có thể điều chỉnh hiển thị, bật các phím tắc và hơn thế nữa.
Bạn có thể làm điều này trong tùy chỉnh “Preferences”, bằng cách nhấn vào nút menu Customization ở phía trên góc phải của thanh công cụ và lựa chọn “Settings”.
Cuối cùng, khi nói về cá nhân hóa: Phân tích các dòng lệnh rút gọn có thể khó để phân tích, vì vậy hãy chắc chắn rằng nhấn vào nút “{}” trong vùng giữa phía dưới của thanh công cụ để bạn có thể thấy phiên bản không rút gọn. Điều này sẽ cho phép bạn làm việc với nó dễ dàng vì việc đọc nó được cải thiện.
Tôi hy vọng các mẹo với DevTools của Chrome này sẽ giúp công việc SEO của bạn dễ dàng hơn!
Nguồn: http://searchengineland.com/
