Thêm Facebook Open Graph meta trong WordPress

2 tuần ago, WordPress Themes, 5 Views
Thêm Facebook Open Graph meta trong WordPress

Thêm Facebook Open Graph Meta vào WordPress: Hướng Dẫn Chi Tiết

Khi chia sẻ nội dung từ trang web WordPress của bạn lên Facebook, bạn muốn bài viết, trang sản phẩm hoặc bất kỳ nội dung nào khác hiển thị một cách hấp dẫn và chính xác. Đó là lúc Facebook Open Graph (OG) meta tags phát huy tác dụng. Chúng kiểm soát cách Facebook hiển thị liên kết của bạn, giúp tăng tỷ lệ nhấp (CTR) và cải thiện khả năng tiếp cận nội dung của bạn.

Bài viết này sẽ hướng dẫn bạn cách thêm Facebook Open Graph meta tags vào trang web WordPress của bạn một cách chi tiết, từ những phương pháp thủ công đơn giản đến việc sử dụng các plugin mạnh mẽ.

Tại Sao Cần Thêm Facebook Open Graph Meta Tags?

Open Graph meta tags là những đoạn mã HTML nhỏ cho phép bạn kiểm soát thông tin mà Facebook hiển thị khi ai đó chia sẻ liên kết từ trang web của bạn. Chúng có vai trò quan trọng vì:

  • Cải thiện hình ảnh hiển thị: Bạn có thể chọn hình ảnh đại diện phù hợp nhất cho bài viết của mình, thay vì để Facebook tự động chọn một hình ảnh ngẫu nhiên có thể không liên quan.
  • Tăng tỷ lệ nhấp chuột (CTR): Một tiêu đề và mô tả hấp dẫn sẽ khuyến khích người dùng nhấp vào liên kết của bạn.
  • Tăng cường nhận diện thương hiệu: Bạn có thể đảm bảo rằng tên trang web và logo của bạn hiển thị nhất quán mỗi khi nội dung của bạn được chia sẻ.
  • Kiểm soát thông tin: Bạn có quyền quyết định thông tin nào được hiển thị, đảm bảo thông tin chính xác và phù hợp với mục tiêu của bạn.
  • Tối ưu hóa cho SEO: Mặc dù Open Graph không trực tiếp ảnh hưởng đến SEO trên Google, nhưng việc chia sẻ nội dung trên mạng xã hội có thể giúp tăng lưu lượng truy cập và cải thiện thứ hạng gián tiếp.

Các Thẻ Open Graph Quan Trọng Nhất

Có một số thẻ Open Graph quan trọng mà bạn cần thêm vào trang web WordPress của mình:

  • og:title: Tiêu đề của nội dung được chia sẻ.
  • og:type: Loại đối tượng, ví dụ: “article”, “website”, “book”, “video”.
  • og:image: URL của hình ảnh đại diện cho nội dung.
  • og:url: URL của trang web được chia sẻ.
  • og:description: Mô tả ngắn gọn về nội dung.
  • og:site_name: Tên của trang web của bạn.
  • og:locale: Ngôn ngữ của nội dung (ví dụ: “vi_VN” cho tiếng Việt).

Cách Thêm Open Graph Meta Tags vào WordPress

Có một vài cách để thêm Open Graph meta tags vào trang web WordPress của bạn:

1. Chỉnh Sửa Thủ Công File header.php

Đây là phương pháp thủ công và đòi hỏi bạn phải quen thuộc với việc chỉnh sửa code. Tuy nhiên, nó cho phép bạn kiểm soát hoàn toàn các thẻ Open Graph.

  1. Sao lưu file header.php: Trước khi thực hiện bất kỳ thay đổi nào, hãy sao lưu file header.php của theme đang sử dụng để tránh mất dữ liệu trong trường hợp có lỗi xảy ra.
  2. Truy cập file header.php: Bạn có thể truy cập file header.php thông qua trình quản lý file của hosting hoặc thông qua trình chỉnh sửa theme trong WordPress (Appearance -> Theme Editor).
  3. Thêm các thẻ Open Graph vào section : Tìm thẻ trong file header.php và thêm các thẻ Open Graph sau vào bên trong thẻ : 
    
 <meta property="og:title" content="Tiêu đề bài viết của bạn" />
 <meta property="og:type" content="article" />
 <meta property="og:image" content="URL hình ảnh đại diện" />
 <meta property="og:url" content="URL của bài viết" />
 <meta property="og:description" content="Mô tả ngắn gọn về bài viết" />
 <meta property="og:site_name" content="Tên trang web của bạn" />
 <meta property="og:locale" content="vi_VN" />
  4. Điều chỉnh thông tin: Thay thế các giá trị placeholder (ví dụ: “Tiêu đề bài viết của bạn”, “URL hình ảnh đại diện”) bằng thông tin thực tế của bài viết hoặc trang web.
  5. Lưu thay đổi: Lưu file header.php sau khi đã chỉnh sửa.

Lưu ý: Với phương pháp này, bạn cần cập nhật các thẻ Open Graph cho mỗi bài viết hoặc trang một cách thủ công. Điều này có thể tốn thời gian và dễ xảy ra sai sót.

2. Sử Dụng Plugin WordPress

Đây là phương pháp được khuyến khích vì nó đơn giản, dễ sử dụng và cung cấp nhiều tính năng hơn. Có rất nhiều plugin WordPress miễn phí và trả phí giúp bạn thêm Open Graph meta tags một cách dễ dàng.

