16 September, 2025

What Is Open Graph? How to Check and Set It Up

Quick summary: Open Graph is an HTML protocol that lets you control how website content displays when shared on social networks like Facebook, LinkedIn or Zalo. Through OG tags such as og:title, og:description and og:image, website owners choose the title, description and thumbnail themselves instead of letting the platform pick them at random, so content looks professional, gets a higher CTR and supports overall SEO.

Have you ever shared a link on Facebook only to see the wrong image or title? That is exactly when you need Open Graph. So what is Open Graph and why is it so important? This article from MONA Media will help you understand the benefits of Open Graph and give detailed steps to check and set up Facebook Open Graph, so your website looks professional and SEO-ready on social platforms.

What is Open Graph?

What is Open Graph?

Open Graph is an HTML protocol that lets you SEO Expert control how your articles display when posted to social networks like LinkedIn and Facebook,… making them look polished and professional. In other words, you can decide the title, description and thumbnail through Open Graph meta tags (OG Tags), instead of letting Facebook or other platforms pick them at random.

For example: if you want to share an article about how to use Chat GPT for SEO, you can create Open Graph tags like this: 

<meta property=”og:title” content=”How to Use Chat GPT for SEO and Prompts for SEO-Standard Writing” />

<meta property=”og:description” content=”Updated 2026 guide to GPT SEO, helping you work more efficiently and grow your website traffic sustainably.” />

<meta property=”og:image” content=”https://domain.com/uploads/seo-gpt.jpg” />

Where:

  • og:title: The title you want to show when shared.
  • og:description: A short, appealing description.
  • og:image: A featured image that draws users to click the link.

This way, when you share a link, your content looks complete and professional, making a strong impression from the very first appearance.

Why set up Open Graph for your website?

Benefits of adding Open Graph

For businesses focusing on SEO and building their brand online, setting up Open Graph is a must, because this meta tag brings many strategic benefits. So what are the benefits of adding Open Graph?

  • Look professional: When your website is shared on Facebook, Zalo or LinkedIn, the title, description and image all display consistently and correctly. This helps your business build a the brand image professional, trustworthy image from the first time customers see it.
  • Better user experience: A post with a clear title, a concise description and an attractive image helps viewers grasp the content without spending extra time. This convenience makes them more likely to stay longer and engage more with your brand.
  • Stay in control of your content when shared: No more posts showing the wrong image, an outdated description or a dull title. With the Open Graph protocol, you fully control how your website is seen on social networks, and avoid losing points with customers over an unprofessional display detail.
  • Increase visibility on Facebook: Open Graph tags do more than make the display look good. They also help Facebook understand the structure and content of your article. As a result, when users search keywords on Facebook, the system prioritizes content that has been shared a lot, along with data taken directly from OG Tags. 
  • Boosting SEO performance: Although Facebook Open Graph does not directly improve your Google rankings, it does lead to more shares, more engagement, and more organic traffic from social networks. All of these are positive signals that build your website's credibility and overall SEO strength.
  • Raising click-through rate (CTR) and the quality of your traffic: Among the countless posts in a newsfeed, a link optimized with OG Tags, a sharp image, and an appealing description will stand out and get more clicks. It is a simple but effective way for a business to bring more quality traffic to its website.

You may also be interested in: 8+ ways to drive traffic from Instagram simple but effective

Important properties of Open Graph meta tags

According to the latest update, Facebook publishes up to 17 Open Graph meta tags, but only a handful are core protocols that directly decide how your website looks when shared. To find out which Open Graph properties matter most, read the sections below:

og:title

Open Graph title

og:title defines the title shown when your post or web page is shared on Facebook, Zalo, LinkedIn, or any platform that supports Open Graph Facebook.

Example: <meta property=”og:title” content=”SEO Strategy 2026: Optimize Your Website to Break Through on Revenue” />

Best practices:

  • Apply it to every page that may be shared.
  • Keep the title short, clear, and engaging, ideally 40 – 60 characters long.
  • Write an accurate, appealing title to raise the click-through rate (CTR) from social media.

