Advanced SEO - Open Graph
Let's explore Open Graph, which allows you to present web pages on social media platforms such as Instagram and Facebook.
Open Graph is similar to a movie poster that showcases the title, main actors, a brief summary, and an image for a movie.
Developed by Facebook, the Open Graph protocol provides metadata about a web page, including its title, description, and image, which is used to display link preview images on social media.
Key Open Graph Tags
1. og:title
Defines the title of the web page.
Website Title
<meta property="og:title" content="Website Title" />
2. og:description
Defines a brief description of the web page.
Website Description
<meta property="og:description" content="Website Description" />
3. og:type
Defines the type of the web page (e.g., website, article).
Website Type
<meta property="og:type" content="website" />
4. og:url
Specifies the exact URL of the web page.
Website URL
<meta property="og:url" content="https://example.com/my-web-page" />
5. og:site_name
Defines the name of the website.
Website Name
<meta property="og:site_name" content="Website Name" />
6. og:image
Specifies the URL of the link preview image.
Website Preview Image
<meta property="og:image" content="https://example.com/my-image.jpg" />
Want to learn more?
Join CodeFriends Plus membership or enroll in a course to start your journey.