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.
<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
![](https://www.alirezasamadi.com/opengraph-image.png?4d5769bf8ffd2998)
www.alirezasamadi.com
Ali Reza - Portfolio
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 / 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" />