How to use Open Graph Meta properties and tags: Examples, og:type,og:image
Open Graph Types
Open Graph protocol defines a basic set of types.
The List of Open Graph Types
Here they are:
- Basic Types:
- website: This type represents a website. This is the default type and is used if no type is specified.
- article: This type represents an article, such as a news story or blog post.
- Music Types:
- music.song: A song.
- music.album: An album.
- music.playlist: A playlist.
- music.radio_station: A radio station.
- Video Types:
- video.movie: A movie.
- video.episode: An episode of a TV show.
- video.tv_show: A TV show.
- video.other: Any other video content.
- Books:
- book: A book.
- Profiles:
- profile: A user profile. This is primarily used by Facebook to represent individual user profiles.
It's worth noting that each of these types might have additional properties that can be defined. For instance, an article can have properties like article:published_time and article:author.
OG Types and Media(MIME) Types
Sometimes there is a confusion between Open Graph (og) types and the media types (formerly known as MIME types). They have a distinct set of values and serve different purposes.
Open Graph types (og:type) are used to define the kind of object that your content represents when it's shared on social media platforms like Facebook. The Open Graph protocol has a predefined set of types, such as:
website article book profile music.song video.movie ...and a few others. These are not to be confused with media types, which are used to tell browsers and other software how to interpret a given piece of content. Media types have a much wider variety and are more detailed, like:
text/html image/jpeg application/json video/mp4 ...and many others. So you're setting up Open Graph tags for your content, stick to the types defined by the Open Graph protocol.
Examples of Open Graph Tags and Properties
Open Graph Tags for a Homepage
When defining Open Graph tags for a website's homepage, you'd typically use the website type. Here's an example of Open Graph meta tags you might include in the
section of your homepage's HTML:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Open Graph Meta Tags for an website(homepage) -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Name" />
<meta property="og:description" content="A brief description of your website." />
<meta property="og:url" content="https://www.yourwebsite.com/" />
<meta property="og:image" content="https://www.yourwebsite.com/path-to-your-image.jpg" />
<meta property="og:site_name" content="Your Website Name" />
<meta property="og:locale" content="en_US" />
<!-- ... other meta tags, styles, scripts ... -->
<title>Your Website Name</title>
</head>
<body>
<!-- Your website's content -->
</body>
</html>
Open Graph Tags for Blog Posts
For a blog post, the appropriate Open Graph (og) type to use is article.
The Open Graph protocol, which is used to enhance the display of content when shared on platforms like Facebook, defines several object types, and article is specifically designed for written content like news stories or blog posts.
When you set the og:type to article, you can also use additional article-specific meta tags, such as:
- article:published_time: The date and time the article was first published.
- article:modified_time: The date and time the article was last modified.
- article:expiration_time: The date and time after which the article will no longer be relevant.
- article:author: Links to the author's profile.
- article:section: The section of the website or publication in which the article appears.
- article:tag: Keywords that describe the topics covered in the article.
Here's a basic example of how you might set up Open Graph meta tags for a blog post:
<!-- Open Graph Meta Tags for a Blog Post or article -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Title of Your Blog Post" />
<meta property="og:description" content="A brief description of the blog post." />
<meta property="og:url" content="https://www.yourwebsite.com/blog-post-url" />
<meta property="og:image" content="https://www.yourwebsite.com/path-to-image.jpg" />
<meta property="article:published_time" content="2023-10-03T04:59:00Z" />
<meta property="article:modified_time" content="2023-10-03T05:30:00Z" />
<meta property="article:author" content="https://www.yourwebsite.com/author-profile" />
<meta property="article:section" content="Tech News" />
<meta property="article:tag" content="OpenAI" />
<meta property="article:tag" content="ChatGPT" />
Open Graph for Profiles
If you are working on a blog and want to make the author shareable, os you simply want to implement a user profile page, you can add the following properties, as in the following example, using the Open Graph protocol. Here's how to set up Open Graph meta tags in the
section of a user profile page's HTML: <!-- Open Graph Meta Tags an user profile -->
<meta property="og:type" content="profile" />
<meta property="og:title" content="John Doe's Profile" />
<meta property="og:description" content="John Doe's personal profile on AwesomePlatform." />
<meta property="og:url" content="https://www.awesomeplatform.com/profiles/johndoe" />
<meta property="og:image" content="https://www.awesomeplatform.com/profile-images/johndoe.jpg" />
<!-- Additional profile properties -->
<meta property="profile:first_name" content="John" />
<meta property="profile:last_name" content="Doe" />
<meta property="profile:username" content="johndoe" />
<meta property="profile:gender" content="male" /> <!-- or 'female', 'other', etc. based on available options -->
The Open Graph profile type supports additional properties specific to profiles, like profile:first_name, profile:last_name, profile:username, and profile:gender.
You can implement in a similar way the open graph meta tags for music, video and books. At this point there are no official standard opengraph meta tags for games or other types.
Open Graph Image tag property
Understanding the Factory Pattern: When and How to Use It
In this tutorial we are going to explore the factory pattern, to understand when to use and looking at a few practical use cases.