A Guide to Open Graph Types

blog_related_media

blog_topic

blog_related_activities

blog_niche

blog_related_tips

unique_blog_element

Ever wonder how a simple link shared on Facebook, X, or LinkedIn magically transforms into a rich, clickable preview with an image, title, and description? That’s the Open Graph protocol at work, and the og:type property is the linchpin holding it all together.

Think of og:type as the director's cue for social media platforms. It tells them exactly what kind of content you're sharing—whether it's an article, a video, a product, or just a general website. This single tag dictates how your content will look and function in a user's feed, making it one of the most critical pieces of the social sharing puzzle.

A Look at Open Graph and its Core Types

At its heart, Open Graph uses a few simple meta tags to translate your webpage's content into a language social media crawlers can easily understand. When you specify an og:type, you're giving these platforms the context they need to present your content in the most engaging way possible.

It might seem small, but this tag has a huge impact. For example:

Declaring your content as video.movie can trigger an interactive video player right in the feed.

Using article allows you to specify details like the author and publication date for a richer preview.

The website type is the perfect catch-all, serving as a reliable default for homepages and general-purpose pages.

Getting these open graph types right is a non-negotiable for anyone serious about optimizing their social media presence. It's how you turn a plain URL into an irresistible, clickable preview that boosts engagement. This kind of structured data is the foundation of modern graph technology, a market that was valued at USD 3.25 billion in 2022 and is on track to explode to over USD 23 billion by 2032. If you're curious, you can find more data on the graph technology market to see just how fast it's growing.

To make things easier, here’s a quick rundown of the Open Graph types you'll likely use most often. Think of it as your cheat sheet for getting started.

Quick Lookup of Common Open Graph Types

Object Type	Primary Use Case
`website`	The default type for most web pages, especially homepages.
`article`	Best for blog posts, news stories, or any text-based content.
`video.movie`	Used for movie content, often enabling rich player integrations.
`product`	For e-commerce pages to display price, brand, and other details.
`profile`	To represent a person's profile, including their name and gender.
`book`	For pages dedicated to a specific book, including author and ISBN.
`music.song`	Used for sharing a single song, with details like artist and album.

This table covers the essentials, but the Open Graph protocol offers a much deeper set of object types for all kinds of specific content. We'll dive into those next.

The Four Essential Open Graph Properties

Before we get into the weeds with the huge list of Open Graph types, you have to nail the four core properties first. Think of these as the absolute, must-have foundation for any link you share. Without them, social media platforms are just guessing, and they usually guess wrong, leaving you with an ugly, unappealing link preview.

These four tags are the "who, what, where, and why" for your webpage. They give platforms like Facebook, X, and LinkedIn just enough information to understand your content and display it properly. Getting these right is non-negotiable for a decent-looking share.

The Core Four OG Tags

These properties are a team. When they work together, they create the complete, clickable social media card you're aiming for.

og:title: This is your headline. It needs to be catchy and to the point—aim for 55-60 characters so it doesn't get awkwardly cut off. While it’s a lot like your SEO title tag, you can tweak this one to be a bit punchier for a social media audience. A lot of the same rules for writing good headlines apply here, and you can learn more from these meta description best practices.

og:type: This tells the platform what kind of thing you're sharing. Is it an article, a website, a video? This little piece of context is surprisingly important and can change how the final preview looks.

og:image: This is the visual anchor for your post and arguably the most important tag for grabbing attention in a busy feed. Always use a high-quality image. The sweet spot for dimensions is 1200 x 630 pixels.

og:url: This is simply the canonical URL for your page. It’s the official address, ensuring that all likes, shares, and comments for that link get credited to the same source, rather than being split across different versions of the URL.

Key Takeaway: Seriously, don't skip these four tags. It's the bare minimum for controlling how your brand shows up on social media. If you forget something like the og:image, for instance, you'll end up with a sad, text-only link that practically guarantees no one will click on it.

Mastering Website and Article Types

Of all the open graph types out there, website and article are the two you'll find yourself using over and over again. Getting the distinction right between them is one of the most fundamental skills for creating social media previews that actually work.

Think of the website type as the universal default. If you don't specify an og:type at all, most social platforms will just assume your page is a general website anyway. This makes it the perfect, no-fuss choice for your homepage, "About Us" page, contact page, or any other top-level page that isn't a specific piece of content.

But for your blog posts, news stories, or editorials, you need to switch gears. Using the article type is a critical move that unlocks a whole suite of specific properties. This simple change feeds much richer context to social crawlers, making your shared links far more informative and appealing.

The Power of the Article Type

When you tag a page as an article, you open the door to adding details that are pointless for a generic website but absolutely crucial for a piece of content. These extra properties help platforms like Facebook and LinkedIn display your content with more authority and precision. It just looks better.

