Cảnh báo: Bạn đang giết chết những nỗ lực SEO khi sử dụng Angular JS

Bạn có còn nhớ những năm 90 trở về trước khi mà Google mới chỉ xuất hiện, điện thoại thông minh và các ứng dụng vẫn còn là một ẩn số, vẫn có một số hạn chế về ngôn ngữ mã hóa và nền tảng, và dường như cuộc sống trở nên khó khăn hơn. Các nhà phát triển đã có một lượng kha khá các công việc mà đôi khi nỗ lực của họ trở thành dã tràng xe cát, họ bực bội và mệt mỏi. Khi công nghệ ngày càng phát triển trong các ứng dụng điện thoại thông minh, các nền tảng mới xuất hiện, tất cả chỉ để đơn giản hóa quá trình phát triển.



Vấn đề chính ở đây là thế giới của các nhà phát triển và thế giới marketing online, đặc biệt là SEO không đồng bộ đó là lý do tại sao chúng ta đang phải chứng kiến sự ra mắt của các nền tảng phát triển mới mà chủ yếu là dựa vào JavaScript. Có nghĩa là Google không thể render đúng cách hoặc không thể index các trang đó. Bài viết này cho thấy cách Google có thể index JS. Nhưng thật tiếc là, hầu hết các nhà marketing online và các nhà phát triển đang nhận thấy họ phải đối mặt với một tình huống mà một trang web chỉ được render và index một phần mà không biết lý do tại sao.

Bài viết này sẽ nói đến việc thúc đẩy các trang web Angular, nó cũng cung cấp cho các nhà marketing chuyên nghiệp hiểu biết rõ hơn về nền tảng Angular khi gặp phải một khách hàng có một trang web Angular. Bạn sẽ biết được Angular ảnh hưởng đến toàn bộ một trang web như thế nào, những lợi thế và bất lợi của nó, dự kiến những vấn đề nó scan và cách để khắc phục tất cả mọi thứ. Bạn có thể làm được tất cả những điều này mà không phải thúc giục khách hàng thay đổi nền tảng của họ.

Tuy nhiên, bài viết này cũng dành cho các nhà phát triển, những người có thể không có kiến thức về SEO. Bạn biết nó là như thế nào, bạn có thể biết được mình có đang làm việc với một chuyên gia SEO hay không. Khi nói đến các vấn đề phức tạp hơn, có thể bạn không hiểu tại sao team SEO khẳng định về cách đặt một từ khóa cụ thể hoặc tại sao SEO nhấn mạnh tầm quan trọng của một số thứ hơn những thứ khác trong khi bạn có thể cảm thấy nó vô nghĩa.

Trong bài này, tôi sẽ đặt ra các vấn đề cơ bản của Angular với các nhà marketing: tại sao nó lại cần thiết, ưu và nhược điểm của nó, các bước cần thiết để nó đi đúng hướng. Quan trọng nhất, tôi sẽ cố gắng cung cấp các công cụ hướng dẫn các nhà marketing giao tiếp một cách hiệu quả hơn để họ có thể hiểu được chính xác mọi khía cạnh. Sau đó, tôi sẽ cố gắng giải thích quá trình index của Google cho các nhà phát triển, các vấn đề mà các nhà marketing gặp phải với Angular.

Mặc dù nó có nhiều lợi thế nhưng nó vẫn là một nền tảng có vấn đề. Mục đích của bài viết này là cung cấp cho bạn những công cụ để xử lý một trang web Angular và mang lại hiệu quả SEO. Nếu bạn đang phân vân không biết lựa chọn ngôn ngữ và nền tảng nào để phát triển một trang web mới, tôi khuyên bạn nên cân nhắc lựa chọn khác trước khi chọn Angular.

Angular là gì?

Angular là một framework có cấu trúc cho các ứng dụng web động. Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích.

Angular đưa tất cả framework và kết nối chúng lại với nhau để đảm bảo cho các công cụ làm việc với nhau. Framwork thế hệ tiếp theo, nó cung cấp cách để thực thi một Module-View-Controller.

