Với khả năng dường như vô hạn của JavaScript, các trang web thông thường chỉ dựa trên HTML và CSS đang trở thành dĩ vãng. Nhưng trong khi JavaScript mang lại trải nghiệm năng động cho người dùng, thì nó cũng tạo ra một bãi mìn cho các nhà phát triển. Vì điều này, JavaScript SEO đã trở thành một thứ không thể bỏ qua, đặc biệt là khi đảm bảo rằng Googlebot phân tích kết xuất JavaScript chính xác
JS hoạt động như thế nào?
Đối với những người không quen thuộc với JavaScript, đây là phần giới thiệu nhanh
Cùng với HTML và CSS, JavaScript là một trong ba công nghệ phát triển web cốt lõi. HTML được sử dụng để tạo các trang tĩnh [có nghĩa là mã được hiển thị trong trình duyệt và không thể thay đổi dựa trên hành động của người dùng], trong khi JavaScript tạo ra một trang Web động. Lập trình viên có thể sử dụng JavaScript để thay đổi giá trị và thuộc tính của thẻ HTML khi người dùng nhấp vào nút hoặc chọn giá trị từ hộp thả xuống. JavaScript được đặt trên trang cùng với mã HTML và nó hoạt động cùng với mã
Kết xuất phía máy khách và phía máy chủ
Có 2 khái niệm chúng ta cần nhắc đến khi nói về JavaScript. Và điều rất quan trọng là phải hiểu sự khác biệt giữa chúng. kết xuất phía máy chủ và kết xuất phía máy khách
Theo truyền thống, như trường hợp của các trang HTML tĩnh, mã được hiển thị trên máy chủ [kết xuất phía máy chủ]. Khi truy cập một trang, Googlebot nhận được nội dung hoàn chỉnh và "sẵn sàng", do đó, nó không cần phải làm gì ngoài việc tải xuống các tệp CSS và hiển thị thông tin trong trình duyệt của bạn
Mặt khác, JavaScript thường chạy trên máy khách [kết xuất phía máy khách], nghĩa là Googlebot ban đầu nhận một trang không có bất kỳ nội dung nào, sau đó JavaScript tạo DOM [Mô hình đối tượng tài liệu] được sử dụng để tải kết xuất . Điều này xảy ra mỗi khi một trang được tải
Rõ ràng, nếu Googlebot không thể thực thi và hiển thị JavaScript đúng cách, thì nó không thể hiển thị trang và nội dung chính mà bạn muốn nó xem. Và đây là nơi phát sinh hầu hết các vấn đề với JavaScript SEO
Bây giờ hãy xem làm thế nào bạn có thể tránh những vấn đề nói trên
Cách kiểm tra xem trang web của bạn có được hiển thị đúng không
Để Googlebot hiển thị chính xác trang web của bạn, bạn phải tập trung vào việc hiển thị chính xác cả liên kết và nội dung trên trang web của mình. Nếu bạn không hiển thị liên kết, Googlebot sẽ gặp khó khăn trong việc tìm đường xung quanh trang web của bạn. Và nếu bạn không hiển thị đúng nội dung trên trang web của mình, Googlebot sẽ không thể xem nội dung đó
Dưới đây là một số tùy chọn giúp bạn cải thiện SEO JavaScript trong tương lai của mình
1. Trang web. ' chỉ huy
Trước hết, trang web. lệnh sẽ cho bạn biết có bao nhiêu trang trên trang web của bạn hiện đang được Google lập chỉ mục. Nếu nhiều trong số chúng chưa có trong chỉ mục, đó có thể là dấu hiệu của sự cố kết xuất với các liên kết nội bộ
Thứ hai, bạn có thể muốn kiểm tra xem bản thân nội dung tải JavaScript của bạn đã được Google lập chỉ mục chưa
Để làm điều đó, bạn cần tìm một dòng văn bản nhất định không được trình bày trong mã HTML ban đầu của bạn và chỉ được tải sau khi JavaScript được thực thi. Sau đó, tìm kiếm dòng văn bản này trong chỉ mục của Google bằng cách sử dụng 'trang web. tên miền của bạn. lệnh com'
http. //cầm lấy. ms/AXVnd
Lưu ý rằng điều này sẽ không hoạt động với bộ đệm. lệnh, vì các phiên bản được lưu trong bộ nhớ cache của các trang của bạn chỉ chứa mã gốc, chưa được hiển thị
2. GoogleBot thường xanh
Googlebot là trình thu thập dữ liệu truy cập các trang web để đưa chúng vào chỉ mục Tìm kiếm của Google. Câu hỏi số một mà Google nhận được từ cộng đồng tại các sự kiện và phương tiện truyền thông xã hội là liệu họ có thể làm cho Googlebot trở nên xanh tươi với Chromium mới nhất không. Tại thời điểm viết bài, GoogleBot chạy trên phiên bản Chrome mới nhất, 74
Đây là công cụ thay đổi cuộc chơi cho SEO, bởi vì giờ đây bạn có thể kiểm tra xem Google thực sự hiển thị một trang như thế nào thay vì đoán và hy vọng điều tốt nhất
Bổ sung các tính năng mới của sáng tạo mới nhất của Google
3. Chrome DevTools
Một số phần của trang web dựa trên JavaScript của bạn có thể được lập trình để thực thi theo hành động của một người dùng nhất định – nhấp chuột, cuộn, v.v. Tuy nhiên, Googlebot không phải là người dùng. Nó sẽ không nhấp hoặc cuộn xuống, vì vậy đơn giản là nó sẽ không thấy nội dung bạn đang tải khi thực hiện những hành động này
Cách nhanh nhất và dễ dàng nhất để kiểm tra xem tất cả các phần tử dựa trên JavaScript đã được tải mà không cần bất kỳ hành động nào của người dùng hay chưa bằng cách sử dụng Chrome DevTools
- Mở trang web của bạn trong Chrome
- Mở tab Thành phần trong DevTools
- Xem cách trang của bạn được hiển thị bằng cách xem qua DOM của trang thực do trình duyệt tạo – đảm bảo rằng tất cả các thành phần điều hướng và nội dung quan trọng đều đã có mặt ở đó
Tôi khuyên bạn nên kiểm tra nó trong Chrome 41. Điều này sẽ mang lại cho bạn sự tự tin rằng về mặt kỹ thuật, Googlebot có thể nhìn thấy phần tử này
Tất nhiên, bạn cũng có thể kiểm tra nó trong phiên bản Chrome hiện tại của mình và thực hiện một số so sánh
http. //cầm lấy. ms/GgsqO
4. Tìm nạp và kết xuất của Google Search Console
Một công cụ hữu ích khác, có thể cung cấp cho chúng tôi ý tưởng về cách Google hiển thị trang web của chúng tôi, là chức năng Tìm nạp và Kết xuất trong Google Search Console
Trước tiên, bạn phải sao chép và dán URL của mình. Sau đó nhấp vào 'Tìm nạp và kết xuất' và đợi một lúc. Điều này sẽ cho phép bạn xem liệu Googlebot có thể hiển thị trang của bạn hay không và xem bất kỳ bài viết, bản sao hoặc liên kết nào có liên quan
http. //cầm lấy. ms/prmvp
Tại đây, bạn cũng có thể sử dụng Kiểm tra tính thân thiện với thiết bị di động của Google, kiểm tra này sẽ hiển thị cho bạn các lỗi JavaScript và mã của trang được hiển thị
5. Phân tích nhật ký máy chủ
Điều cuối cùng bạn có thể sử dụng để xác minh cách Googlebot thu thập dữ liệu trang web của bạn là phân tích nhật ký máy chủ. Bằng cách xem kỹ nhật ký máy chủ, bạn có thể kiểm tra xem các URL cụ thể đã được Googlebot truy cập chưa và phần nào đã hoặc chưa được Googlebot thu thập dữ liệu
Có nhiều yếu tố bạn có thể phân tích nhờ nhật ký phía máy chủ của mình. Ví dụ: bạn có thể kiểm tra xem Googlebot có truy cập các bài viết cũ hơn của bạn hay không — nếu không, có thể có vấn đề với các liên kết, nguyên nhân có thể do sự cố với JS
Bạn cũng có thể kiểm tra xem Googlebot có nhìn thấy mọi phần trên trang web của bạn hay không — nếu không, điều này cũng có thể do sự cố hiển thị gây ra
Nhật ký máy chủ sẽ không cho bạn thấy cách Googlebot xem các trang. Bạn chỉ có thể kiểm tra xem các trang đã được truy cập hay chưa và mã phản hồi nào đã được gửi. Cần phân tích bổ sung để xác định xem có bất kỳ sự cố nào do JavaScript gây ra hay không
Hơn nữa, bằng cách xem nhật ký máy chủ, bạn có thể kiểm tra xem Googlebot có yêu cầu JavaScript kết xuất HTML quan trọng của bạn hay hoàn toàn bỏ qua yêu cầu đó
Các sự cố có thể xảy ra khi hiển thị trang web của bạn
Ngay cả khi trang của bạn được hiển thị chính xác bằng Tìm nạp và kết xuất trong Search Console, điều này không có nghĩa là bạn có thể ngồi xuống và thư giãn. Vẫn còn những vấn đề khác bạn cần để mắt đến
Hãy bắt đầu với một số vấn đề lớn nhất có thể làm đảo lộn nghiêm trọng các kế hoạch SEO JavaScript của bạn…
1. Hết giờ
Mặc dù thời gian chờ chính xác không được chỉ định, nhưng người ta nói rằng Google không thể đợi tập lệnh dài hơn 5 giây. Các thí nghiệm của chúng tôi tại Elephate xác nhận quy tắc này. Nếu tập lệnh tải lâu hơn 5 giây, Google thường sẽ không lập chỉ mục nội dung mà nó cần để tạo
Tìm nạp và Kết xuất sẽ cho bạn biết liệu Google có thể hiển thị trang hay không, nhưng nó sẽ không bao gồm thời gian chờ. Điều quan trọng cần nhớ là Tìm nạp và kết xuất linh hoạt hơn nhiều so với Googlebot tiêu chuẩn, vì vậy bạn sẽ cần thực hiện thêm một bước để đảm bảo rằng các tập lệnh bạn đang phân phát có thể tải dưới 5 giây
2. giới hạn trình duyệt
Như tôi đã đề cập trước đó, Google sử dụng phiên bản hơi lỗi thời của trình duyệt để hiển thị trang web. Chrome 41 ba tuổi. Và vì JavaScript SEO và công nghệ đằng sau nó đã phát triển và đang tiếp tục phát triển rất nhanh nên một số tính năng mới nhất của nó hoạt động trong các phiên bản Chrome mới nhất có thể không được hỗ trợ trong Chrome 41
Do đó, giải pháp tốt nhất là tải xuống trình duyệt Chrome 41 [tại thời điểm viết bài này, phiên bản mà Google sử dụng để hiển thị web] và tự làm quen với nó. Kiểm tra nhật ký bảng điều khiển để xem bất kỳ lỗi nào xảy ra ở đâu và yêu cầu nhà phát triển của bạn khắc phục chúng
3. Nội dung yêu cầu tương tác của người dùng để tải
Tôi biết tôi đã nói điều này rồi, nhưng nó thực sự cần lặp lại. Googlebot không hành động như một người dùng. Googlebot không nhấp vào nút, không mở rộng "đọc thêm", không nhập tab, không điền vào bất kỳ biểu mẫu nào. nó chỉ đọc và làm theo
Điều này có nghĩa là toàn bộ nội dung bạn muốn hiển thị phải được tải ngay lập tức vào DOM chứ không phải sau khi hành động đã được thực hiện
Điều này đặc biệt quan trọng đối với nội dung và menu "đọc thêm", chẳng hạn như trong menu hamburger
Chúng tôi có thể làm gì để giúp Googlebot hiển thị trang web tốt hơn?
Việc hiển thị trang web của Googlebot không phải là con đường một chiều. Có rất nhiều điều mà các nhà phát triển có thể làm để tạo điều kiện thuận lợi cho quá trình này, vừa giúp làm nổi bật những thứ bạn muốn Googlebot hiển thị vừa mang đến cho các nhà phát triển một giấc ngủ ngon về SEO JavaScript thành công
Tránh liên kết 'OnClick'
Công cụ tìm kiếm không xử lý ' title="window. location="' như các liên kết thông thường, có nghĩa là trong hầu hết các trường hợp, chúng sẽ không tuân theo loại điều hướng này—và các công cụ tìm kiếm chắc chắn sẽ không coi chúng là tín hiệu liên kết nội bộ
Điều tối quan trọng là các liên kết phải nằm trong DOM trước khi thực hiện nhấp chuột. Bạn có thể kiểm tra điều này bằng cách mở Công cụ dành cho nhà phát triển trong Chrome 41 và kiểm tra xem các liên kết quan trọng đã được tải chưa — mà không cần thêm bất kỳ thao tác nào của người dùng
http. //cầm lấy. ms/wUC3a
Tránh # trong URL
Googlebot không hỗ trợ # mã định danh phân đoạn và bỏ qua. Vì vậy, thay vì sử dụng ví dụ. cấu trúc URL com/#url, hãy cố gắng tuân theo định dạng URL rõ ràng — ví dụ. com/url
URL duy nhất cho mỗi phần nội dung duy nhất
Mỗi phần nội dung của bạn phải được đặt "ở đâu đó" để công cụ tìm kiếm lập chỉ mục cho nó. Đây là lý do tại sao điều quan trọng cần nhớ là nếu bạn tự động thay đổi nội dung của mình mà không thay đổi URL, thì bạn đang ngăn các công cụ tìm kiếm truy cập nội dung đó
Tránh lỗi JS
HTML rất dễ tha thứ, nhưng JavaScript chắc chắn là không
Nếu trang web của bạn có lỗi trong các tập lệnh JS, chúng sẽ không được thực thi, điều này có thể dẫn đến nội dung trang web của bạn hoàn toàn không được hiển thị. Một lỗi trong tập lệnh có thể gây ra hiệu ứng domino dẫn đến nhiều lỗi khác
Để kiểm tra mã và giữ cho JavaScript của bạn không bị lỗi, một lần nữa bạn có thể sử dụng Công cụ dành cho nhà phát triển của Chrome và xem lại tab Bảng điều khiển để xem lỗi nào đã xảy ra và trong dòng mã JavaScript nào
Đừng chặn JS trong robot. txt
Chặn các tệp JS là một phương pháp rất cũ, nhưng nó vẫn xảy ra khá thường xuyên. Nó thậm chí đôi khi xảy ra như một mặc định trong một số CMS. Và mặc dù mục tiêu là tối ưu hóa ngân sách thu thập dữ liệu, nhưng việc chặn các tệp JS [và biểu định kiểu CSS] được coi là một cách làm rất tồi. Đừng lấy nó từ tôi, đây là những gì Google nói về chủ đề này
"Chúng tôi khuyên bạn nên đảm bảo rằng Googlebot có thể truy cập bất kỳ tài nguyên được nhúng nào đóng góp một cách có ý nghĩa vào nội dung hiển thị trên trang web của bạn hoặc bố cục của nó. "
Vì vậy, đừng mơ về việc chặn trình thu thập thông tin của công cụ tìm kiếm bằng thứ gì đó như thế này
http. //cầm lấy. ms/OoAEp
Nếu không, SEO JavaScript của bạn sẽ có một cú hích thực sự
kết xuất trước
Khi bạn phát hiện ra rằng Google gặp sự cố khi hiển thị trang web JavaScript của bạn, bạn có thể sử dụng kết xuất trước
Hiển thị trước đang cung cấp tài liệu HTML kết xuất JavaScript được tạo sẵn cho trang web của bạn. Điều này có nghĩa là Googlebot không nhận JavaScript hiển thị HTML, mà là HTML thuần túy. Đồng thời, người dùng truy cập trang web sẽ nhận được cùng một phiên bản giàu JavaScript của trang của bạn
Giải pháp phổ biến nhất là sử dụng các dịch vụ bên ngoài để kết xuất trước, chẳng hạn như Prerender. io, tương thích với tất cả các khung JS quan trọng nhất
Về cơ bản, bạn kết xuất HTML theo cách bao gồm tất cả JavaScript tiềm năng — bạn chỉ cần thêm phần mềm trung gian hoặc một đoạn mã vào máy chủ web của mình
Con đường thế kỷ 21
Trình bày cho bạn danh sách các nguyên tắc và mẹo này là một việc nhưng lại là một việc hoàn toàn khác để chứng minh quy trình về cách chúng có thể được thực hiện. Sử dụng một công cụ từ những công ty hàng đầu trên thị trường có tên là WebSite Auditor, chúng ta sẽ phân tích một trang web mẫu để tìm các lỗi JavaScript phổ biến
Bao gồm trong công cụ này, là các đề xuất về cách giải quyết các vấn đề khác mà bạn sẽ gặp phải trong JavaScript, điều này chắc chắn sẽ hữu ích cho những người không có kinh nghiệm xử lý ngôn ngữ này cả đời.
WebSite Auditor có thể thực thi JavaScript và thu thập dữ liệu nội dung được tạo động — chính xác như các trình duyệt hiện đại [và Google] làm. Điều đó có nghĩa là nếu trang web của bạn được xây dựng trên AJAX [với một nền tảng như Wix hoặc Squarespace] hoặc sử dụng JavaScript để tạo một số nội dung của nó, WebSite Auditor có thể kết xuất, thu thập dữ liệu và phân tích đầy đủ — loại bỏ tất cả các công việc nặng nhọc
Tại sao không dùng thử và tải xuống miễn phí
Tóm lược
Chủ đề về JavaScript SEO là chủ đề năng động nhất trong thế giới SEO và chắc chắn đáng để bạn quan tâm, đặc biệt là khi nó đang phát triển rất nhanh. Các sự cố được mô tả trong bài viết này chỉ là một phần nhỏ trong những gì bạn có thể điều tra để đảm bảo rằng Googlebot đang hiển thị chính xác trang web của bạn. Nếu bạn quan tâm đến việc có được bức tranh toàn cảnh hơn, hãy xem Hướng dẫn cơ bản về SEO JavaScript của Onely
Qua. Bartosz Goralewicz
Bartosz Goralewicz là người đồng sáng lập Elephate, gần đây đã được trao giải "Cơ quan SEO nhỏ tốt nhất" tại Giải thưởng Tìm kiếm Châu Âu 2018. Kể từ năm 2019, anh ấy là người sáng lập và Giám đốc điều hành của Onely — Cơ quan SEO kỹ thuật tiên tiến nhất trên hành tinh. Onely tin tưởng vào việc mở ra những cách thức mới trong ngành SEO thông qua các chiến dịch SEO chính xác, táo bạo cho khách hàng, thử nghiệm SEO và nghiên cứu điển hình. Bartosz lãnh đạo một nhóm chuyên gia SEO kỹ thuật chuyên môn cao làm việc về tối ưu hóa kỹ thuật chuyên sâu cho các cấu trúc lớn, quốc tế. SEO kỹ thuật không chỉ là công việc của Bartosz mà còn là một trong những niềm đam mê lớn nhất của anh ấy, đó là lý do tại sao anh ấy thích đi du lịch vòng quanh thế giới để chia sẻ niềm đam mê này với những người có cùng chí hướng với SEO.