og:url

og:url specifies the exact URL of the page. This tag is important to avoid duplicated share data when one piece of content has several URLs (for example, URLs with parameters).

Example: <meta property=”og:url” content=”https://www.mona.media/chien-luoc-seo-2026″ />

Best practices: Always use the canonical URL to consolidate data (shares, likes, comments) under a single address.

og:image

Open Graph image tag

Of all the OG Tags, og:image has the strongest influence. It sets the thumbnail shown when the link is shared, and it is what grabs users at first glance.

Example: <meta property=”og:image” content=”https://mona.media/uploads/open-graph.jpg” />

Best practices:

  • Use an image directly related to the content of the post or product page.
  • Make sure the image is at least 1200 x 630 px, with a 1.91:1 ratio, so it looks sharp on every device.

og:type

og:type tells platforms what type of content the page holds, so Facebook can display it in the right context. For example, if you set og:type to article, Facebook adds details such as the author and publish date.

Example: <meta property=”og:type” content=”article” />

Best practices:

  • For blog posts or news, set og:type to article.
  • For a business or brand website, you can choose website.
  • Combine it with other tags such as og:title, og:image, and og:description for full optimization when sharing on social media.

og:locale (optional tag)

The og:locale tag lets you define the language and region your content is aimed at. This way, platforms like Facebook can show your post to the right audience for each language or country.

Example: <meta property=”og:locale” content=”vi_VN” />

In the example above, vi_VN means the content is written in Vietnamese for users in Vietnam. The locale value usually follows the format <language>_<country>, for example ja_JP for Japanese in Japan.

Best practices:

  • If your website is in Vietnamese, choose vi_VN to make sure it displays correctly.
  • By default, Facebook treats content without og:locale as US English (en_US), so you only need to add this tag when your content is in another language.
  • For multilingual websites, set the matching og:locale for each version so the content always reaches readers in each market.

og:description (optional tag)

OG Tags description

This property gives a short summary of the page. Although optional, og:description plays an important role in convincing users to click.

Example: <meta property=”og:description” content=”A guide to using Open Graph meta tags to optimize how your website appears on social media.” />

Best practices:

  • Write a description meta description of 100 – 200 characters that is concise, engaging, and accurately reflects the page.
  • Write a unique description for each page to avoid duplication.
  • When you update your website content, remember to update the description so it stays accurate.

Besides the basic Open Graph tags, you can also use some advanced properties to extend how your website appears on social media, such as:

  • og:audio: Used to add a link to an audio file.
  • og:video: Lets you add a link to a video file.
  • og:description: Gives a more detailed description of the page when it is shared.
  • og:determiner: Sets how the article is displayed, such as a, an, the, or “auto”, before the object title.
  • og:site_name: Shows the overall site name, useful when your page belongs to a larger system or brand.

How to install Open Graph on your website

To optimize how your content looks when shared on social media, you can set up the Open Graph protocol for your website in two ways: using plugin SEO WordPress or inserting it manually with code. Both methods are simple and easy to carry out, so choose the one that fits your needs and platform. 

Steps to use a plugin in WordPress

How to set up Open Graph with Yoast SEO for WordPress

If your website runs on WordPress, the fastest way to add Open Graph meta tags is through a plugin Yoast SEO:  

  • Step 1: Go to the Social section of your website and select Facebook, then choose Enabled.
  • Step 2: In the Facebook Insights and admins, then enter your APP ID in the Facebook App ID field. If a post has no featured image, Facebook will automatically use the image from the Image URL field you set.
  • Step 3: Click Save Changes to save the settings. 

From now on, when you share a link, Facebook will pull the title, description, and image correctly thanks to the Open Graph Facebook tags.

Steps to add Open Graph manually 

If you prefer not to use a plugin, you can still add Open Graph meta tags directly to your website with these simple steps:

Step 1: Open the functions.php file, then add the code below inside the <?php ?>

