Cách thêm dữ liệu meta đồ thị mở của Facebook vào theme WordPress

Bạn có muốn thêm siêu dữ liệu Facebook Open Graph vào chủ đề WordPress của mình không?

Siêu dữ liệu Open Graph giúp Facebook và các trang web truyền thông xã hội khác lấy thông tin về các bài đăng và trang WordPress của bạn. Nó cũng cho phép bạn kiểm soát cách nội dung của bạn xuất hiện khi được chia sẻ trên Facebook.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm siêu dữ liệu Facebook Open Graph vào chủ đề WordPress.

Chúng tôi sẽ chia sẻ ba phương pháp khác nhau, vì vậy bạn có thể chọn một phương pháp phù hợp nhất với trang web WordPress của mình :

Thêm siêu dữ liệu Facebook Open Graph với AIOSEO
Đặt siêu dữ liệu đồ thị mở của Facebook bằng Yoast SEO
Thêm siêu dữ liệu đồ thị mở của Facebook bằng mã

Phương pháp 1: Thêm Facebook Open Graph Metadata với AIOSEO

All in One SEO là một plugin WordPress SEO phổ biến được sử dụng bởi hơn 3 triệu trang web. Nó cho phép bạn dễ dàng tối ưu hóa trang web của mình cho các công cụ tìm kiếm cũng như các nền tảng xã hội như Facebook và Twitter.

Trước tiên, bạn cần cài đặt và kích hoạt plugin All in One SEO miễn phí . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .

Sau khi kích hoạt, bạn cần truy cập trang All in One SEO » Social Profiles . Tại đây, bạn có thể nhập URL trang Facebook và tất cả các mạng xã hội khác của mình.

Tiếp theo, nhấp vào tab Facebook ở đầu trang và bạn sẽ thấy Open Graph Markup được bật theo mặc định.

Bạn có thể nhấp vào nút ‘Tải lên hoặc chọn hình ảnh’ để chọn hình ảnh Facebook OG mặc định nếu bài viết không có hình ảnh Biểu đồ mở.

Nếu cuộn xuống, bạn có thể tùy chỉnh tên trang web, mô tả và nhiều cài đặt khác. Đừng quên nhấp vào nút ‘Lưu thay đổi’ màu xanh sau khi bạn hoàn tất.

Bây giờ bạn đã đặt thẻ meta Đồ thị mở trên toàn trang web, bước tiếp theo là thêm siêu dữ liệu Đồ thị mở cho các bài đăng và trang riêng lẻ.

Theo mặc định, AIOSEO sẽ sử dụng tiêu đề và mô tả bài đăng của bạn cho tiêu đề và mô tả Open Graph. Bạn cũng có thể tự đặt hình thu nhỏ Facebook cho từng trang và bài đăng.

Chỉ cần chỉnh sửa bài đăng hoặc trang và cuộn xuống phần ‘AIOSEO Settings’ bên dưới trình chỉnh sửa. Từ đây, chuyển sang tab Social và bạn sẽ thấy bản xem trước hình thu nhỏ của mình.

Bạn có thể đặt hình ảnh mạng xã hội tại đây, cũng như tiêu đề và mô tả.

Chỉ cần cuộn xuống trường ‘Image Source’. Bạn có thể chọn sử dụng hình ảnh nổi bật, tải lên hình ảnh tùy chỉnh hoặc các tùy chọn khác.

Chọn hình ảnh WordPress nào sẽ sử dụng làm hình thu nhỏ trên Facebook của bạn

Phương pháp 2: Đặt Siêu dữ liệu đồ thị mở của Facebook bằng Yoast SEO

Yoast SEO là một plugin WordPress SEO khác mà bạn có thể sử dụng để thêm siêu dữ liệu Facebook Open Graph vào bất kỳ trang web WordPress nào.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Yoast SEO . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .

Sau khi kích hoạt, bạn cần truy cập SEO »Socical và chọn tùy chọn ‘Enabled’ trong ‘Thêm dữ liệu meta Biểu đồ mở’.

Bạn có thể lưu cài đặt của mình hoặc tiếp tục và định cấu hình các tùy chọn xã hội Facebook khác.

Bạn có thể cung cấp ID ứng dụng Facebook nếu bạn sử dụng ID này cho trang Facebook và thông tin chi tiết của mình. Bạn cũng có thể thay đổi tiêu đề, mô tả và hình ảnh meta Open Graph trên trang chủ của mình.

Cuối cùng, bạn có thể đặt hình ảnh mặc định sẽ được sử dụng khi không có hình ảnh nào được đặt cho bài đăng hoặc trang.