Các Plugin Phổ Biến

  • Yoast SEO: Một trong những plugin SEO phổ biến nhất, Yoast SEO cung cấp các tính năng mạnh mẽ để quản lý Open Graph meta tags, bao gồm khả năng tùy chỉnh tiêu đề, mô tả và hình ảnh cho mỗi bài viết và trang.
  • Rank Math: Một plugin SEO mạnh mẽ khác, Rank Math cũng cung cấp các tính năng tương tự như Yoast SEO, cho phép bạn dễ dàng thêm và tùy chỉnh Open Graph meta tags.
  • All in One SEO Pack: Một plugin SEO lâu đời và đáng tin cậy, All in One SEO Pack cũng hỗ trợ Open Graph meta tags và cung cấp giao diện trực quan để quản lý chúng.
  • Open Graph and Twitter Card Tags: Một plugin chuyên dụng tập trung vào việc thêm Open Graph và Twitter Card meta tags, cung cấp các tùy chọn tùy chỉnh chi tiết.

Hướng Dẫn Sử Dụng Yoast SEO

  1. Cài đặt và kích hoạt Yoast SEO: Tìm kiếm “Yoast SEO” trong kho plugin WordPress và cài đặt, sau đó kích hoạt plugin.
  2. Chỉnh sửa bài viết hoặc trang: Mở bài viết hoặc trang mà bạn muốn thêm Open Graph meta tags.
  3. Cuộn xuống phần Yoast SEO: Bên dưới trình soạn thảo, bạn sẽ thấy một phần Yoast SEO.
  4. Chuyển sang tab “Social”: Trong phần Yoast SEO, nhấp vào tab “Social”.
  5. Tùy chỉnh Open Graph: Tại đây, bạn có thể tùy chỉnh tiêu đề, mô tả và hình ảnh sẽ hiển thị trên Facebook khi bài viết hoặc trang của bạn được chia sẻ.
  6. Lưu thay đổi: Nhấp vào nút “Update” để lưu các thay đổi của bạn.

Các plugin khác có quy trình tương tự. Nhìn chung, bạn sẽ cài đặt và kích hoạt plugin, sau đó tìm phần cài đặt Open Graph trong giao diện của plugin và tùy chỉnh các thẻ theo ý muốn.

3. Sử Dụng Code Hook (Nâng Cao)

Nếu bạn là một nhà phát triển hoặc muốn kiểm soát hoàn toàn quy trình, bạn có thể sử dụng WordPress hooks để thêm Open Graph meta tags. Cách này đòi hỏi kiến thức về PHP và WordPress development.

  1. Truy cập file functions.php: Truy cập file functions.php của theme đang sử dụng.
  2. Thêm code snippet: Thêm đoạn code sau vào file functions.php: 
    
 function add_opengraph_meta() {
  if (is_single() || is_page()) {
   global $post;
   $title = get_the_title();
   $description = wp_strip_all_tags(get_the_excerpt());
   $url = get_permalink();
   $image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );

   echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
   echo '<meta property="og:type" content="article" />';
   echo '<meta property="og:image" content="' . esc_url($image) . '" />';
   echo '<meta property="og:url" content="' . esc_url($url) . '" />';
   echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
   echo '<meta property="og:site_name" content="' . get_bloginfo('name') . '" />';
   echo '<meta property="og:locale" content="vi_VN" />';
  }
 }
 add_action('wp_head', 'add_opengraph_meta');
  3. Lưu thay đổi: Lưu file functions.php.

Đoạn code này sẽ tự động thêm các thẻ Open Graph vào header của các bài viết và trang, sử dụng tiêu đề, mô tả, URL và hình ảnh đại diện của bài viết. Bạn có thể tùy chỉnh đoạn code này để phù hợp với nhu cầu của mình.

Kiểm Tra Open Graph Meta Tags

Sau khi thêm Open Graph meta tags, bạn nên kiểm tra xem chúng hoạt động chính xác hay không. Facebook cung cấp công cụ Debugger để giúp bạn làm điều này.

  1. Truy cập Facebook Debugger: Truy cập Facebook Debugger.
  2. Nhập URL: Nhập URL của bài viết hoặc trang mà bạn muốn kiểm tra vào ô nhập liệu.
  3. Nhấp vào “Debug”: Nhấp vào nút “Debug” để Facebook thu thập thông tin về trang của bạn.
  4. Xem kết quả: Facebook Debugger sẽ hiển thị thông tin mà nó thu thập được, bao gồm các thẻ Open Graph và cách chúng sẽ hiển thị trên Facebook. Nếu có bất kỳ lỗi nào, Facebook Debugger sẽ cung cấp thông tin để bạn khắc phục.
  5. Nhấp vào “Scrape Again”: Sau khi bạn đã sửa các lỗi, hãy nhấp vào nút “Scrape Again” để Facebook cập nhật thông tin.

Lời Kết

Thêm Facebook Open Graph meta tags vào trang web WordPress của bạn là một bước quan trọng để cải thiện cách nội dung của bạn hiển thị trên Facebook, tăng CTR và thu hút nhiều lượt truy cập hơn. Bằng cách sử dụng một trong các phương pháp được trình bày trong bài viết này, bạn có thể dễ dàng thêm và tùy chỉnh Open Graph meta tags để đảm bảo nội dung của bạn luôn được hiển thị một cách tốt nhất.

Related Topics by Tag
, , , ,

..