Các framework truyền thống yêu cầu bạn tách MVC (Model View Controller) thành các components sau đó tạo ra một mã để tái kết hợp chúng. Cách tiếp cận Angular này lại trái ngược: chỉ cần tháo gỡ các ứng dụng của bạn vào module MVC và feed chúng vào Angular. Nó không chỉ quản lý các module mà nó còn cung cấp các kênh cho phép chúng có thể giao tiếp với nhau. Cách tiếp cận này cũng ngăn chặn các shortcuts bởi một lập trình viên muốn tạo ra theo phong cách của riêng mình.

Nếu khách hàng hoặc công ty của bạn đang nghĩ đến việc tạo ra một ứng dụng di động, ứng dụng một trang đơn hoặc thậm chí là một hệ thống internal, có lẽ bạn nên nói với họ cân nhắc Angular JS.

Vấn đề được bắt đầu khi các nhà phát triển bắt đầu sử dụng Angular từ phía khách hàng. Việc sử dụng Angular phía khách hàng có thể khiến Google không index trong web của bạn vì vậy SEO là vô dụng trên trang web của bạn. Chúng ta cần phải hỗ trợ bots của Google trong tiến trình crawl và index nếu không khả năng hiển thị của trang web sẽ bị giảm mạnh.

Các nhà marketing biết vấn đề này là tốt nhưng các nhà phát triển không phải lúc nào cũng hiểu rõ tiến trình này làm việc như thế nào, vì vậy tôi sẽ giải thích ngắn gọn. Bots của Google render HTML. Với mọi mã non-HTML trên trang web sẽ không gửi thông điệp chúng ta mong muốn đến Google và thuật toán tiên tiến của nó. Qua nhiều năm, nhiều thẻ đã được thêm vào các thuật toán giúp Google giải mã các thông tin như đối tượng mục tiêu của trang web (quốc gia, ngôn ngữ, tiền tệ, múi giờ), phiên bản chúng ta muốn hiển thị và nhiều hơn nữa.



Các ứng dụng di động

Rõ ràng, nếu bạn chỉ viết một ứng dụng chính sử dụng Angular, bạn cũng sẽ muốn sử dụng ngCordova cho ứng dụng di động của bạn. Việc cung cấp trên 63 extensions AngularJS bên ngoài API Apache, ngCordova sẽ tăng tốc độ phát triển ứng dụng của bạn và làm cho nó hiệu quả hơn. Bạn nhận được các AngluarJS cho tất cả các plugin bạn cần thực hiện lấy hình ảnh, quét mã vạch và một loạt các nhiệm vụ khác có sẵn với chỉ một vài dòng code.

Các ứng dụng Single Page

Khi sử dụng Angluar để tạo ra một hệ thống internal, 2 mối quan tâm có thể được loại bỏ ngay lập tức:

- Chu kỳ phát triển ngắn hơn
- SEO là không quan trọng

Rõ ràng, khi một ứng dụng được tạo ra để sử dụng phía internal, công cụ tìm kiếm là không phù hợp - đặc biệt là nếu khách hàng/công ty của bạn đang tạo ra một ứng dụng hoàn toàn bằng Angluar và cung cấp kết quả tối ưu trong khoảng thời gian tối thiểu.

Tuy nhiên, vẫn còn có những câu hỏi về Angluar và SEO, vì bots không được render trong JavaScript nhưng trong HTML thì lại có. Câu trả lời đơn giản là Angular JS page views là trong HTML, JavaScript controllers chỉ cần xử lý vấn đề bên trong. Hơn nữa, AngluarJS không chỉ đơn thuần được cung cấp bởi Google mà nó còn được thực thi rất nhiều trong sản phẩm của riêng họ.

Với các nhà marketing bạn sẽ cần phải cố gắng và hiểu rõ các bước sau. Đừng lo lắng, bạn không cần phải trở thành một nhà phát triển để xử lý vấn đề này, bạn chỉ cần hiểu lý do đằng sau nó và các nguyên tắc chính, vì vậy bạn có thể giải thích rõ ràng nhu cầu của bạn để phát triển. Dưới đây là một vài loại thẻ quan trọng bạn nên làm quen với chúng:

