본문으로 건너뛰기

Advanced SEO - Open Graph

Advanced SEO - Open Graph

Let's learn about Open Graph which is used to represent web pages on social media such as Instagram and Facebook.

The Open Graph protocol developed by Facebook provides metadata such as the title, description, and image of a web page to social media and is used to display preview images of links.

Open Graph is like a movie poster that represents an image with the title of the movie, the main actors, and a brief synopsis.


Key Open Graph Tags

1. og:title

  • It represents the title of the web page.
  • It briefly informs about the subject and content of the page to be shared.
Website Title
<meta property="og:title" content="Website Title" />

2. og:description

  • It represents a brief description of the web page.
  • It provides a summarized description of the content of the page.
Website Description
<meta property="og:description" content="Website Description" />

3. og:type

  • It represents the type of the web page (e.g., website, article).
  • This information allows social media to understand the type of page.
Type of Website
<meta property="og:type" content="website" />

4. og:url

  • It represents the exact URL of the web page.
  • It is like an 'address book' that allows you to accurately find the web page.
Website URL
<meta property="og:url" content="https://example.com/my-web-page" />

5. og:site_name

  • It represents the name of the entire website.
  • It informs which site the web page is a part of.
Website Name
<meta property="og:site_name" content="Website Name" />

6. og:image

  • When sharing externally via a link, it represents the URL for the link preview image.
  • It is best to use an image that represents the content of the page.
Website Preview Image
<meta property="og:image" content="https://example.com/my-image.jpg" />