Easy SEO meta tags in Rails 4

I. SEO là gì?

Chắc hẳn từ khóa này không còn quá lạ lẫm với các bạn trong thời gian gần đây. Tôi xin tóm lược ngắn gọn: SEO (Search Engine Optimization) là tập hợp những phương pháp tối ưu hóa để website trở nên thân thiện với máy chủ tìm kiếm (Search Engine) từ đó nâng cao thứ hạng website khi người dùng tìm kiếm với các từ khóa liên quan. Nói cách khác với SEO sẽ giúp trang Web của bạn trở nên dễ dàng tìm kiếm hơn với những từ khóa so với Website khác không sử dụng.

II. Những điều cần thiết cho SEO meta tags

Metatags (là các thẻ cung cấp thông tin về Website: title, header...) thường nằm ở phần đầu trang Web. Nó nắm giữ các thông tin quan trọng đối với việc xác định chỉ số hóa và định vị trên các công cụ tìm kiếm như Google hay Bing, nhưng nó cũng cho cho bạn có khả năng kiểm soát việc trang web của bạn sẽ như thế nào khi nó được chia sẻ trên các phương tiện truyền thông xã hội như Facebook hay Twitter, chúng cũng tự định nghĩa các metatags cho chúng.Điều này cho thấy tầm quan trọng của chúng vì chúng thu hút khách hàng tiềm năng của bạn tốt hơn và thể hiện trang web của bạn như cách mà bạn muốn.

III. Meta tags in Rails applications

Thật may mắn cho những Ruby on Rails developer là họ có thể dựa trên Meta-Tags gem được phát triển bởi Dmytro Shteflyuk để truy cập vào kho tags và những thiết lập có sẵn của họ. Readme file của gem có một danh sách rất toàn diện và đầy đủ tags và cách thiết lập chúng, và ở đây chúng ta sẽ được thấy nó được cài đặt vàsưe dụng như thế nào qua các ví dụ sau:

1.All relies on the Application Controller

class ApplicationController < ActionController::Base
  # ...
  before_action :prepare_meta_tags, if: "request.get?"

  def prepare_meta_tags(options={})
    site_name   = "CookiesHQ"
    title       = [controller_name, action_name].join(" ")
    description = "The CookiesHQ team creates web software for humans"
    image       = options[:image] || "your-default-image-url"
    current_url = request.url

    # Let's prepare a nice set of defaults
    defaults = {
      site:        site_name,
      title:       title,
      image:       image,
      description: description,
      keywords:    %w[web software development mobile app],
      twitter: {
        site_name: site_name,
        site: '@thecookieshq',
        card: 'summary',
        description: description,
        image: image
      },
      og: {
        url: current_url,
        site_name: site_name,
        title: title,
        image: image,
        description: description,
        type: 'website'
      }
    }

    options.reverse_merge!(defaults)

    set_meta_tags options
  end
  # ...
end

Bây giờ, để thấy tags trên view, chúng ta nên sử dụng phương thức display meta tags ở phần đầu của layout.

%head
  = display_meta_tags
  %meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
  -#...

Chúng đã được thiết lập. Chúng nên được thấy như các tags đã có sẵn (cũng giống như Tiwtter và Facebook) khi chúng ta inspecting trang web của chúng ta với các công cụ phát triển ứng dụng ngay trên trình duyệt của bạn. Trên phần tiêu đề của trang web, ở các tab của trình duyệt web, chúng ta sẽ nhìn thấy giống như là: "The Cookie Shop | The Cookie Shop". Điều này sử dụng cấu trúc site | title trừ khi bạn sử dụng lựa chọn đảo ngược cách gọi của bạn, như chúng ta đã làm khi thiết lập tiêu đề cho trang web, trong trường hợp này 2 tham số xuất hiện ngược lại. Chúng ta sẽ thấy điều này rõ rang hơn ở ví dụ sau.

2. Setting different tags for different parts of our site

Luật SEO gợi ý có 2 tags cho mỗi phần của website để công cụ tìm kiếm biết nhiều hơn về trang web của chúng ta và nó có thể hoàn toàn đánh chỉ mục và định vị trang của chúng ta. Bây giờ chúng ta có phương thức prepare_meta_tags, chúng ta có thể sử dụng nó trong các phương thức của controller:

class ProductsController < ApplicationController
  # ...
  def index
    prepare_meta_tags title: "Products", description: "Find on this page all our lovely products"
  end

  def show
    @product = Product.find params[:id]

    prepare_meta_tags(title: @product.name,
                      description: @product.description,
                      keywords: @product_keywords,
                      image: @product.picture.url(:large),
                      twitter: {card: "summary_large_image"})
  end
  # ...
end

Hoặc chúng ta có thể sử dụng 3 biến instance mà gem sử dụng.

class ProductsController < ApplicationController
  # ...
  def index
    @page_title = "Products"
  end

  def show
    @product          = Product.find params[:id]
    @page_title       = @product.name
    @page_description = @product.description
    @page_keywords    = @product.keywords
  end
  # ...
end

Cách khác của cách làm này, điều này sẽ sử dụng phương thức corresponding để đặt tiêu đề (title) và phần mô tả (description), ví dụ:

-#...
- title 'Products'

%p
  = description "This is our product range"

Chú ý rằng chúng ta vừa có thể đặt giá trị biến (như biến title) hoặc thiết lập nó trong phần view như là chúng ta đã làm với biến description.

Như ở trên bạn có thể thấy ở ví dụ trên, chúng ta có thể thấy cách sử dụng phương thức thiết lập tags trong mỗi trang 1 cách dễ dàng. Với phương thức index của chúng ta, tiêu đề của trang web sẽ là "Products | The Cookie Shop" và phần mô tả sẽ ở đó giống như vậy. Nếu chúng ta không sử dụng tùy chọn inverse trước đó, chúng ta sẽ có "The Cookie Shop | Products", điều đó cũng có nghĩa nhưng có thể sẽ bị cắt bỏ trên tab trên trình duyệt, vì vậy chúng ta sẽ chọn cách hiển thị mà khi bị hiển thị giản lược chúng ta vẫn có thể đạt được mục đích.

Thêm vào đó, khi hiển thị 1 sản phẩm như ở ví dụ trên, chúng ta sẽ cũng có thể sử dụng phần mô tả của sản phẩm như phần mo tả dành cho trang web của chúng ta. Chúng ta cũng có thể thiết lập ảnh (image meta-tag) cho chính sản phẩm đó phụ thuộc và những gì chúng ta muốn. Có một vài lựa chọn có sẵn cho chúng ta.

IV. A word about Turbolinks

Có một vài chủ đề trên mạng nói về 1 trang web Turbolinks thay đổi tất cả SEO tags khi bạn duyệt qua nó. Chỉ thay đổi title nên hiệu quả với người dung, khi đó nó chỉ là phần mà chúng ta thực sự nhìn thấy, vì vậy không có điểm thực sự cố gắng để buộc thay đổi.

V.Kết luận

SEO là một cách giúp trang web của bạn tiếp cận với khách hàng vì vậy nếu làm SEo tốt các bạn sẽ đạt đưuọc hiệu quả quan trong việc quảng bá trang Web của mình. Chúc các bạn thành công!

VI. Nguồn tham khảo

Easy SEO meta tags in Rails 4