function doctype_opengraph($output) {

 return $output . ‘

 xmlns:og=”http://opengraphprotocol.org/schema/”

 xmlns:fb=”http://www.facebook.com/2008/fbml”‘;

}

add_filter(‘language_attributes’, ‘doctype_opengraph’);

Step 2: This code is automatically inserted into the <head> tag of your website. Next, add the following code:

function fb_opengraph() {

 global $post;

 if(is_single()) {

 if(has_post_thumbnail($post->ID)) {

 $img_src = get_the_post_thumbnail_url(get_the_ID(),’full’);

 } else {

$img_src = get_stylesheet_directory_uri() . ‘wp-content/uploads/2026/08/open-graph-la-gi-cach-cai-dat-open-graph-toi-uu-cho-website.jpg’;

 }

 if($excerpt = $post->post_excerpt) {

 $excerpt = strip_tags($post->post_excerpt);

 $excerpt = str_replace(“”, “‘”, $excerpt);

 } else {

 $excerpt = get_bloginfo(‘description’);

 }

 ?>

 <meta property=”og:title” content=”<?php echo the_title(); ?>”/>

 <meta property=”og:description” content=”<?php echo $excerpt; ?>”/>

 <meta property=”og:type” content=”article”/>

 <meta property=”og:url” content=”<?php echo the_permalink(); ?>”/>

 <meta property=”og:site_name” content=”<?php echo get_bloginfo(); ?>”/>

 <meta property=”og:image” content=”<?php echo $img_src; ?>”/>

<?php

 } else {

 return;

 }

}

add_action(‘wp_head’, ‘fb_opengraph’, 5);

Step 3: Add the Open Graph tags to your website by inserting this code:

<meta property=”og:title” content=”<?php echo the_title(); ?>”/>

<meta property=”og:description” content=”<?php echo $excerpt; ?>”/>

<meta property=”og:type” content=”article”/>

<meta property=”og:url” content=”<?php echo the_permalink(); ?>”/>

<meta property=”og:site_name” content=”<?php echo get_bloginfo(); ?>”/>

<meta property=”og:image” content=”<?php echo $img_src; ?>”/>

Step 4: Use the statement below to declare the Open Graph meta tags:

add_action(‘wp_head’, ‘fb_opengraph’, 5);

Step 5: Attach the function you just created to the hook so the Open Graph tags are automatically inserted into the <head> section of your website.

The fastest way to create Open Graph tags

So what is the fastest way to create Open Graph meta tags? If you want to generate Open Graph meta tags simply and save time, follow the instructions below:

Step 1: Choose an online Open Graph tag generator, such as:

  • Duplichecker: https://www.duplichecker.com/open-graph-generator.php
  • Small SEO Tools: https://smallseotools.com/open-graph-generator/
  • Web Code: https://webcode.tools/open-graph-generator

Step 2: Fill in the required information (title, description, URL, and so on) in the matching fields, then press Enter to generate the code.

Step 3: Copy the generated code and paste it directly into your website's source code.

Setting up Open Graph correctly makes your website look better on social media, helps raise CTR, improves user experience, and strongly supports your overall marketing strategy . However, for lasting results, a business cannot stop at this technical optimization alone.

The professional website SEO services at MONA Media, we help you build a complete SEO strategy strategy, from optimizing your website infrastructure and running SEO Onpage/offpage work to using supporting tools such as Open Graph. That way, your website is not only friendly to Google but also attracts customers from many different channels.

Top SEO service at MONA

At the same time, Facebook advertising services from MONA helps businesses turn content optimized with Open Graph into a powerful weapon on Facebook. Your ads will look clean and polished and reach the right potential customers, which raises engagement, lifts conversion, and makes better use of your budget.

To discuss in more detail and get the best solution for your business, contact MONA Media today.

What are common Open Graph errors?

When setting up Open Graph meta tags, many businesses run into errors that make shared links, especially on Open Graph Facebook, show wrong or missing information. Here are the two most common errors to watch for:

Facebook cannot load the image when a website link is shared

