Open Graph Magic: Transform Your Links into Click Magnets with This Simple Guide

As a technical lead developer, business owner and tech enthusiast, I see a lot of links. Some have unique, rich, super engaging content; others flop and have no content. Ever wonder why that is?

In 2010,Meta (formally Facebook) created a protocol called Open Graph.
These tags enable any web page to have the same functionality as a Facebook Page. They allow for the specification of metadata that provides information about the ppage'scontent, such as the title, type, URL, image, and description, when a web page is shared on social networks like Facebook or LinkedIn or over instant messaging services like Slack or Teams, ensuring that the link preview displays the content in a more appealing and informative way.

You can take your links from this.

So boring .

To something like this from my company's website here

Okay, so we all want our links and projects to get clicks, so how can we get this working in our own projects?

Just add this HTML markup to the head of your HTML document. This will work in react or vanilla HTML I’ll Show you how to do it in Next.js 14 in a min

Make sure to swap out my info for yours in the content sections.
And a quick note on the image path. They need to be absolute paths for your images to show up.

<title>Ignite Web Design</title>
<meta name="description" content="Providing end-to-end support to grow your business online"/>
<meta property="og:title" content="Ignite Web Design"/>
<meta property="og:description" content="Providing end-to-end support to grow your business online"/>
<meta property="og:url" content="https://ignitewebdesign.ca/"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="600"/>
<meta property="og:image" content="https://ignitewebdesign.ca/opengraph-image.png?457b41e20bfc6c97"/>
<meta property="og:type" content="website"/>

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Ignite Web Design"/>
<meta name="twitter:description" content="Providing end-to-end support to grow your business online"/>
<meta name="twitter:image:type" content="image/png"/>
<meta name="twitter:image:width" content="1200"/>
<meta name="twitter:image:height" content="600"/>
<meta name="twitter:image" content="https://ignitewebdesign.ca/twitter-image.png?457b41e20bfc6c97"/>

One more thing to remember while you are developing your next big thing. It is your favicon. That’s the little icon in your browser tab. You will also want to update that to get that polished look.
Here the HTML mark for that as well

<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>

You will want to add an icon to your project and name it favicon and again make sure you have the path correct. This one does not have to be an absolute path

If you enjoyed this article make sure to give me a follow.

Happy coding.

PS.

If you want to achieve this in Next.js 14 using the app router. Just add this to your main layout.js file or the layout in your route and make each page dynamic

export const metadata = {
  metadataBase: new URL('https://ignitewebdesign.ca'),
  title: 'Ignite Web Design',
  description: 'Providing end-to-end support to grow your business online',
  openGraph: {
    url: 'https://ignitewebdesign.ca',
    type: 'website',
    title: 'Ignite Web Design',
    description: 'Providing end-to-end support to grow your business online',
  },
  // Including Facebook (Open Graph) metadata
  facebook: {
    url: 'https://ignitewebdesign.ca/',
    type: 'website',
    title: 'Ignite Web Design',
    description: 'Providing end-to-end support to grow your business online',
  },
  twitter: {
    card: 'summary_large_image',
    url: 'https://ignitewebdesign.ca/',
    title: 'Ignite Web Design',
    description: 'Providing end-to-end support to grow your business online',
  },
  linkedIn: {
    url: 'https://ignitewebdesign.ca/',
    title: 'Ignite Web Design',
    description: 'Providing end-to-end support to grow your business online',
  },
};