{"id":27975,"date":"2022-04-08T13:40:57","date_gmt":"2022-04-08T13:40:57","guid":{"rendered":"http:\/\/how-to-add-open-graph-images-in-nuxtjs"},"modified":"2025-06-15T14:48:06","modified_gmt":"2025-06-15T21:48:06","slug":"how-to-add-open-graph-images-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/","title":{"rendered":"How to Add Open Graph Images in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>People create content on the internet with at least one primary goal: to share with other internet users. When you share a website\u2019s URL through social media platforms like Facebook, Twitter, Messenger, or WhatsApp, you may notice that the shared URL forms a card that looks like the image 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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648265356920_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"502\" height=\"337\"\/><\/p>\n<p>The information on this card gives an idea of what to expect when you open the website. Open Graph Protocol facilitates the creation of these preview cards.<\/p>\n<p><a href=\"https:\/\/ogp.me\/\">Open Graph<\/a> is an internet protocol created by Facebook that uses metadata in your code to enable your website to become a rich object on a social graph.\nIt gives you more control over how your website\u2019s preview card looks on social media platforms by putting Open Graph <code>&lt;meta&gt;<\/code> tags in your website\u2019s <code>&lt;head&gt;<\/code> section.<\/p>\n<p>This article explores how to manage Open Graph images on your NuxtJS website.<\/p>\n<h2>CodeSandbox and GitHub Repo<\/h2>\n<p>Click the CodeSandbox link below to view the demo used in this article:<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/embed\/nuxt-open-graph-demo-drkmv0?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">https:\/\/codesandbox.io\/embed\/nuxt-open-graph-demo-drkmv0?fontsize=14&amp;hidenavigation=1&amp;theme=dark<\/a><\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/nuxt-open-graph-demo-drkmv0?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=\"how to add open graph images in nuxtjs\"\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>To view its source code on GitHub, click <a href=\"https:\/\/github.com\/dpkreativ\/nuxt-open-graph-demo\">here<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>This article requires the following:<\/p>\n<ul>\n<li>Basic knowledge of HTML tags.<\/li>\n<li>Knowledge of Git and GitHub.<\/li>\n<li>A Cloudinary account to manage your images &#8211; create a free one <a href=\"https:\/\/cloudinary.com\/console\">here<\/a>.<\/li>\n<li>A <a href=\"http:\/\/\">Vercel account<\/a> to deploy your NuxtJS website.<\/li>\n<li>Proficiency in JavaScript, VueJS, and NuxtJS is not a strict requirement but is preferred.<\/li>\n<\/ul>\n<h2><a href=\"http:\/\/\">Open Graph Protocol<\/a> &#8211; Basics<\/h2>\n<p>The basic structure of an Open Graph <code>&lt;meta&gt;<\/code> tag is:<\/p>\n<pre><code>&lt;meta property=&quot;&quot; content=&quot;&quot; \/&gt;\n<\/code><\/pre>\n<p>You can specify the Open Graph <code>property<\/code> with an <code>og:<\/code> prefix and fill out its <code>content<\/code>.<\/p>\n<p>There are four required <a href=\"http:\/\/\">Open Graph properties<\/a> for every website:<\/p>\n<ul>\n<li>\n<code>og:title<\/code> &#8211; containing the title of your website.<\/li>\n<li>\n<code>og:type<\/code> &#8211; specifying the type of rich object.<\/li>\n<li>\n<code>og:image<\/code> &#8211; an image URL displayed on your preview card.<\/li>\n<li>\n<code>og:url<\/code> &#8211; the URL of your website (often auto-generated).<\/li>\n<\/ul>\n<p>For example, the image above used to illustrate the meaning of Open Graph will have the following meta tags:<\/p>\n<pre><code>&lt;head&gt;\n  &lt;meta property=&quot;og:title&quot; content=&quot;Build a Video Blog in NuxtJS&quot; \/&gt;\n  &lt;meta property=&quot;og:type&quot; content=&quot;website&quot; \/&gt;\n  &lt;meta property=&quot;og:image&quot; content=&quot;http:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/v1\/mediajams\/MediaJams-og-blog-2&quot; \/&gt;\n  &lt;meta property=&quot;og:url&quot; content=&quot;https:\/\/mediajams.dev\/post\/build-a-video-blog-in-nuxtjs&quot; \/&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n<p>Check the Open Graph Protocol <a href=\"https:\/\/ogp.me\/\">documentation<\/a> to see the list of available properties.<\/p>\n<h2>Storing your images<\/h2>\n<p>For this project, you\u2019ll store your image son Cloudinary. You can also choose to store them locally or using another cloud provider.\nIn your browser, open <a href=\"https:\/\/cloudinary.com\/console\">cloudinary.com\/console<\/a> to access your Cloudinary dashboard. Click on the \u201cMedia Library\u201d tab, and create a new folder to store your images:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648291552963_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"568\"\/><\/p>\n<p>Double-click on your newly created folder to open, then add your desired images:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648291809991_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"884\" height=\"567\"\/><\/p>\n<p>To get the URL of an image on Cloudinary, hover over the image card and click the link icon that appears:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648291963893_Screenshot+2022-03-26+115219.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"737\" height=\"377\"\/><\/p>\n<h2>Setting up the demo<\/h2>\n<p>In your terminal, navigate to your desired project folder and run the command below to create a new project:<\/p>\n<pre><code>npx create-nuxt-app nuxt-open-graph-demo\n<\/code><\/pre>\n<p>You will be prompted with selections to aid project setup. Choose options based on the recommendations 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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648270316900_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"964\" height=\"295\"\/><\/p>\n<p>After a successful setup, open the project in your preferred code editor, and run the command below in its terminal:<\/p>\n<pre><code>yarn dev\n<\/code><\/pre>\n<p>This will set up a dev environment with hot reload that you can view on your browser at <code>localhost:3000<\/code>. Alternatively, you can use <a href=\"https:\/\/nodejs.org\/en\/\">NPM<\/a>, the Node.js package manager.<\/p>\n<p>In <code>pages\/index.vue<\/code>, update <code>&lt;template&gt;<\/code> with the code below:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;main class=&quot;w-full max-w-4xl mx-auto px-5&quot;&gt;\n    &lt;nav class=&quot;py-5 text-center font-bold text-lg&quot;&gt;Nuxt Open Graph Demo&lt;\/nav&gt;\n    &lt;section class=&quot;overflow-hidden rounded-xl&quot;&gt;\n      &lt;img src=&quot;https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/v1648291772\/nuxt-open-graph-demo\/webANXPursuitOfHappynessA_azzusy.jpg&quot;\n        alt=&quot;The Pursuit of Happyness: cover image&quot; class=&quot;object-cover&quot;\n      \/&gt;\n    &lt;\/section&gt;\n    &lt;section class=&quot;py-5&quot;&gt;\n      &lt;div class=&quot;lg:flex justify-between items-center&quot;&gt;\n        &lt;h1 class=&quot;font-bold text-2xl lg:text-4xl my-1&quot;&gt;The Pursuit of Happyness&lt;\/h1&gt;\n        &lt;a href=&quot;https:\/\/www.imdb.com\/title\/tt0454921\/&quot;&gt;\n          &lt;button class=&quot;bg-yellow-400 font-black text-xl p-1 rounded shadow&quot;&gt;\n            &lt;p class=&quot;animate-pulse&quot;&gt;IMDb&lt;\/p&gt;\n          &lt;\/button&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;mt-5&quot;&gt;\n        &lt;h2 class=&quot;font-semibold text-lg&quot;&gt;Film Synopsis&lt;\/h2&gt;\n        &lt;p class=&quot;mt-2&quot;&gt;\n          Life is a struggle for single father Chris Gardner (Will Smith).\n          Evicted from their apartment, he and his young son (Jaden Christopher\n          Syre Smith) find themselves alone with no place to go. Even though\n          Chris eventually lands a job as an intern at a prestigious brokerage\n          firm, the position pays no money. The pair must live in shelters and\n          endure many hardships, but Chris refuses to give in to despair as he\n          struggles to create a better life for himself and his son.\n        &lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/section&gt;\n  &lt;\/main&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>In this code, you added some markup and styled it with TailwindCSS classes. Here\u2019s the result 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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648293868984_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"832\" height=\"625\"\/><\/p>\n<h2>Adding meta tags to your NuxtJS website<\/h2>\n<p>There are three ways to add meta tags to a NuxtJS project:<\/p>\n<ul>\n<li>Globally in your <code>nuxt.config.js<\/code> file.<\/li>\n<li>Locally by creating a <code>head<\/code> object in your <code>&lt;script&gt;<\/code> section.<\/li>\n<li>Locally by creating a <code>head()<\/code> function in your <code>&lt;script&gt;<\/code>. This method gives you access to <code>data()<\/code> and computed properties.<\/li>\n<\/ul>\n<p>In this project, you will use the third method. Navigate to <code>pag``es\/index.vue<\/code> and update <code>&lt;script&gt;<\/code> with a <code>head()<\/code> function as seen below:<\/p>\n<pre><code>&lt;script&gt;\nexport default {\n  name: 'IndexPage',\n  head() {\n    return {\n      title: 'The Pursuit of Happyness - Homepage',\n      meta: [\n        {\n          hid: 'og:title',\n          name: 'og:title',\n          content: 'The Pursuit of Happyness - Open Graph',\n        },\n        {\n          hid: 'og:type',\n          name: 'og:type',\n          content: 'website',\n        },\n        {\n          hid: 'og:image',\n          name: 'og:image',\n          content:\n            'https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/v1648291780\/nuxt-open-graph-demo\/1_Y8vXN1mJeEHyXWJtFICjiQ_gocqaf.jpg',\n        },\n        {\n          hid: 'og:description',\n          name: 'og:description',\n          content:\n            'A struggling salesman takes custody of his son as he is poised to begin a life-changing professional career.',\n        },\n      ],\n    }\n  },\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>In the code above, the <code>head()<\/code> function returns an object with two specified properties:<\/p>\n<ul>\n<li>\n<code>title<\/code> takes in the content to display on the <code>&lt;title&gt;<\/code> tag of your website\u2019s <code>&lt;head&gt;<\/code>.<\/li>\n<li>\n<code>meta<\/code> is an array of objects which will each create a <code>&lt;meta&gt;<\/code> tag with the content inside it.<\/li>\n<\/ul>\n<p>Right-click on your web page and click on \u201cView page source\u201d to view its code in your browser. In the <code>&lt;head&gt;<\/code> section, you will see the <code>&lt;meta&gt;<\/code> tags containing the <code>og:<\/code> properties and their 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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648302413994_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"857\" height=\"104\"\/><\/p>\n<h2>Deploying your code to Vercel<\/h2>\n<p>First, ensure that you have pushed your code to GitHub (or any other source control manager), then access your <a href=\"https:\/\/vercel.com\/dashboard\">Vercel dashboard<\/a> in your browser:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648298349879_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1083\" height=\"175\"\/><\/p>\n<p>Click on \u201cNew Project\u201d, and in the \u201cImport Git Repository\u201d section, search for your project and click on \u201cimport\u201d:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648298462020_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"444\" height=\"227\"\/><\/p>\n<p>In the \u201cConfigure Project\u201d section, click on \u201cBuild and Output Settings\u201d and toggle \u201cOverride\u201d:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648298588058_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"627\" height=\"498\"\/><\/p>\n<p>You toggled override because NuxtJS uses Vue2, and its build command is <code>nuxt generate<\/code> instead of <code>nuxt build<\/code>. Vercel has strict rules regarding build settings, and this override will help you avoid build errors.<\/p>\n<p>Scroll down and click \u201cDeploy\u201d to start the build process. You will see this message below after successfully deploying your Nuxt project.<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648301202517_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1198\" height=\"609\"\/><\/p>\n<p>Check your GitHub repo for a live URL created by Vercel:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648301302950_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"610\" height=\"285\"\/><\/p>\n<h2>Testing Open Graph previews<\/h2>\n<p>In your browser, navigate to <a href=\"https:\/\/www.opengraph.xyz\/\">opengraph.xyz<\/a> and paste the URL of your website to see its previews on different social media platforms:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648301716882_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"970\" height=\"476\"\/><\/p>\n<p>When you click on \u201cCheck Website\u201d, it will generate the previews based on the Open Graph tags you specified in your code:<\/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\/s_47DC2AC39436AF4FC23D6317A2F4781C1077D8D24A4F0816148A7C49E0CB0F65_1648302082932_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1351\" height=\"624\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, you learned how to improve your NuxtJS website\u2019s traffic by implementing and managing <a href=\"https:\/\/cloudinary.com\/glossary\/og-image\">Open Graph images<\/a>. To understand Open Graph and its importance in web development, check out the resources below.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/nuxtjs.org\/docs\/features\/meta-tags-seo\/\">Nuxt &#8211; Meta Tags and SEO<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/ahrefs.com\/blog\/open-graph-meta-tags\/\">Open Graph Meta Tags: Everything You Need to Know<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/meta\">The <code>&lt;meta&gt;<\/code> element | JavaScript MDN<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.freecodecamp.org\/news\/what-is-open-graph-and-how-can-i-use-it-for-my-website\/\">What is Open Graph<\/a><a href=\"https:\/\/www.freecodecamp.org\/news\/what-is-open-graph-and-how-can-i-use-it-for-my-website\/\">,<\/a> <a href=\"https:\/\/www.freecodecamp.org\/news\/what-is-open-graph-and-how-can-i-use-it-for-my-website\/\">and how can I use it for my website?<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27976,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[337,134,370,372,371,396,315],"class_list":["post-27975","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accessibility","tag-guest-post","tag-image","tag-nuxtjs","tag-under-review","tag-vercel","tag-vue"],"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>How to Add Open Graph Images in NuxtJS<\/title>\n<meta name=\"description\" content=\"Open Graph is an internet protocol created by Facebook that uses metadata in your code to enable your website to become a rich object on a social graph. This article explores how to manage Open Graph images on your NuxtJS website.\" \/>\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\/how-to-add-open-graph-images-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Open Graph Images in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Open Graph is an internet protocol created by Facebook that uses metadata in your code to enable your website to become a rich object on a social graph. This article explores how to manage Open Graph images on your NuxtJS website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-08T13:40:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-15T21:48:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"840\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/how-to-add-open-graph-images-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How to Add Open Graph Images in NuxtJS\",\"datePublished\":\"2022-04-08T13:40:57+00:00\",\"dateModified\":\"2025-06-15T21:48:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA\",\"keywords\":[\"Accessibility\",\"Guest Post\",\"Image\",\"NuxtJS\",\"Under Review\",\"Vercel\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/\",\"name\":\"How to Add Open Graph Images in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA\",\"datePublished\":\"2022-04-08T13:40:57+00:00\",\"dateModified\":\"2025-06-15T21:48:06+00:00\",\"description\":\"Open Graph is an internet protocol created by Facebook that uses metadata in your code to enable your website to become a rich object on a social graph. This article explores how to manage Open Graph images on your NuxtJS website.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA\",\"width\":1600,\"height\":840},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Open Graph Images in NuxtJS\"}]},{\"@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":"How to Add Open Graph Images in NuxtJS","description":"Open Graph is an internet protocol created by Facebook that uses metadata in your code to enable your website to become a rich object on a social graph. This article explores how to manage Open Graph images on your NuxtJS website.","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\/how-to-add-open-graph-images-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Open Graph Images in NuxtJS","og_description":"Open Graph is an internet protocol created by Facebook that uses metadata in your code to enable your website to become a rich object on a social graph. This article explores how to manage Open Graph images on your NuxtJS website.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-08T13:40:57+00:00","article_modified_time":"2025-06-15T21:48:06+00:00","og_image":[{"width":1600,"height":840,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"How to Add Open Graph Images in NuxtJS","datePublished":"2022-04-08T13:40:57+00:00","dateModified":"2025-06-15T21:48:06+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA","keywords":["Accessibility","Guest Post","Image","NuxtJS","Under Review","Vercel","Vue"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/","name":"How to Add Open Graph Images in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA","datePublished":"2022-04-08T13:40:57+00:00","dateModified":"2025-06-15T21:48:06+00:00","description":"Open Graph is an internet protocol created by Facebook that uses metadata in your code to enable your website to become a rich object on a social graph. This article explores how to manage Open Graph images on your NuxtJS website.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA","width":1600,"height":840},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-add-open-graph-images-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Open Graph Images in NuxtJS"}]},{"@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\/v1681925781\/Web_Assets\/blog\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44\/9400a7d03d870de2d8a4e4e86ff9288b87cf2479-1600x840-1_279764db44.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27975","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=27975"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27975\/revisions"}],"predecessor-version":[{"id":37780,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27975\/revisions\/37780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27976"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}