DEV Community

Cover image for A Beginner’s Guide to Open Graph: Making Your Links Share Better
Isaac Shosanya
Isaac Shosanya

Posted on

A Beginner’s Guide to Open Graph: Making Your Links Share Better

#webdev #html #nextjs #beginners

What is Open Graph?

Open Graph is an Internet protocol used to standardize how metadata describes the content of a web page when its URL is shared, either among individuals or across social platforms. It allows you to provide various types of information, from the page title to the images or videos displayed on the site.

Image of a rich preview from a link sent by a user on slack

Why we need it?

Content needs to be shared and engaged with. Providing rich previews when a link is shared significantly improves engagement because users get more context about the page beyond a plain URL. A well-structured preview increases clicks, trust, and visibility across platforms.

Setting up open graph

There are few basic meta tags that we should start with;

  1. og:title The title of the webpage shown in the preview card. This is typically the same as your <title> tag.
  2. og:type Describes the type of content. "website" is the general default if none of the specific types apply.
  3. og:image The image displayed in the preview card. Use a high-resolution image with a minimum size of 300×300px for better compatibility.
  4. og:url The canonical URL of the page being shared. Now how do we use the tag in our websites well, it's metadata so we should have them in the <head> tag and the properties set in the <meta> tags see below as reference.

Plain HTML 

<html>
    <head>
        <meta property="og:title" content="Isaac Shosanya - A software developer" />
        <meta property="og:image" content="https://example.com/1" />
        <meta property="og:url" content="https://isaac.com" />
        <meta property="og:type" content="website"/>
    </head>
    <body>
        <h1>
            Hey there
        </h1>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Next.js 

export const metadata: Metadata = {
  title: siteMetaData.title,
  description: siteMetaData.description,
  creator: "Isaac Shosanya",
  publisher: "Isaac Shosanya",
  openGraph: {
    title: siteMetaData.title,
    description: siteMetaData.description,
    url: siteMetaData.url,
    type: "website",
  },
};
Enter fullscreen mode Exit fullscreen mode

Some social sites have their own specific meta properties they use, and you should look through their documentation for more insight into how to make certain things function on specific platforms.

  1. Twitter: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  2. Facebook: https://developers.facebook.com/docs/sharing/webmasters/
  3. LinkedIn: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
  4. Open Graph Official Docs: https://opg.me
  5. Next.js Open Graph Docs: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

These examples represent just the basics of Open Graph. There’s a lot more you can do with the protocol, and it's worth experimenting with additional properties to create richer and more engaging previews.

Reference article: https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/

Top comments (0)