Here are the key properties you get with the article type:

article:published_time: Pinpoints the exact date and time the article first went live.

article:modified_time: Shows when the article was last updated, which is great for signaling fresh content.

article:author: Links directly to the author's profile page, giving them proper credit.

article:section: Designates the category the article belongs to, like "Technology" or "Marketing."

article:tag: Lets you add relevant keywords or tags tied to the content.

This is all about adding semantic structure to your data, a concept that's gaining huge traction in more advanced applications. For instance, knowledge graphs use this same principle of context-rich data to organize information for things like semantic search. The market for this technology, valued at USD 1.06 billion in 2023, is expected to hit USD 3.42 billion by 2030, which tells you everything you need to know about the growing importance of structured data. You can read more about the growth of the knowledge graph market.

Practical Code Examples

Let's look at the actual markup. The difference between a simple homepage and a detailed blog post becomes crystal clear when you see the code side-by-side.

A homepage using the website type can be pretty minimal.

Homepage Example (og:type="website"): Now, for a blog post, using the article type lets you pack in so much more useful information.

Blog Post Example (og:type="article"): By using the correct open graph types, you’re giving social platforms the exact data they need to show off your content in the best possible light. It’s a small effort that can seriously boost your visibility and get more people to click.

2. Implementing Media and Object Types

Open Graph goes way beyond just sharing a title and an image. When you're dealing with rich media like videos and music, or even real-world things like books and people, the protocol gives you a whole set of specific open graph types to work with. Using these more granular types is the key to giving social platforms the exact information they need to create richer, more interactive previews in people's feeds.

Think about it this way: when you share a link to a video, using og:type="video.movie" is miles better than the generic article type. This little change signals to platforms like Facebook that the content is actually playable, often triggering an embedded player right there in the post. That one tweak can seriously boost engagement by making it dead simple for people to watch.

Optimizing for Video and Music Content

The video and music object types are where things get really interesting, as they come with their own unique properties that add extra layers of context. For video content, you can add details that tell a user exactly what they're about to watch before they even hit play.

A few key properties for the video type include:

video:director: The person who directed the video content.

video:duration: The length of the video in seconds.

video:release_date: The date the video was first released.

Likewise, the music type lets you define your audio content with real precision. If you're sharing a song from your latest album or a clip from a podcast, it becomes way more compelling when you serve up the right metadata from the get-go.

This infographic breaks down the essential technical specs you'll need when using Open Graph tags for video.

As the visual guide shows, sticking to the platform's standards for dimensions, file size, and duration is critical. It's what ensures your video previews actually show up correctly and load without a hitch.

Comparison of Media OG Types and Key Properties

To make things a bit clearer, here’s a quick-glance table comparing the video and music OG types. It highlights their unique properties so you can easily see what’s available for each.

Media Type	Key Properties	Best For
Video	`video:director`, `video:duration`, `video:release_date`	Movie clips, tutorials, music videos, promotional content.
Music	`music:musician`, `music:album`, `music:duration`	Songs, albums, podcast episodes, audio clips.

This comparison should help you pick the right properties for your media content, ensuring it gets the rich preview it deserves on social platforms.

Defining Real World Objects

Open Graph is smart enough to handle tangible items and profiles, too. This means you can properly mark up pages about books, authors, or really any person. It's incredibly handy for author bios, e-commerce sites selling books, or personal portfolio pages.

The profile type is designed specifically to represent a person. It includes properties that create a quick, clear identity snapshot.

profile:first_name: The person's first name.

profile:last_name: The person's last name.

profile:username: A short, unique username.

profile:gender: The person's gender (male, female).

For anything literary, the book type provides a standardized way to share information, which is a lifesaver for authors, publishers, and review sites. Key properties here include book:author, book:isbn, and book:release_date. Using these tags ensures that when your book page gets shared, the preview is instantly recognizable and packed with useful info.

Key Insight: Here's a pro tip: always choose the most specific og:type available. It’s the difference between a generic link and a structured, context-rich object that social algorithms can truly understand and display effectively. The end result? Better engagement, every time.

Of course, getting your tags right is just one part of the process. For a wider look at getting your content out there, our guide on how to publish a web page offers a great checklist to make sure all your technical ducks are in a row before you go live. It’s all about making sure your hard work gets the visibility it deserves.

Advanced Implementation and Structured Properties

Once you've got the basic tags down, it's time to dig into the more powerful features: structured properties and arrays. This is where you can really start crafting detailed, rich social previews that make your content pop in a crowded feed. Think of it as giving social crawlers a much deeper, more nuanced understanding of what your page is about.

