{"id":34876,"date":"2024-07-29T17:30:14","date_gmt":"2024-07-30T00:30:14","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=34876"},"modified":"2025-11-27T14:06:21","modified_gmt":"2025-11-27T22:06:21","slug":"generating-dynamic-social-og-images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images","title":{"rendered":"Generating Dynamic Social OG Images With Cloudinary"},"content":{"rendered":"\n<p>Dynamically generating Open Graph (OG) images for a web page involves creating custom images on the fly that are optimized for sharing on social media platforms. These images are generated based on the page&#8217;s content, ensuring each shared link has a visually appealing and relevant image.<\/p>\n\n\n\n<p>For example, an e-commerce site might generate OG images that include the product name, price, and a promotional banner for each product page. A blog post might create OG images that feature the title, author, and a snippet of the content.<\/p>\n\n\n\n<p>This approach is particularly useful for websites with frequently changing or <a href=\"https:\/\/cloudinary.com\/documentation\/user_generated_content\">user-generated content<\/a> (UGC), such as news sites, social media platforms, and online marketplaces. By dynamically generating OG images, these sites can ensure that every shared link is visually engaging and contextually appropriate.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Methods for Generating OG Images<\/h2>\n\n\n\n<p>Dynamically generating Open Graph (OG) images can be accomplished in a number of different ways. The methods range from plug-and-play to much more involved and complex options.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>SSR with a headless browser<\/strong>. A library for controlling a headless web browser can be used to generate screenshots of web pages or HTML templates, allowing for the dynamic generation of OG images based on a page&#8217;s content.<\/li>\n\n\n\n<li><strong>Image processing services<\/strong>. Services like Cloudinary offer powerful APIs for on-the-fly image manipulation. These services can dynamically generate OG images by overlaying text, graphics, and other elements onto base images.<\/li>\n\n\n\n<li><strong>Custom scripts<\/strong>. Developers can write custom scripts using libraries like Sharp (for image processing) and Canvas (for drawing graphics) to generate OG images. These scripts can be run server-side or as part of a build process.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">OG Images With Cloudinary<\/h2>\n\n\n\n<p>Cloudinary has a comprehensive feature set for image optimization and manipulation, making it a powerful and versatile tool for OG images.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dynamic image transformation<\/strong>. Cloudinary supports real-time<a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\"> image transformations<\/a>, including resizing, cropping, overlaying text, and adding graphical elements. This makes it easy to create custom OG images that are tailored to the content of each page.<\/li>\n\n\n\n<li><strong>URL-based API<\/strong>. Transformations can be applied via simple URL parameters, making integrating with existing web applications easy. Dynamic URLs can be generated that include all the necessary transformations.<\/li>\n\n\n\n<li><strong>Performance optimization<\/strong>.<a href=\"https:\/\/cloudinary.com\/documentation\/image_delivery_options\"> Images are optimized for performance,<\/a> ensuring that OG images load quickly and efficiently. This includes automatic format selection, compression, and caching.<\/li>\n\n\n\n<li><strong>Ease of integration<\/strong>.<a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_sdks\"> SDKs are available<\/a> for popular programming languages and frameworks, making it easy to integrate into existing workflows.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Base Images<\/h2>\n\n\n\n<p>We\u2019ll generate our OG images with Cloudinary by applying various transformations to a base image. To do this, we\u2019ll need the images we plan to use in our Cloudinary account. We can make our base images available in Cloudinary by uploading them to our account through our Cloudinary dashboard, or we can upload them using an SDK from an application.<\/p>\n\n\n\n<p>Referring to the e-commerce example where we overlay a product name and price over a product image, if the product images on our site are stored somewhere else, you\u2019ll probably need to write some application code that uploads a copy of the image to Cloudinary if it\u2019s not available there yet.<\/p>\n\n\n\n<p>Once we have a base image for a page available in Cloudinary, we won\u2019t need to create or upload additional images ourselves. Cloudinary will apply our transformations and cache the final <a href=\"https:\/\/cloudinary.com\/glossary\/og-image\">OG image<\/a> on their CDN.<\/p>\n\n\n\n<p>During development, once we have a handle to the URL of our base image, we can dynamically apply our transformations via URL parameters until we land on something we\u2019re happy with.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/camera.jpg\" alt=\"photo of man with a camera\"\/><\/figure><\/div>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/camera.jpg<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We can add some parameters to get a cropped version of it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_fill,h_250,w_250\/docs\/camera.jpg\" alt=\"photo of man holding a camera cropped\"\/><\/figure><\/div>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/demo\/image\/upload\/c_fill,h_250,w_250\/docs\/camera.jpg<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Resizing and Cropping<\/h2>\n\n\n\n<p>Depending on the content type and platform that a specific image is targeting, there will be different requirements\/recommendations regarding image dimensions. Unless we already have some base images that are optimized for all of our targets,<a href=\"https:\/\/cloudinary.com\/documentation\/resizing_and_cropping\"> resizing and cropping transformations<\/a> will be important to generate optimized OG images.<\/p>\n\n\n\n<p>It will be helpful if your base images are similar enough that you can reliably apply the same resize\/crop transformations and get a result that looks good.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Layering<\/h2>\n\n\n\n<p>After resizing\/cropping a base image, we will probably need to apply some<a href=\"https:\/\/cloudinary.com\/documentation\/layers\"> additional layers<\/a> to add the desired content to our final images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text Overlays<\/h3>\n\n\n\n<p>The most common layer we will probably want to add to our OG images is text. When overlaying text we can specify a font family, font size, text content, positioning, and other css-like styling attributes.<\/p>\n\n\n\n<p>Back to our e-commerce example, we would add two text layers to our base image &#8211; one for the title and one for the price. If we were generating images for blog posts, we might have two text layers for the title and author.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Image Overlays<\/h3>\n\n\n\n<p>Cloudinary also gives us the power to overlay other images on top of our base image. This could be useful if we want to add our company logo to our OG images or add some sort of watermark.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Generating OG Images for Blog Posts<\/h2>\n\n\n\n<p>Now that we have a good idea of how to generate OG images, let\u2019s apply it to a common example use case: blog posts. If you spend a lot of time writing blog posts, you likely want to share it on social media. If the website is set up properly with OG tags and we generate high-quality images for our posts, they\u2019ll get more attention on social media platforms.<\/p>\n\n\n\n<p>Let\u2019s imagine that our blog features recipes and we have a featured image for each post. Our featured images are the same dimensions and quality so we have confidence we can apply the same operations to generate consistent OG images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Working Out Our Transformations<\/h3>\n\n\n\n<p>We have a base image for our post:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764281082\/blog-Generating_Dynamic_Social_OG_Images_With_Cloudinary-1.jpg\" alt=\"a delicious breakfast spread\"\/><\/figure>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/dtkji4khh\/image\/upload\/cld-sample-4.jpg<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">Resize and Crop<\/h4>\n\n\n\n<p>Our base images are 1870&#215;1250. For our Twitter OG images, we want a size of 1200&#215;630.<\/p>\n\n\n\n<p>Here are our resize and crop transformations: <code>c_fill,w_1200,h_630<\/code>. This transformation resizes the image to fill the specified dimensions without distortion.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Post Title Text Layer<\/h4>\n\n\n\n<p>Next, we want to add the post title to the bottom right side of the image. We want to make sure that the text is legible no matter what the background of the image is, so we\u2019ll also add a solid background color behind the text.<\/p>\n\n\n\n<p>Here are our post title layer transformations:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">\/l_text:Arial_50_bold:Delicious%20Breakfast%20Recipe,co_rgb:ffffff,g_south_east,x_20,y_20,b_rgb:00CC00<\/code><\/span><\/pre>\n\n\n<p>The transformations add the text &#8220;Delicious Breakfast Recipe&#8221; in 50-point bold Arial font, colored white (<code>co_rgb:ffffff<\/code>), positioned at the bottom right (<code>g_south_east<\/code>) with an offset of 20 pixels horizontally (<code>x_20<\/code>) and 20 pixels vertically (<code>y_20<\/code>), and a green background (<code>b_rgb:00CC00<\/code>).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Author Text Layer<\/h4>\n\n\n\n<p>The author text is similar to the post title, but we want to position it slightly above it.<\/p>\n\n\n\n<p>Here are the author name layer transformations: <\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">\/l_text:Arial_40_bold:Dane%20Grant,co_rgb:ffffff,g_south_east,x_20,y_80,b_rgb:000000<\/code><\/span><\/pre>\n\n\n<p>The transformations add the text &#8220;Dane Grant&#8221; in 40-point bold Arial font, colored white (<code>co_rgb:ffffff<\/code>), positioned at the bottom right (<code>g_south_east<\/code>) with an offset of 20 pixels horizontally (<code>x_20<\/code>) and 80 pixels vertically (<code>y_80<\/code>), and a black background (<code>b_rgb:000000<\/code>).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Our Dynamic Twitter OG Image<\/h4>\n\n\n\n<p>After applying all of the transformations to our base image, here\u2019s our final result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764281084\/blog-Generating_Dynamic_Social_OG_Images_With_Cloudinary-2.jpg\" alt=\"A delicious breakfast spread with an author name and title overlayed\"\/><\/figure>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/dtkji4khh\/image\/upload\/c_fill,w_1200,h_630\/l_text:Arial_40_bold:Dane Grant,co_rgb:ffffff,g_south_east,x_20,y_80,b_rgb:000000\/l_text:Arial_50_bold:Delicious Breakfast Recipe,co_rgb:ffffff,g_south_east,x_20,y_20,b_rgb:00CC00\/cld-sample-4.jpg<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Applying Transformations<\/h3>\n\n\n\n<p>Now that we have our base images available and have selected our transformations, we can apply this to our post page template with code. For example, we\u2019ll imagine the page is rendered in a React component.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> Post = <span class=\"hljs-function\">(<span class=\"hljs-params\">{ imageName, title, description, content }<\/span>) =&gt;<\/span> {\n  <span class=\"hljs-keyword\">const<\/span> ogImageUrl = <span class=\"hljs-string\">`https:\/\/res.cloudinary.com\/dtkji4khh\/image\/upload\/c_fill,w_1200,h_630\/l_text:Arial_40_bold:Dane%20Grant,co_rgb:ffffff,g_south_east,x_20,y_80,b_rgb:000000\/l_text:Arial_50_bold:Delicious%20Breakfast%20Recipe,co_rgb:ffffff,g_south_east,x_20,y_20,b_rgb:00CC00\/<span class=\"hljs-subst\">${imageName}<\/span>.jpg`<\/span>;\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/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:title\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">{title}<\/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\">{description}<\/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\">{ogImageUrl}<\/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:width\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"1200\"<\/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:height\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"630\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{description}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{ogImageUrl}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{title}<\/span> \/&gt;<\/span>\n        {content}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If you\u2019re using the Cloudinary JavaScript SDK, you can replace line 4 with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> cloudinary = <span class=\"hljs-keyword\">new<\/span> Cloudinary({ <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'dtkji4khh'<\/span>, <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span> });\n<span class=\"hljs-keyword\">const<\/span> ogImageUrl = cloudinary.url(imageName, {\n    <span class=\"hljs-attr\">transformation<\/span>: &#91;\n      { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">1200<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">630<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">'fill'<\/span> },\n      { <span class=\"hljs-attr\">overlay<\/span>: { <span class=\"hljs-attr\">font_family<\/span>: <span class=\"hljs-string\">'Arial'<\/span>, <span class=\"hljs-attr\">font_size<\/span>: <span class=\"hljs-number\">40<\/span>, <span class=\"hljs-attr\">font_weight<\/span>: <span class=\"hljs-string\">'bold'<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Dane Grant'<\/span> }, <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">'south_east'<\/span>, <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">20<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">80<\/span>, <span class=\"hljs-attr\">background<\/span>: <span class=\"hljs-string\">'#000000'<\/span> },\n      { <span class=\"hljs-attr\">overlay<\/span>: { <span class=\"hljs-attr\">font_family<\/span>: <span class=\"hljs-string\">'Arial'<\/span>, <span class=\"hljs-attr\">font_size<\/span>: <span class=\"hljs-number\">50<\/span>, <span class=\"hljs-attr\">font_weight<\/span>: <span class=\"hljs-string\">'bold'<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'Delicious Breakfast Recipe'<\/span> }, <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">'south_east'<\/span>, <span class=\"hljs-attr\">x<\/span>: <span class=\"hljs-number\">20<\/span>, <span class=\"hljs-attr\">y<\/span>: <span class=\"hljs-number\">20<\/span>, <span class=\"hljs-attr\">background<\/span>: <span class=\"hljs-string\">'#00CC00'<\/span> }\n    ]\n  });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Every base image with our OG transformations applied gets cached on Cloudinary\u2019s CDN.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>OG images can help our content stand out on social media platforms. With base images for our content and some easy-to-use transformations, we can dynamically generate custom OG images. These transformations can be applied via some easy-to-use configuration in Cloudinary\u2019s SDKs or with some parameters added to the image URL.<\/p>\n\n\n\n<p>We\u2019ve only scratched the surface of <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">Cloudinary\u2019s dynamic image transformations<\/a>. Check out the documentation to find other ways you can add some extra flair to your social images, and for more on how Cloudinary can help you create stunning visual experiences, <a href=\"https:\/\/cloudinary.com\/\">sign up for free today<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dynamically generating Open Graph (OG) images for a web page involves creating custom images on the fly that are optimized for sharing on social media platforms. These images are generated based on the page&#8217;s content, ensuring each shared link has a visually appealing and relevant image. For example, an e-commerce site might generate OG images [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":34878,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165],"class_list":["post-34876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation"],"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>Image Uploading With Cloudinary API and Next.js<\/title>\n<meta name=\"description\" content=\"Streamline image uploading in your web application using Cloudinary API and Next.js. This tutorial covers backend and frontend integration, building a simple avatar image uploader component, and leveraging Cloudinary&#039;s features for optimizing and securing images.\" \/>\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\/generating-dynamic-social-og-images\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generating Dynamic Social OG Images With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Streamline image uploading in your web application using Cloudinary API and Next.js. This tutorial covers backend and frontend integration, building a simple avatar image uploader component, and leveraging Cloudinary&#039;s features for optimizing and securing images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-30T00:30:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-27T22:06:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/generating-dynamic-social-og-images#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Generating Dynamic Social OG Images With Cloudinary\",\"datePublished\":\"2024-07-30T00:30:14+00:00\",\"dateModified\":\"2025-11-27T22:06:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images\"},\"wordCount\":1336,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA\",\"keywords\":[\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images\",\"url\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images\",\"name\":\"Image Uploading With Cloudinary API and Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA\",\"datePublished\":\"2024-07-30T00:30:14+00:00\",\"dateModified\":\"2025-11-27T22:06:21+00:00\",\"description\":\"Streamline image uploading in your web application using Cloudinary API and Next.js. This tutorial covers backend and frontend integration, building a simple avatar image uploader component, and leveraging Cloudinary's features for optimizing and securing images.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generating Dynamic Social OG Images With Cloudinary\"}]},{\"@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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Image Uploading With Cloudinary API and Next.js","description":"Streamline image uploading in your web application using Cloudinary API and Next.js. This tutorial covers backend and frontend integration, building a simple avatar image uploader component, and leveraging Cloudinary's features for optimizing and securing images.","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\/generating-dynamic-social-og-images","og_locale":"en_US","og_type":"article","og_title":"Generating Dynamic Social OG Images With Cloudinary","og_description":"Streamline image uploading in your web application using Cloudinary API and Next.js. This tutorial covers backend and frontend integration, building a simple avatar image uploader component, and leveraging Cloudinary's features for optimizing and securing images.","og_url":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images","og_site_name":"Cloudinary Blog","article_published_time":"2024-07-30T00:30:14+00:00","article_modified_time":"2025-11-27T22:06:21+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Generating Dynamic Social OG Images With Cloudinary","datePublished":"2024-07-30T00:30:14+00:00","dateModified":"2025-11-27T22:06:21+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images"},"wordCount":1336,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA","keywords":["Image Transformation"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images","url":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images","name":"Image Uploading With Cloudinary API and Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA","datePublished":"2024-07-30T00:30:14+00:00","dateModified":"2025-11-27T22:06:21+00:00","description":"Streamline image uploading in your web application using Cloudinary API and Next.js. This tutorial covers backend and frontend integration, building a simple avatar image uploader component, and leveraging Cloudinary's features for optimizing and securing images.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/generating-dynamic-social-og-images#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Generating Dynamic Social OG Images With Cloudinary"}]},{"@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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1722033381\/og_images-blog\/og_images-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/34876","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=34876"}],"version-history":[{"count":6,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/34876\/revisions"}],"predecessor-version":[{"id":39498,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/34876\/revisions\/39498"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/34878"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=34876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=34876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=34876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}