Yoast SEO cũng cho phép bạn đặt siêu dữ liệu Open Graph cho các bài đăng và trang riêng lẻ. Chỉ cần chỉnh sửa bài đăng hoặc trang và cuộn xuống phần ‘Yoast SEO’ bên dưới trình chỉnh sửa.

Đặt dữ liệu meta biểu đồ mở cho bài đăng và trang

Từ đây, bạn có thể đặt hình thu nhỏ Facebook cho bài đăng hoặc trang cụ thể đó. Nếu bạn không đặt tiêu đề hoặc mô tả bài đăng, thì plugin sẽ sử dụng tiêu đề và mô tả meta SEO của bạn.

Giờ đây, bạn có thể lưu bài đăng hoặc trang của mình và plugin sẽ lưu trữ siêu dữ liệu Facebook Open Graph của bạn.

Phương pháp 3: Thêm siêu dữ liệu Facebook Open Graph bằng mã

Phương pháp này yêu cầu bạn chỉnh sửa các tệp chủ đề, vì vậy hãy đảm bảo rằng bạn sao lưu các tệp chủ đề trước khi thực hiện bất kỳ thay đổi nào.

Sau đó, chỉ cần sao chép và dán mã này vào tệp functions.php của chủ đề hoặc thêm đoạn mã bằng plugin WPCode (được khuyến nghị).

Đầu tiên, cài đặt và kích hoạt plugin WPCode miễn phí . Để biết thêm chi tiết, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress .

Sau khi kích hoạt, bạn có thể truy cập Đoạn mã » + Thêm đoạn mã từ bảng điều khiển WordPress của mình. Bạn cần di chuột qua đoạn mã đầu tiên có nhãn ‘Thêm mã tùy chỉnh của bạn (Đoạn mã mới)’ và nhấp vào nút ‘Sử dụng đoạn mã’.

Thao tác này sẽ tạo một đoạn mã mới nơi bạn sẽ cần nhập tiêu đề và chọn loại mã ‘Đoạn mã PHP’. Sau đó, bạn cần đăng đoạn mã sau vào phần ‘Xem trước mã’:

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
  
//Lets add Open Graph Meta Info
  
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="fb:app_id" content="Your Facebook App ID" />';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site Name Goes Here"/>';
    if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
        $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

//Adding the Open Graph in the Language Attributes

function add_opengraph_doctype( $output ) {

return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';

}

add_filter('language_attributes', 'add_opengraph_doctype');

//Lets add Open Graph Meta Info

function insert_fb_in_head() {

global $post;

if ( !is_singular()) //if it is not a post or a page

return;

echo '<meta property="fb:app_id" content="Your Facebook App ID" />';

echo '<meta property="og:title" content="' . get_the_title() . '"/>';

echo '<meta property="og:type" content="article"/>';

echo '<meta property="og:url" content="' . get_permalink() . '"/>';

echo '<meta property="og:site_name" content="Your Site Name Goes Here"/>';

if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image

$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library

echo '<meta property="og:image" content="' . $default_image . '"/>';

}

else{

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );

echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';

}

echo "

}

add_action( 'wp_head', 'insert_fb_in_head', 5 );

Hãy nhớ thêm tên trang web của bạn vào Dòng 17, nơi có nội dung ‘Tên trang web của bạn ở đây’. Sau đó, bạn nên thay đổi URL hình ảnh mặc định trên Dòng 19 bằng một trong các URL hình ảnh của riêng bạn.

Chúng tôi khuyên bạn nên đặt một hình ảnh có biểu trưng của bạn ở đó, vì vậy nếu bài đăng của bạn không có hình thu nhỏ thì nó sẽ kéo theo biểu trưng của trang web của bạn.

Bạn cũng cần thêm ID ứng dụng Facebook của riêng mình trên Dòng 13. Nếu không có ứng dụng Facebook, bạn có thể xóa Dòng 13 khỏi mã.

Khi bạn đã cập nhật xong mã, bạn cần chuyển đoạn mã thành ‘Đang hoạt động’ và nhấp vào nút ‘Lưu đoạn mã’. Chủ đề của bạn bây giờ sẽ bắt đầu hiển thị siêu dữ liệu Facebook Open Graph trong tiêu đề WordPress.

Chúng tôi hy vọng bài viết này đã giúp bạn thêm siêu dữ liệu Facebook Open Graph trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách chạy quà tặng hoặc cuộc thi trong WordPress hoặc chuyên gia của chúng tôi chọn các plugin Facebook tốt nhất để phát triển blog của bạn.