What is OpenGraph Image

OpenGraph images are images used for OpenGraph tags, which are displayed in Twitter, Facebook, and Open Graph previews.

OpenGraph images can be either static or dynamic. This depends on whether they are generated using an OpenGraph generator or other tools.

Images generated using an OpenGraph generator are typically static because they are generated based on the metadata you provide, which is usually static. For example, if you provide metadata for a blog post, the OpenGraph generator will create a static OpenGraph image based on that metadata.

Images generated using other tools can be dynamic. For instance, if you use a server-side rendering framework to generate OpenGraph images, these images might be generated based on user behavior, time, weather, or other dynamic information.

Create OpenGraph Images Using Tools

OpenGraph HTML Code

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="My Article Title">
<meta property="og:description" content="This is my article description">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

With this HTML code, the page will display the image https://example.com/og-image.png in OpenGraph.

Preview Effects

After creating an OG image, many websites provide online preview and debugging tools to help you diagnose issues. Here are some common tools: