{"id":28217,"date":"2022-07-12T07:40:36","date_gmt":"2022-07-12T07:40:36","guid":{"rendered":"http:\/\/manage-open-graph-images-in-remix"},"modified":"2025-03-02T10:07:51","modified_gmt":"2025-03-02T18:07:51","slug":"manage-open-graph-images-in-remix","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/","title":{"rendered":"Manage Open Graph Images in Remix"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>The <a href=\"https:\/\/ogp.me\/\">Open<\/a> <a href=\"https:\/\/ogp.me\/\">G<\/a><a href=\"https:\/\/ogp.me\/\">raph Protocol<\/a> <a href=\"https:\/\/ogp.me\/\"><\/a><a href=\"https:\/\/ogp.me\/\">(OGP)<\/a> makes sure that website content shared on social media platforms stands out by displaying the most basic and necessary information to convince people to click the link or view the content shared. Open Graph images utilize metadata from websites to display the webpage content, where the site\u2019s URL is shared.<\/p>\n<p>For example, a link shared on Twitter displays an image, URL, title, and a short description.<\/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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656016970844_Screenshot+from+2022-06-23+23-42-26.png\" alt=\"Example of an Open Graph image in use in a Twitter Card\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"602\" height=\"421\"\/><\/p>\n<p><a href=\"https:\/\/remix.run\/\">Remix<\/a> is a JavaScript web framework that lets developers create full-stack applications.<\/p>\n<p>This post covers the steps of creating and managing Open Graph images in a Remix application.<\/p>\n<h1>Prerequisites<\/h1>\n<p>To follow along with this post, ensure that you have the following installed on your computer:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/nodejs.org\/\">Node.js<\/a> 14 or greater.<\/li>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/\">npm<\/a> v7 or greater.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> account (Create a free Cloudinary account <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">h<\/a><a href=\"https:\/\/cloudinary.com\/users\/register\/free\">ere<\/a>).<\/li>\n<\/ul>\n<h2>Demo and Source Code:<\/h2>\n<p>The complete demo for this article is on <a href=\"https:\/\/codesandbox.io\/s\/open-graph-images-remix-0jx4mx?file=\/app\/routes\/index.jsx\">CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/open-graph-images-remix?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 Remix\"\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  <div class=\"wp-block-cloudinary-markdown \"><p>The source code is also available on GitHub:<\/p>\n<p><a href=\"https:\/\/github.com\/achingachris\/open-graph-images\">https:\/\/github.com\/achingachris\/open-graph-images<\/a><\/p>\n<h1>Creating a Remix application<\/h1>\n<p>To create a new Remix application, run the following command:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npx create-remix open-graph-images\n<\/code><\/pre>\n<p>Once the setup is complete, run the project to test for a successful setup using the script:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npm run dev\n<\/code><\/pre>\n<p>***Note that Remix server runs on port 3000 on localhost: <a href=\"http:\/\/localhost:3000\/***\">http:\/\/localhost:3000\/***<\/a>.<\/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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656026733309_Screenshot+from+2022-06-24+02-25-20-1.png\" alt=\"Default Remix page after setup\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"741\"\/><\/p>\n<h1>Using Open Graph images<\/h1>\n<p>A website URL must be equipped with Open Graph protocols to become a rich object; that is, to display images and brief descriptions when shared on supported social media platforms. This is achievable by adding extra <code>&lt;meta&gt;<\/code> tags inside the <code>&lt;head&gt;<\/code> element of your website.<\/p>\n<p>Open Graph has four required properties:<\/p>\n<ul>\n<li>\n<code>og:title<\/code> <strong>\u2013<\/strong> The page title, e.g., \u201cHackmamba, The Great Blog.\u201d<\/li>\n<li>\n<code>og:type<\/code> <strong>\u2013<\/strong> The type of content on the page. For example, music, video, or just textual content.<\/li>\n<li>\n<code>og:image<\/code> <strong>\u2013<\/strong> The path to the image to display within the graph.<\/li>\n<li>\n<code>og:url<\/code> <strong>\u2013<\/strong> The canonical URL of your website page.<\/li>\n<\/ul>\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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656027993828_Blank+diagram.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1040\" height=\"501\"\/><\/p>\n<p>An example of using Open Graph is shown below:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;meta property=&quot;og:title&quot; content=&quot;Hackmamba, The Great Blog&quot; \/&gt;\n    &lt;meta property=&quot;og:type&quot; content=&quot;website&quot; \/&gt;\n    &lt;meta property=&quot;og:description&quot; content=&quot;Focus on building your product while our team of creators, product managers, and developer advocates create and deliver the right content for you&quot; \/&gt;\n    &lt;meta property=&quot;og:image&quot; content=&quot;cloudinary-image-url&quot; \/&gt;\n    &lt;meta property=&quot;og:url&quot; content=&quot;https:\/\/hackmamba.io\/&quot; \/&gt;\n<\/code><\/pre>\n<p>To obtain your image URL, log into your Cloudinary account and head to the <a href=\"https:\/\/cloudinary.com\/console\/media_library\/folders\/home\">Media Library<\/a> to upload an image. Once it has uploaded, hover on the newly added image and click on the link icon to copy the image URL:<\/p>\n<pre><code>`https:\/\/res.cloudinary.com\/chris101\/image\/upload\/v1656028653\/Screenshot_from_2022-06-24_02-57-13_onpbiw.png`\n<\/code><\/pre>\n<h1>Adding Open Graph tags in Remix<\/h1>\n<p>To add the Open Graph meta tags, you will be editing the <code>app\/root.tsx<\/code> file. Remix has default meta tags defined:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>export const meta: MetaFunction = () =&gt; ({\n      charset: &quot;utf-8&quot;,\n      title: &quot;New Remix App&quot;,\n      viewport: &quot;width=device-width,initial-scale=1&quot;,\n    });\n<\/code><\/pre>\n<p>Next, update <code>MetaFunction<\/code> to accommodate the Open Graph tags.<\/p>\n<pre class=\"js-syntax-highlighted\"><code> export const meta: MetaFunction = () =&gt; ({\n      charset: 'utf-8',\n      'og:image':\n        'https:\/\/res.cloudinary.com\/chris101\/image\/upload\/v1656028653\/Screenshot_from_2022-06-24_02-57-13_onpbiw.png',\n      'og:title': 'Hackmamba, The Great Blog',\n      'og:description':\n        'Focus on building your product while our team of creators, product managers, and developer advocates create and deliver the right content for you',\n      title: 'Hackmamba, The Great Blog',\n      description:\n        'Focus on building your product while our team of creators, product managers, and developer advocates create and deliver the right content for you',\n      viewport: 'width=device-width,initial-scale=1',\n    })\n<\/code><\/pre>\n<h2>Explanation:<\/h2>\n<p>The <code>&lt;meta \/&gt;<\/code> tag normally takes <code>name<\/code> and <code>content<\/code> attributes. Open Graph takes <code>property<\/code> attribute instead of <code>name<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;meta property=&quot;og:title&quot; content=&quot;Hackmamba, The Great Blog&quot; \/&gt;\n<\/code><\/pre>\n<p>In Remix, it\u2019s represented as follows:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>'og:title': 'Hackmamba, The Great Blog',\n<\/code><\/pre>\n<h1>Testing the Open Graph images on social media<\/h1>\n<p>To test the Open Graph, you need to deploy your Remix application. You can deploy your site on Vercel using the following steps:<\/p>\n<ul>\n<li>Push your project to GitHub.<\/li>\n<li>Log into <a href=\"https:\/\/vercel.com\/\">Vercel<\/a>.<\/li>\n<li>On the dashboard, click on <code>+ New Project<\/code>  on the top right:<\/li>\n<\/ul>\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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656243770815_Screenshot+from+2022-06-26+14-41-04.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"193\"\/><\/p>\n<p>In the <strong>Import Git Repository<\/strong> panel, select the repository you just created:<\/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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656244179438_Screenshot+from+2022-06-26+14-48-46.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1180\" height=\"481\"\/><\/p>\n<p>Once the project is deployed, you can get the URL: so, the URL of your demo is:<\/p>\n<p><code>https:\/\/open-graph-images-three.vercel.app\/<\/code><\/p>\n<p>To test it on Facebook, you will use the following site:<\/p>\n<p><a href=\"https:\/\/developers.facebook.com\/tools\/debug\">https:\/\/developers.facebook.com\/tools\/debug<\/a><\/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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656244721249_Screenshot+from+2022-06-26+14-58-09.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1348\" height=\"634\"\/><\/p>\n<p>Paste the demo URL and click on the <code>Debug<\/code> button, then scroll down to view the results:<\/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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656244931499_Screenshot+from+2022-06-26+15-01-59.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1348\" height=\"634\"\/><\/p>\n<p>A display preview of how the link preview would look when shared on Facebook is shown.<\/p>\n<p>To test on Twitter, use the following site:<\/p>\n<p><a href=\"https:\/\/cards-dev.twitter.com\/validator\">https:\/\/cards-dev.twitter.com\/validator<\/a><\/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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656245183186_Screenshot+from+2022-06-26+15-06-15.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1348\" height=\"634\"\/><\/p>\n<p>Paste the demo URL and click on <strong>Preview Card<\/strong>:<\/p>\n<p>Similar to the Facebook test, on Twitter, a preview link of how the link display would look is shown:<\/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_2DA4A3CCFBD3EA221F580570FA39E4A7CBF88473D1A7C6BA2C2F198947340055_1656245278683_Screenshot+from+2022-06-26+15-07-06.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1348\" height=\"634\"\/><\/p>\n<h1>Conclusion<\/h1>\n<p>This post covered the steps to creating and managing Open Graph images in Remix. It shows how to enable a preview display when sharing your Remix Application link through social media platforms.<\/p>\n<h1>Resources<\/h1>\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 Card Debugger<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/ogp.me\/\">Open Graph Documentation<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28218,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[381,134,371],"class_list":["post-28217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-imagecdn","tag-guest-post","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 Remix<\/title>\n<meta name=\"description\" content=\"Open Graph images utilize metadata from websites to display the webpage content, where the site&#039;s URL is shared.\" \/>\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-remix\/\" \/>\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 Remix\" \/>\n<meta property=\"og:description\" content=\"Open Graph images utilize metadata from websites to display the webpage content, where the site&#039;s URL is shared.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-12T07:40:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-02T18:07:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"651\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\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\/manage-open-graph-images-in-remix\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Manage Open Graph Images in Remix\",\"datePublished\":\"2022-07-12T07:40:36+00:00\",\"dateModified\":\"2025-03-02T18:07:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA\",\"keywords\":[\"(Image)CDN\",\"Guest Post\",\"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-remix\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/\",\"name\":\"Manage Open Graph Images in Remix\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA\",\"datePublished\":\"2022-07-12T07:40:36+00:00\",\"dateModified\":\"2025-03-02T18:07:51+00:00\",\"description\":\"Open Graph images utilize metadata from websites to display the webpage content, where the site's URL is shared.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA\",\"width\":651,\"height\":350},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Manage Open Graph Images in Remix\"}]},{\"@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 Remix","description":"Open Graph images utilize metadata from websites to display the webpage content, where the site's URL is shared.","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-remix\/","og_locale":"en_US","og_type":"article","og_title":"Manage Open Graph Images in Remix","og_description":"Open Graph images utilize metadata from websites to display the webpage content, where the site's URL is shared.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-12T07:40:36+00:00","article_modified_time":"2025-03-02T18:07:51+00:00","og_image":[{"width":651,"height":350,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337-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\/manage-open-graph-images-in-remix\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/"},"author":{"name":"","@id":""},"headline":"Manage Open Graph Images in Remix","datePublished":"2022-07-12T07:40:36+00:00","dateModified":"2025-03-02T18:07:51+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA","keywords":["(Image)CDN","Guest Post","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-remix\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/","name":"Manage Open Graph Images in Remix","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA","datePublished":"2022-07-12T07:40:36+00:00","dateModified":"2025-03-02T18:07:51+00:00","description":"Open Graph images utilize metadata from websites to display the webpage content, where the site's URL is shared.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA","width":651,"height":350},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-open-graph-images-in-remix\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Manage Open Graph Images in Remix"}]},{"@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\/v1681925093\/Web_Assets\/blog\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337\/17a2831c09ffa90c3e3102ac457b67e2981c8398-651x350-1_2821834337.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28217","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=28217"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28217\/revisions"}],"predecessor-version":[{"id":37084,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28217\/revisions\/37084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28218"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}