{"id":28003,"date":"2022-04-06T02:32:50","date_gmt":"2022-04-06T02:32:50","guid":{"rendered":"http:\/\/manage-open-graph-images-in-nextjs"},"modified":"2025-06-15T14:45:49","modified_gmt":"2025-06-15T21:45:49","slug":"manage-open-graph-images-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/","title":{"rendered":"Manage Open Graph Images in NextJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Images are the modern internet\u2019s eye candy. Images are employed to capture the user\u2019s attention and spark their interest. With images, information appears uniquely, making it more appealing.<\/p>\n<p>Open Graph serves as a medium that extracts key points of a web application and creates a dynamic preview to increase user engagement and interest.<\/p>\n<p>In this article, we\u2019ll use Open Graph, Netlify, and Cloudinary to implement our application. Open Graph to add meta tags, Netlify to create a live demo of the app, and Cloudinary to host the image used in the app.<\/p>\n<h3>CodeSandbox and GitHub<\/h3>\n<p>The completed project is on <a href=\"https:\/\/codesandbox.io\/s\/naughty-microservice-fpect3\">CodeSandbox<\/a>. Fork it to get started quickly.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/naughty-microservice-fpect3?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Manage Open Graph images in NextJS\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><p>A live demo of this project is available on <a href=\"https:\/\/ugwu-opg.netlify.app\/\">Netlify<\/a>, and the source code is on <a href=\"https:\/\/github.com\/ugwutotheeshoes\/open-graph-app\">GitHub<\/a>.<\/p>\n<h3>Prerequisites<\/h3>\n<p>To get the most out of this article, the following requirements apply:<\/p>\n<ul>\n<li>Knowledge of CSS, <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\">JavaScript<\/a>, and <a href=\"https:\/\/reactjs.org\/\">React.js<\/a>.<\/li>\n<li>The latest version of <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a> or <a href=\"https:\/\/classic.yarnpkg.com\/en\/docs\/install\/#windows-stable\">Yarn <\/a>installed.<\/li>\n<li>A Cloudinary account \u2014 Create one <a href=\"https:\/\/cloudinary.com\/homepage-2\">here<\/a>.<\/li>\n<\/ul>\n<h3>Installing project dependencies<\/h3>\n<p>First, we\u2019ll create a Next.js app in a new folder by running the following command in our terminal:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">   npx create-next-app <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project-name<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, we\u2019ll navigate into the project directory.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project-name<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Running <code>npm run dev<\/code> starts the project on the local development server at <code>localhost:3000<\/code> in our browser.<\/p>\n<h3>Setting up an image in Cloudinary<\/h3>\n<p>After successfully creating an account, Cloudinary will redirect us to our account\u2019s dashboard page, where we can upload our image.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/8af378c234ad4640d7e5f27211b9be6fb6018354-1366x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"663\"\/><\/p>\n<p>After uploading the image, copy its URL; we\u2019ll use it later in this article.<\/p>\n<h3>What is Open Graph?<\/h3>\n<p>The <a href=\"https:\/\/ogp.me\/\">Open Graph protocol<\/a> is an Internet protocol designed by Facebook to standardize the use of metadata and various technologies within a website to reflect the site\u2019s content.<\/p>\n<p>Open Graph creates a dynamic, engaging preview of our website when shared on a social platform or application. The preview can provide details such as the website\u2019s title, a description of the website content, the duration of a video, etc. The preview also piques users\u2019 interest, prompting them to interact with the content.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/fe96bb6f61998ddedf3c84dc65b724ee246e97fb-594x603.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"594\" height=\"603\"\/><\/p>\n<h3>Basics of Open Graph<\/h3>\n<p><a href=\"https:\/\/cloudinary.com\/glossary\/og-image\">Open Graph<\/a> uses meta tags that inform the web on how to display the website\u2019s content.<\/p>\n<p>Meta tags are snippets of text that describe a website\u2019s content; the meta tag appears only in the source code, not on the site itself.<\/p>\n<p>The basic Open Graph meta tags required for a website are as follows:<\/p>\n<ul>\n<li>\n<code>og:title<\/code> &#8211; This is the website\u2019s title.<\/li>\n<li>\n<code>og:type<\/code> &#8211; This describes what type of web page it is. It includes types such as website, article, or video.<\/li>\n<li>\n<code>og:image<\/code> &#8211; A link to an image file representing a website\u2019s content<\/li>\n<li>\n<code>og:url<\/code> &#8211; This is the link to the current web page.<\/li>\n<li>\n<code>og:description<\/code> &#8211; This is a brief description of a website. Unless we choose to present it differently, this may be similar to <code>og:title<\/code>.<\/li>\n<li>\n<code>og:video<\/code> &#8211; This describes a link to a video file that complements a website.<\/li>\n<\/ul>\n<p>Each tag is unique and has its function or use. Without the tag, we can\u2019t depict a good preview of our website. For example, the image below shows a website without Open Graph\u2019s meta tag.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/ba9db1a50bdcc79ddb384a3b183327939252ff55-485x339.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"485\" height=\"339\"\/><\/p>\n<p>By default, most social media platforms will attempt to create a preview of a website. However, most of the time, this does not proceed as planned. It successfully captures the title, the website\u2019s description, and the link to the site, but it isn\u2019t the most appealing and typically does not invite engagement.<\/p>\n<p>When placing a meta tag on our website, it should be between the <code>Head<\/code> tag and any other metadata. The meta tag used should look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">property<\/span>=<span class=\"hljs-string\">\u201c&#91;NAME]\u201d<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\u201c&#91;VALUE]\u201d<\/span> \/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Our Next.js app will use some meta tags to show a preview of its content. Here, we\u2019ll make use of the image we hosted in Cloudinary.<\/p>\n<p>In the <code>index.js<\/code> file, we\u2019ll add the code snippet below to the <code>Head<\/code> tag.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">property<\/span>=<span class=\"hljs-string\">\"og:title\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"What is Web3?\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">property<\/span>=<span class=\"hljs-string\">\"og:type\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"website\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">property<\/span>=<span class=\"hljs-string\">\"og:description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Web3 is the next step in the evolution of the internet and, possibly, the organization of society. According to legend, Web 1.0 was the era of decentralized, open protocols, when the majority of internet activity consisted of visiting individual static webpages.\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">property<\/span>=<span class=\"hljs-string\">\"og:image\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"cloudinary-image-url\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">property<\/span>=<span class=\"hljs-string\">\"og:url\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"https:\/\/ugwu-opg.netlify.app\/\"<\/span> \/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The image below shows what the preview of our app will look like when we add our meta tags.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/5741b0afa2589fa2721c712cd6f4175f09f949c8-738x436.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"738\" height=\"436\"\/><\/p>\n<p>Deploying our demo website<\/p>\n<p>We\u2019ll use <a href=\"https:\/\/www.netlify.com\/\">Netlify <\/a>to deploy our demo. To do this, we must have an existing repository for the app on GitHub. Then, we will access Netlify\u2019s dashboard and click on the \u201cAdd new site\u201d button, as shown below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/d8e29cbbb51aa2fdf6b299df8ee0008de04a2a86-1349x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1349\" height=\"663\"\/><\/p>\n<p>Next, we\u2019ll click on \u201cImport from an existing project.\u201d This will redirect us to a page where we can access our repositories on GitHub.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/91c1aa16a80479ed7b275e6155f6f9efced70508-1349x663.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1349\" height=\"663\"\/><\/p>\n<p>Once we\u2019ve accessed our GitHub page, we can then choose the repo of our demo to deploy.<\/p>\n<h3>Social networks using Open Graph<\/h3>\n<p>Most social networks follow the Open Graph basics, but a few of them have their extensions to customize the appearance and feel of their ecosystem. For instance, Twitter allows us to specify <code>twitter:card<\/code>, which is the type of card we can use to show a preview of the website on Twitter. Twitter card types include:<\/p>\n<ul>\n<li>\n<code>summary<\/code>\n<\/li>\n<li>\n<code>summary_large_image<\/code>\n<\/li>\n<li>\n<code>creator<\/code>\n<\/li>\n<li>\n<code>site<\/code>\n<\/li>\n<\/ul>\n<p>These types will assist us in determining how our links are displayed. Using <code>summary_large_image<\/code>, Twitter will display our links with large, high-resolution photos \u2014 as long as we include them in the <code>og:image<\/code> tag.<\/p>\n<h3>Testing our Open Graph tags<\/h3>\n<p>Some of our favorite social media platforms have provided tools to assist us in debugging our tags. We can preview our website once we\u2019ve deployed a live demo of the site and verified that our meta tags are in the website\u2019s source code. The tools include:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cards-dev.twitter.com\/validator\">Twitter Card Validator<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developers.facebook.com\/tools\/debug\/\">Facebook URL Debugger<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developers.pinterest.com\/tools\/url-debugger\/\">Pinterest URL Debugger<\/a>\n<\/li>\n<\/ul>\n<h3>Conclusion<\/h3>\n<p>This article discussed the basics of Open Graph, the advantages of implementing it in applications, and how to integrate it.<\/p>\n<h3>Resources<\/h3>\n<ul>\n<li>\n<a href=\"https:\/\/ogp.me\/\">Open Graph Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developer.twitter.com\/en\/docs\/tweets\/optimize-with-cards\/guides\/getting-started\">Twitter Documentation for OpenGraph<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developers.facebook.com\/docs\/sharing\/webmasters\/\">Facebook Documentation for OpenGraph<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developers.pinterest.com\/docs\/rich-pins\/overview\/?\">Pinterest Documentation for OpenGraph<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.linkedin.com\/help\/linkedin\/answer\/46687\/making-your-website-shareable-on-linkedin?lang=en\">LinkedIn Documentation for OpenGraph<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28004,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,385,212,371],"class_list":["post-28003","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-netlify","tag-next-js","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Manage Open Graph Images in NextJS<\/title>\n<meta name=\"description\" content=\"This article covers creating a dynamic preview of shared web applications using Open Graph.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Manage Open Graph Images in NextJS\" \/>\n<meta property=\"og:description\" content=\"This article covers creating a dynamic preview of shared web applications using Open Graph.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:32:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-15T21:45:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"4928\" \/>\n\t<meta property=\"og:image:height\" content=\"3264\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Manage Open Graph Images in NextJS\",\"datePublished\":\"2022-04-06T02:32:50+00:00\",\"dateModified\":\"2025-06-15T21:45:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Netlify\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/\",\"name\":\"Manage Open Graph Images in NextJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA\",\"datePublished\":\"2022-04-06T02:32:50+00:00\",\"dateModified\":\"2025-06-15T21:45:49+00:00\",\"description\":\"This article covers creating a dynamic preview of shared web applications using Open Graph.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA\",\"width\":4928,\"height\":3264},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Manage Open Graph Images in NextJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Manage Open Graph Images in NextJS","description":"This article covers creating a dynamic preview of shared web applications using Open Graph.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Manage Open Graph Images in NextJS","og_description":"This article covers creating a dynamic preview of shared web applications using Open Graph.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:32:50+00:00","article_modified_time":"2025-06-15T21:45:49+00:00","og_image":[{"width":4928,"height":3264,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Manage Open Graph Images in NextJS","datePublished":"2022-04-06T02:32:50+00:00","dateModified":"2025-06-15T21:45:49+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA","keywords":["Guest Post","Image","Netlify","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/","name":"Manage Open Graph Images in NextJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA","datePublished":"2022-04-06T02:32:50+00:00","dateModified":"2025-06-15T21:45:49+00:00","description":"This article covers creating a dynamic preview of shared web applications using Open Graph.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA","width":4928,"height":3264},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Manage Open Graph Images in NextJS"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925707\/Web_Assets\/blog\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b\/fa35b2da31e9bcddfebc77c92979711675ccf4e8-4928x3264-1_280044204b.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28003"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28003\/revisions"}],"predecessor-version":[{"id":37778,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28003\/revisions\/37778"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28004"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}