HTML

open-graphs

Open Graphs

The Open Graph protocol enables any web page to become a rich object in a social graph.

Open Graphs Usage

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional meta tags in the head of your web page.

index.html
<head>
  <!-- HTML Meta Tags -->
  <title>Ali Reza - Portfolio</title>
  <meta
    name="description"
    content="As a front-end developer, I specialize in building and maintaining the user interface of web applications."
  />
 
  <!-- Facebook Meta Tags -->
  <meta property="og:url" content="alirezasamadi.com" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Ali Reza - Portfolio" />
  <meta
    property="og:description"
    content="As a front-end developer, I specialize in building and maintaining the user interface of web applications."
  />
  <meta property="og:image" content="https://i.ibb.co/9hyw1rL/Meta-Tag.png" />
 
  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta property="twitter:domain" content="alirezasamadi.com" />
  <meta property="twitter:url" content="alirezasamadi.com" />
  <meta name="twitter:title" content="Ali Reza - Portfolio" />
  <meta
    name="twitter:description"
    content="As a front-end developer, I specialize in building and maintaining the user interface of web applications."
  />
  <meta name="twitter:image" content="https://i.ibb.co/9hyw1rL/Meta-Tag.png" />
</head>

For Example

www.alirezasamadi.com

Ali Reza - Portfolio

As a front-end developer, I specialize in building and maintaining the user interface of web applications.

Facebook

<!-- Facebook Meta Tags -->
<meta property="og:url" content="alirezasamadi.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Ali Reza - Portfolio" />
<meta
  property="og:description"
  content="As a front-end developer, I specialize in building and maintaining the user interface of web applications."
/>
<meta property="og:image" content="https://i.ibb.co/9hyw1rL/Meta-Tag.png" />

Twitter / X

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="alirezasamadi.com" />
<meta property="twitter:url" content="alirezasamadi.com" />
<meta name="twitter:title" content="Ali Reza - Portfolio" />
<meta
  name="twitter:description"
  content="As a front-end developer, I specialize in building and maintaining the user interface of web applications."
/>
<meta name="twitter:image" content="https://i.ibb.co/9hyw1rL/Meta-Tag.png" />