Arrays are a game-changer because they let you provide multiple values for a single property. Instead of being stuck with just one og:image, you can offer a few different options. This gives platforms like Facebook the flexibility to pick the image that works best for the situation, ensuring your content always looks its best.

Using Structured Properties for Precision

Structured properties are all about adding extra detail to a main Open Graph property. You simply nest them using a colon, like og:image:width, which tells social platforms the exact width of your og:image. This simple step removes all the guesswork and stops crawlers from having to guess at dimensions, which often leads to weird cropping.

A few key structured properties you'll want to use are:

og:image:width: Defines the pixel width of your image.

og:image:height: Defines the pixel height of your image.

og:image:alt: Provides essential alternative text for accessibility and context.

og:video:type: Specifies the video's media type, like application/x-shockwave-flash.

This method of nesting data is actually similar to how graph databases create complex relationships between data points. In fact, the global graph database market was valued at USD 1.1 billion in 2024 and is expected to surge to USD 17.88 billion by 2033. This growth is fueled by the exact same need for structured, interconnected data that Open Graph leverages. You can read more about the rise of graph database technology if you're curious.

Key Takeaway: Always try to provide multiple og:image tags along with their width and height properties. It gives social platforms everything they need to display your visuals perfectly, without awkward cropping or resizing.

Real World Example with Arrays

Let's say you have a blog post written by two authors and it features several great images. Instead of picking just one of each, you can use arrays to list every author and every relevant image. This paints a much more complete and honest picture of your content.

While Open Graph is fantastic for this, its capabilities can sometimes overlap with more formal data structures. If you're dealing with really complex information, it might be worth exploring our guide on how to add schema markup for even more granular control.

How to Validate and Debug Your Open Graph Tags

Creating your Open Graph tags is just the first step. You absolutely have to validate them to make sure social platforms can read them correctly and display everything as you intended. Without testing, you're flying blind—you could end up with broken images or missing titles, completely torpedoing your social sharing efforts.

Luckily, the major platforms offer free tools to help you diagnose and squash these bugs before they become a problem.

The one tool you can't live without is Facebook's Sharing Debugger. Just paste your URL, and it will show you exactly how your page will look when shared on Facebook and other Meta platforms.

More importantly, it gives you critical feedback by flagging missing properties, calling out images that are too big or small, and highlighting other errors that could make your preview look sloppy.

To get started, simply enter your URL and hit "Debug." The tool instantly scrapes your page for its OG tags.

Here’s a look at the kind of feedback you'll get back.

The results page gives you a live link preview, a complete list of all the Open Graph properties it found, and any warnings that need your attention.

Another fantastic resource is the LinkedIn Post Inspector. It works in a very similar way, letting you preview your content and sniff out any markup issues that are specific to LinkedIn’s platform. I always recommend using both; it’s the only way to be sure your content looks sharp and professional across the board.

If you spot an error, the fix is usually straightforward. Just head back to your website's HTML, adjust the meta tags, clear any server or CDN caches, and run the debugger again. This simple loop ensures all your hard work defining open graph types pays off with a perfect social share, every single time.

Got Questions About Open Graph Types? We've Got Answers.

When you start digging into Open Graph, a few common questions always seem to pop up. Let's clear the air and tackle the ones we hear most often so you can get your meta tags right without any guesswork.

Does the Open Graph Type Actually Affect SEO?

This is a big one. While og:type tags are built for social media, they don't directly factor into your search engine rankings. Google and other search engines have their own ways of understanding your page, like schema markup and the content itself.

But there's a crucial indirect benefit here. Getting your og:type right leads to a much richer, more clickable preview on social feeds. A compelling preview gets more shares and clicks, driving social traffic to your site. That buzz—the engagement and potential backlinks—sends positive signals to search engines that absolutely do help your SEO in the long run.

What Happens If I Just Leave the OG Type Out?

If you forget to specify an og:type, social platforms will usually just default to website. For your homepage or a generic landing page, that's fine. But for anything more specific, you're missing a trick.

By skipping the right type, you lose the chance to add extra, context-rich details. For instance, if you don't use og:type="article", you can't add helpful tags like article:author or article:published_time. The result is a generic, less engaging social card that blends into the noise.

Can I Use More Than One OG Type on a Single Page?

Nope, that's a no-go. The Open Graph protocol is designed for one page to represent one thing. You have to pick the single og:type that best describes the main point of the page.

So, if you have a blog post that also features an embedded video, the page should still be tagged as an article. The video is part of the content, but the article is the main event. Keep it simple and stick to one.

Ready to turn your content into a professional, SEO-optimized blog without the technical headaches? Feather converts your Notion pages into a fully functional website in minutes. Get started today and focus on what you do best—creating great content. Learn more at Feather.