Comprehensive Guide to Open Graph Meta Tags

Open Graph is a set of meta tags that allow you to control how your website or web page appears when it is shared on social media platforms such as Facebook, Twitter, LinkedIn, and others. These tags provide information about your website or web page, such as its title, description, image, and other metadata. In this guide, we will explore Open Graph meta tags and how to use them effectively.

Basic Open Graph Tags

og:title

This tag specifies the title of your web page or website.

html
<meta property="og:title" content="Your Title Here">

og:description

This tag specifies the description of your web page or website.

html
<meta property="og:description" content="Your Description Here">

og:image

This tag specifies the image that should be used when your web page or website is shared on social media platforms. The image should be at least 1200 x 630 pixels.

html
<meta property="og:image" content="https://example.com/your-image.jpg">

og:url

This tag specifies the URL of your web page or website.

html
<meta property="og:url" content="https://example.com/your-page-url">

og:type

This tag specifies the type of content on your web page or website.

html
<meta property="og:type" content="website">

Additional Open Graph Tags

og:site_name

This tag specifies the name of your website.

html
<meta property="og:site_name" content="Your Site Name">

og:locale

This tag specifies the language and region of your web page or website.

html
<meta property="og:locale" content="en_US">

og:article

This tag is used for web pages that contain articles. It provides additional information about the article, such as its author, publication date, and section.

html
<meta property="og:type" content="article">
<meta property="article:author" content="Author Name">
<meta property="article:published_time" content="2022-04-07T00:00:00Z">
<meta property="article:section" content="Section Name">

og:video

This tag is used for web pages that contain videos. It provides additional information about the video, such as its URL, title, description, and duration.

html
<meta property="og:type" content="video">
<meta property="og:video" content="https://example.com/your-video.mp4">
<meta property="og:video:title" content="Your Video Title">
<meta property="og:video:description" content="Your Video Description">
<meta property="og:video:duration" content="3600">

og:audio

This tag is used for web pages that contain audio. It provides additional information about the audio, such as its URL, title, and description.

html
<meta property="og:type" content="audio">
<meta property="og:audio" content="https://example.com/your-audio.mp3">
<meta property="og:audio:title" content="Your Audio Title">
<meta property="og:audio:description" content="Your Audio Description">

Open Graph meta tags are an important aspect of social media optimization (SMO). By adding these tags to your website or web page, you can control how your content appears on social media platforms and increase its visibility. Use the basic Open Graph tags to provide essential information about your content, and use the additional tags to provide more specific information about the type of content on your web page or website.