Các chỉ thị

- ng-app: chỉ thị định nghĩa một ứng dụng AngluarJS và liên kết nó đến HTML
- ng-model: chỉ thị ràng buộc dữ liệu ứng dụng AngluarJS với HTML input controls
- ng-bind: chỉ thị ràng buộc dữ liệu ứng dụng AngluarJS với các thẻ HTML

Phương thức hoạt động

Bạn có thể xem chi tiết tại đây.

Bước 1: Sử dụng giải pháp của bên thứ ba

Công cụ tìm kiếm không render JS. Điều này đòi hỏi cần phải tích hợp để công cụ tìm kiếm chấp nhận mã nguồn HTML phù hợp trong khi scan. Có một số công cụ để tạo HTML snapshots và chúng được tích hợp dễ dàng bằng cách thực thi code vào tập tin cấu hình của máy chủ.

Lấy trang web Prerender.io - Ví dụ về ngnix.conf:

Bước 1:


Ảnh chụp từ prerender.io vào ngày 10/1/2015

Kiểm tra local

Sau khi cài đặt middleware, hãy kiểm tra local bằng cách tải về máy chủ mã nguồn mở Prerender.io:

- Mặc định là cổng 3000. Bạn sẽ cần phải thay đổi cổng máy chủ thành 1337 nếu cần.
- Bây giờ, máy chủ Prerender.io đã chạy và bạn có thể truy cập vào URL và xem trang chủ của Google:

http://localhost:3000/https://www.google.com/

Nếu bạn thành công, bây giờ hãy thử gõ URL của bạn thay vì Google. Lưu ý, các liên kết có liên quan sẽ không hiển thị đúng cho đến khi máy chủ của bạn được sử dụng như là một proxy.

Kiểm tra Middleware của bạn

Thiết lập ‘PrerenderServiceUrl’ của middleware của bạn để nó trỏ đến http: // localhost: 3000 / (thay vì dịch vụ lưu trữ của Prerender).

Để sử dụng HTML 5, chúng tôi khuyến cáo: Thêm thẻ meta vào <head> của trang:

<meta name=”fragment” content=”!”>

Nếu các URL nhìn giống như thế này:

http://www.example.com/user/1

Hãy thử và truy cập vào URL này:

http://www.example.com/user/1?_escaped_fragment_=

Nếu bạn đã thiết lập middleware chính xác, bạn sẽ nhìn thấy trang của bạn. Bạn sẽ biết chính xác nếu bạn xem mã nguồn của trang web và xem HTML thay vì chỉ xem JavaScript.

Vevo.com là một ví dụ về một công ty đã sử dụng dịch vụ BromBone để tạo ra một snapshot cho công cụ tìm kiếm. Tương tự như vậy, hãy nhìn vào lyft.com và mua dịch vụ của Prerender.io. Công cụ này là rất hữu ích, chúng làm việc và chúng rất tuyệt vời cho phần khởi động của bạn, mục đích của chúng là để tiết kiệm thời gian và nhân lực khi đưa sản phẩm vào thị trường một cách nhanh nhất có thể.

Bước 2: Lấy Snapshot của bạn

Bạn có thể làm điều này cho chính bạn. Các nhà cung cấp của bên thứ 3 sẽ thực hiện các thủ tục sau:

- Sử dụng node.js.


- Cài đặt dịch vụ Phantomjs (cổng: 8080/8443)

(Bạn có thể xem kết quả trong tập tin test.html)

Nhập mã vào tập tin cấu hình của máy chủ để kiểm tra xem bot đã thu thập các trang hay chưa và nếu đã thu thập, dịch vụ Phantomjs sẽ chịu trách nhiệm cho việc tạo ra snapshot HTML.

- PHP