Error: Facebook cannot load the image of a website link

This is the most common error when setting up Open Graph meta tags: a Facebook user clicks a shared link from your website and sees no image, or just an empty frame. The usual causes are:

  • The website is missing complete Open Graph meta data.
  • The Facebook bot hits a cache or server connection problem while crawling.

Incorrect Open Graph Meta Tags error

This error happens when Open Graph meta tags have wrong syntax or miss key information. For example, you enter a wrong value in og:image or og:url, or leave og:title empty, so the content shows incorrectly or Facebook cannot recognize it.

FAQ

Can Open Graph be used for chatbots, mobile apps, or email?

Yes,, but each is used a little differently. Specifically:

  • Chatbot (Zalo, Messenger): When a website link is sent, the platform automatically reads the OG Tags to show the title, image, and more.
  • Email: Email clients hardly ever show an OG preview. However, if a recipient shares the website link from the email on social media, Open Graph still displays as normal.
  • Mobile apps: The app needs to read OG data from the URL in order to show it.

How do you combine Open Graph with growth hacking techniques for a marketing campaign?

To use Open Graph for growth hacking, you can try these approaches:

  • Optimize OG images and content to create a standout preview that draws clicks.
  • Personalize OG tags by campaign, referral source, or customer group.
  • Add OG to share buttons or chatbots to boost natural virality.
  • Adjust OG by timing to trigger FOMO and drive action.
  • A/B test several OG versions to find the message with the highest CTR.

Understanding what is Open Graph and applying the correct setup will raise CTR, improve user experience, and support SEO Google effectively. When your website looks good and correct on social media, your brand scores points at first glance. If you want your website to truly break through on Google and other platforms, contact MONA Media for free consulting and to receive detailed SEO quote .

FAQ

Does Open Graph affect Google SEO?
Open Graph does not directly improve Google rankings, but it contributes to more shares, engagement and organic traffic from social networks. These are positive signals that raise credibility and the overall SEO strength of your website.
What is the standard Open Graph image size?
The minimum image size for the og:image tag is 1200 x 630 px with a 1.91:1 ratio, to make sure it displays sharply on every device when shared on social platforms.
About The MONA Group: Founded in 2016, with 60+ staff, MONA has delivered 14,000+ projects with an 85% client retention rate. MONA provides website design, full-scope SEO, custom software and AI automation solutions for businesses. Consultation hotline: 1900 636 648. Explore MONA AI Agent suite and MONA SEO services.
MONA has a podcast: listen instead of readingEpisodes on AI, automation & SEO for Vietnamese businesses
Nghe ngay
About the author

CEO & Founder · The MONA

Founder of The MONA, who built a services company of 60+ staff with 14,000+ projects delivered. Khánh Hùng shares how he thinks about building systems that run themselves, automating a business, and the real lessons from delivering projects at MONA.

Views 1,5K
Rate this article 4,6/5 · 16 ratings

Professional website
design services

Own a website with a beautiful, 100% exclusive design and a lifetime warranty, with the ability
to expand features flexibly as your business grows, starting today!

Contact Mona

    MONA có riêng một Người "Bạn Thân" cho bạn - Người Account sẽ đồng hành, hỗ trợ, hướng dẫn, đặt đồ ăn cho bạn mãi mãi, từ đây về sau!
    MONA will never sell your information or send you spam

    NHẬN TƯ VẤN SEO MIỄN PHÍ !

    Đội MONA tư vấn hệ thống quản lý giáo dục trực tuyến
    Hỏi đáp giáo dục 4.0
    Tạo cuộc hẹn miễn phí với MONA để giải đáp và tư vấn mọi thắc mắc về giải pháp số hoá ngành giáo dục
    Thời lượng cuộc hẹn
    45 Phút
    Ngày và giờ
    Thứ 2, ngày 25 tháng 12, 2023
    [9:30 - 10:15]

      Chọn ngày và giờ
      Khung giờ
      Back
      Hãy cho MONA biết bạn là ai
      0:00