Tối ưu hoá công cụ tìm kiếm cho ứng dụng AngularJS 4

Những ứng dụng Single Page (SPAs) thật tuyệt vời! Chúng load nhanh và cung cấp cho bạn nhiều kiểm soát về cách bạn muốn ứng dụng chạy. Chúng được parsed bởi trình duyệt và do đó bạn có thể kiểm soát được các DOM elements một cách thần thánh. Tuy nhiên, SPAs không thân thiện với công cụ tìm kiếm (not SEO friendly) bởi vì chúng thay đổi các meta tags và content bằng JavaScript và thay đổi này thường không đuợc bot của các công cụ tìm kiếm biết đến.

Ví dụ, các ứng dụng Angular 4 tải nội dung HTML trống đầu tiên trước khi lấy nội dung HTML cho trang được bằng XMLHttpRequest. Vì một số công cụ tìm kiếm không thể phân tích cú pháp JavaScript khi thu thập thông tin trang web, họ sẽ chỉ nhìn thấy nội dung trống đầu tiên.

Mặc dù Google cho biết bot tìm kiếm của họ có khả năng render JavaScript, điều này vẫn còn mơ hồ, hơn hết chúng ta vẫn nên thận trọng để giải quyết vấn đề này. Ngoài ra còn có các công cụ tìm kiếm khác không xử lý JavaScript. Bài viết này sẽ giới thiệu cách làm cho ứng dụng Angular 4 thân thiện với công cụ tìm kiếm giúp cho website của bạn có thứ hạng cao hơn trong kết quả tìm kiếm.

⚠️ Lưu ý: Đây không phải là Bài hướng dẫn về Angular 4 nên không bao gồm các chi tiết cụ thể về Angular 4 framework.

Trước khi bắt đầu, chúng ta hãy xây dựng một ứng dụng đơn giản sử dụng Angular. Ứng dụng sẽ là một trang liệt kê một loạt chủ đề trên trang chủ. Chúng ta sẽ không kết nối với bất kỳ nguồn dữ liệu nào, thay vào đó sẽ hard code dữ liệu vào component.

Tạo một ứng dụng Angular 4 đơn giản

Chúng ta sẽ sử dụng ng-cli để tạo một ứng dụng Angular gọi là Blogist.

Tạo một ứng dụng mới sử dụng ng-cli

Chúng ta sẽ sử dụng ng new command để tạo ứng dụng Angular 4.

$ ng new Blogist

⚠️ Lưu ý: Bạn cần phải sử dụng phiên bản Angular CLI mới nhất để ứng dụng này hoạt động đúng. Phiên bản mới nhất là 1.3.x vào thời điểm viết bài này.

Tiếp theo, chúng ta sẽ tạo ra một component mà sau đó có thể thêm code logic vào. Chúng ta sẽ sử dụng ng g component command cho điều này:

$ ng g component ./blog/posts

Thêm mock data vào PostComponent của chúng ta

Vì lý do ngắn gọn, chúng ta sẽ không kết nối với một API bên ngoài. Thay vào đó, chúng ta sẽ chỉ tạo ra một số dữ liệu mô phỏng và sử dụng dữ liệu đó trong ứng dụng của chúng ta.

Mở file ./src/app/blog/posts.component.ts, chúng ta sẽ thêm một số logic code để đảm bảo rằng nó hoạt động như chúng ta muốn. Đầu tiên, chúng ta hãy mã hóa một số dữ liệu vào tệp. Thêm một method mới được gọi là postsData cho component.

    private postsData() {
        return [
            {
                "title": "Making Angular.js realtime with Websockets by marble",
                "pubDate": "2017-08-23 14:41:52",
                "link": "https://blog.pusher.com/making-angular-js-realtime-with-pusher/#comment-10372",
                "guid": "http://blog.pusher.com/?p=682#comment-10372",
                "author": "marble",
                "thumbnail": "",
                "description": "always a big fan of linking to bloggers that I enjoy but dont get a great deal of link enjoy from",
                "content": "<p>always a big fan of linking to bloggers that I enjoy but dont get a great deal of link enjoy from</p>",
                "enclosure": [],
                "categories": []
            },
            {
                "title": "Making Angular.js realtime with Websockets by strapless strap on",
                "pubDate": "2017-08-23 05:05:08",
                "link": "https://blog.pusher.com/making-angular-js-realtime-with-pusher/#comment-10371",
                "guid": "http://blog.pusher.com/?p=682#comment-10371",
                "author": "strapless strap on",
                "thumbnail": "",
                "description": "very couple of internet websites that transpire to be detailed beneath, from our point of view are undoubtedly properly worth checking out",
                "content": "<p>very couple of internet websites that transpire to be detailed beneath, from our point of view are undoubtedly properly worth checking out</p>",
                "enclosure": [],
                "categories": []
            },
            {
                "title": "Making Angular.js realtime with Websockets by bondage restraints",
                "pubDate": "2017-08-22 17:09:17",
                "link": "https://blog.pusher.com/making-angular-js-realtime-with-pusher/#comment-10370",
                "guid": "http://blog.pusher.com/?p=682#comment-10370",
                "author": "bondage restraints",
                "thumbnail": "",
                "description": "very couple of web sites that occur to be in depth below, from our point of view are undoubtedly properly worth checking out",
                "content": "<p>very couple of web sites that occur to be in depth below, from our point of view are undoubtedly properly worth checking out</p>",
                "enclosure": [],
                "categories": []
            }
        ];
    }

Để sử dụng mock data đã đuợc tạo phía trên, chúng ta thay constructor method của PostsComponent class bằng đoạn code dưới đây:

    public posts;

    constructor() {
        this.posts = this.postsData();
    }

Trong đoạn code phía trên, chúng ta chỉ đơn giản gán cho thuộc tính posts bằng giá trị mà postsData method trả về, đây chính là cách chúng ta giả lập API response.

Tạo View cho PostsComponent

Bây giờ chúng ta đã có mock posts data. Chúng ta sẽ tạo một view hiển thị tất cả posts từ mock data.

Mở view ./app/blog/posts.component.html và thêm vào đoạn code dưới đây:

    <div class="jumbotron">
        <h1>Blogist</h1>
        <p>This is the best resource for the best web development posts.</p>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <ul class="list-group">
                <li class="list-group-item" *ngFor="let post of posts">
                    <h4>{{post.title}}</h4>
                </li>
            </ul>
        </div>
    </div>

Đoạn code trên chỉ lấy về posts data sau đó lặp và hiển thị title của post.

Tiếp theo, mở file index.html và trong thẻ <head> thay nội dung với code dưới đây. Nó chỉ đơn giản sử dụng Bootstrap và thêm navigation bar:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Blogist</title>
      <base href="/">
      <meta name="viewport" content="awidth=device-awidth, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Blogist</a>
          </div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Posts</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Graphic Design</a></li>
          </ul>
        </div>
      </nav>
      <div class="container">
        <app-root></app-root>
      </div>
    </body>
    </html>
    ```
    
###    Đăng ký PostsComponent trong module application module

Tiếp theo chúng ta sẽ đăng ký PostsComponent thành module ứng dụng