Điều quan trọng bạn cần phải nhớ là tất cả điều này xảy ra nó có thể tạo, duy trì và ổn định hệ thống cho đội ngũ phát triển - vì nó không lắng nghe, không tạo ra một snapshot. Vì vậy, nó là một giải pháp duy nhất, các trang web lớn có nội dung phong phú, các công ty có các nguồn lực phù hợp chẳng hạn như CNN, Bloomberg...

Bước 3: Kết hợp PHP Với AngularJS

Một tùy chọn sáng tạo, bạn có thể tìm thấy tại trang web của Alvexo. Cách tiếp cận này nhằm mục đích tiết kiệm thời gian cho việc vận hành và bảo trì theo yêu cầu của nodejs và Python.js. Nó cũng là một giải pháp hoàn hảo cho các công ty chưa thực hiện việc di chuyển đến Mongo db và nodejs.

- Tách nội dung body và header / footer đang sử dụng index.php.

Xác định index.php như một sửa đổi. Trong trang này, Angluar chịu trách nhiệm giải thích URL friendly xuất hiện trên mỗi trang. Nó thu hút mỗi URL friendly để hiển thị từ cơ sở dữ liệu.

Phía trong modifier.php

Tạo trang PHP theo response của PHP. Các trang và nội dung trên trang là rất quan trọng đối với công cụ tìm kiếm. Meta descriptions, titles...với Angluar trong trường hợp này sẽ chịu trách nhiệm với nội dung không được sử dụng cho việc scan bởi công cụ tìm kiếm (không phải cho mục đích SEO). Ví dụ, nội dung này được tạo và kết quả là công cụ tìm kiếm không thể đọc chúng.

Với vấn đề công cụ tìm kiếm, chúng tôi xác định rằng tất cả mọi thứ ở trên và dưới ng-view được hard code bằng php từ bên trong cơ sở dữ liệu. Điều quan trọng cần lưu ý là các menu, header và footer trên các trang web đó phải được render khi trang đang được thực thi.


Lưu ý: thực tế JS không hẳn 100% có thể đọc được bởi Google bots, việc sử dụng công cụ của bên thứ 3 sẽ không làm việc và có những trường hợp bạn sẽ cần phải làm phức tạp hơn (như ví dụ của Alvexo). Hãy xem những gì có thể xảy ra khi sử dụng Prerender:

- beepmeapp.com là một ví dụ điển hình của việc sử dụng prerender, kết quả là title bị thiếu và description không phục vụ đúng thông qua snapshot. Như bạn có thể nhìn thấy dưới đây, page title là thẻ alt của logo (đó là điều đầu tiên Google nhìn thấy trong trang) và description đó là một nhóm cơ bản các cụm từ của trang, cả hai dấu hiệu cho thấy Google không thể nhìn thấy title hoặc description.


Ảnh chụp vào ngày 20/9/2015

Google không thể đọc title hoặc description:



Ảnh chụp vào ngày 20/9/2015

Nhưng sau đó, tôi phát hiện ra rằng ở cuối bài viết này, chúng tôi đã sửa chữa vấn đề này và bây giờ Google có thể đọc title và description:


Ảnh chụp vào ngày 20/9/2015

Đây là mã code HTML:



Ảnh chụp vào ngày 20/9/2015

Và đây là cách Google đọc nó:



Ảnh chụp vào ngày 20/9/2015

Tóm lại

Tôi hy vọng bài viết này là cầu nối giữa các nhà marketing và developer. Với tất cả các ưu điểm của Angluar, nó đặt ra nhiều thách thức lớn. Vì vậy, nếu bạn chưa bắt tay vào một trang web mới, bạn cần phải xem xét lại một cách nghiêm túc về việc sử dụng Angluar. Nếu bạn đang sử dụng Angluar, bạn nên sử dụng một trong những kỹ thuật chi tiết trong bài viết này để đảm bảo rằng trang web của bạn được tối ưu hóa cho Google. Để hiểu rõ hơn, tôi đề nghị bạn hãy xem hướng dẫn trong bài viết này để cải thiện các tham số on-page của trang web.

Ghi nguồn

PHP:

www.thegioiseo.com