{"id":39701,"date":"2026-01-20T07:00:00","date_gmt":"2026-01-20T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39701"},"modified":"2026-01-21T10:28:27","modified_gmt":"2026-01-21T18:28:27","slug":"visual-cards-url2png-website-screenshots-add-on-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js","title":{"rendered":"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Plain text links are a relic of the early web. In today\u2019s social feeds and rich documentation, a naked URL is easy to ignore. You need a visual hook.<\/p>\n<p>This project transforms boring links into high-fidelity preview cards. Using the <a href=\"https:\/\/cloudinary.com\/documentation\/url2png_website_screenshots_addon\">Cloudinary URL2PNG add-on<\/a>, we\u2019ll build a system that captures live website viewports and promotes them to permanent, optimized assets in a community gallery.<\/p>\n<h2>What We\u2019re Building<\/h2>\n<ul>\n<li>\n<strong>Instant screenshot generation.<\/strong> Automated viewport capture of any public URL.<\/li>\n<li>\n<strong>Persistent asset gallery.<\/strong> A system to \u201cpromote\u201d dynamic previews into permanent cloud storage.<\/li>\n<li>\n<strong>Optimized delivery.<\/strong> Automatic format and quality switching for fast-loading cards.<\/li>\n<li>\n<strong>Modern Next.js 16 UI.<\/strong> A polished interface using Shadcn UI and creative loading states.<\/li>\n<\/ul>\n<p>This setup is perfect for link-sharing platforms, automated portfolio galleries, or enhancing internal documentation tools.<\/p>\n<ul>\n<li>\n<strong>Live demo:<\/strong> <a href=\"https:\/\/link-to-card.vercel.app\/\">https:\/\/link-to-card.vercel.app\/<\/a>\n<\/li>\n<li>\n<strong>GitHub repo:<\/strong> <a href=\"https:\/\/github.com\/musebe\/link-to-card\">https:\/\/github.com\/musebe\/link-to-card<\/a>\n<\/li>\n<\/ul>\n<h2>Project Overview<\/h2>\n<p>The architecture relies on three integrated pillars:<\/p>\n<ol>\n<li>\n<strong>Next.js 16 for the Logic Layer.<\/strong> Leveraging the latest App Router features, we use Server Actions to securely generate signed URLs. This ensures our API secrets never reach the browser while providing a seamless user experience.<\/li>\n<li>\n<strong>Cloudinary URL2PNG for the capture engine.<\/strong> Cloudinary visits the URL, renders the page, and delivers the screenshot via CDN.<\/li>\n<li>\n<strong>Cloudinary Search API for Persistence.<\/strong> Once a screenshot is generated, we promote it from a temporary URL to a permanent asset in a specific Cloudinary folder. We then use the Search API to build a dynamic, high-performance gallery.<\/li>\n<\/ol>\n<h2>Start With Next.js and Cloudinary<\/h2>\n<p>Before automating screenshots, we need a stable base: a fresh Next.js environment and a correctly configured Cloudinary account.<\/p>\n<p>The goal for this section is:<\/p>\n<ul>\n<li>A new Next.js 16 project initialized.<\/li>\n<li>\n<code>shadcn<\/code> components ready for the UI.<\/li>\n<li>URL2PNG add-on activated in the Cloudinary Marketplace.<\/li>\n<\/ul>\n<h3>Create the Next.js App<\/h3>\n<p>Start with a standard App Router setup using the latest Next.js features.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">create-next-app<\/span><span class=\"hljs-keyword\">@latest<\/span> link-to-card\ncd link-to-card\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>Choose:<\/strong><\/p>\n<ul>\n<li>TypeScript: <strong>Yes<\/strong>\n<\/li>\n<li>Tailwind CSS: <strong>Yes<\/strong>\n<\/li>\n<li>App Router: <strong>Yes<\/strong>\n<\/li>\n<\/ul>\n<h3>Add <code>shadcn<\/code> for UI<\/h3>\n<p>We\u2019ll use <strong>shadcn<\/strong> for a professional look and feel without writing custom CSS from scratch.<\/p>\n<p>Initialize the CLI:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">shadcn<\/span><span class=\"hljs-keyword\">@latest<\/span> init\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then add the core components for our generator:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">shadcn<\/span><span class=\"hljs-keyword\">@latest<\/span> add card button input select\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Activate the URL2PNG Add-on<\/h3>\n<p>This is the \u201cmagic\u201d step. You must enable the screenshot engine within your Cloudinary account.<\/p>\n<ol>\n<li>Log in to your <a href=\"https:\/\/console.cloudinary.com\/\">Cloudinary Console<\/a>.<\/li>\n<li>Click the <strong>Add-ons<\/strong> (puzzle icon) in the left sidebar.<\/li>\n<li>Locate <strong>URL2PNG Website Screenshots<\/strong>.<\/li>\n<li>Click <strong>Install<\/strong>, select the <strong>Free plan<\/strong>, and agree to the terms.<\/li>\n<\/ol>\n<h2>Wire Cloudinary via Environment Values<\/h2>\n<p>Next, securely connect your Next.js app to your Cloudinary product environment.<\/p>\n<p>Your <code>.env.local<\/code> file stores your credentials. Go to <strong>Settings &gt; API Keys<\/strong> in Cloudinary to find these.<\/p>\n<p>Create <code>.env.local<\/code> in your root folder:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>CLOUDINARY_CLOUD_NAME=your_cloud_name\nCLOUDINARY_API_KEY=your_api_key\nCLOUDINARY_API_SECRET=your_api_secret\n<\/code><\/pre>\n<h2>Centralize the Cloudinary Config<\/h2>\n<p>To prevent \u201cMust supply cloud_name\u201d errors across different Server Components and Actions, we use a singleton pattern.<\/p>\n<p>In <a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/lib\/cloudinary.ts\"><code>lib\/cloudinary.ts<\/code><\/a>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" 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> { v2 <span class=\"hljs-keyword\">as<\/span> cloudinary } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"cloudinary\"<\/span>;\n\ncloudinary.config({\n  <span class=\"hljs-attr\">cloud_name<\/span>: process.env.CLOUDINARY_CLOUD_NAME,\n  <span class=\"hljs-attr\">api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n  <span class=\"hljs-attr\">api_secret<\/span>: process.env.CLOUDINARY_API_SECRET,\n  <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>,\n});\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> cloudinary;\n<\/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<h2>Building the Capture Logic<\/h2>\n<p>With our environment ready, we can implement the core logic. Capturing a website viewport requires a <strong>Signed URL<\/strong> for security.<\/p>\n<h3>The Capture Action<\/h3>\n<p>In <a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/app\/actions.ts\"><code>app\/actions.ts<\/code><\/a>, we create a function that builds a dynamic URL using the <code>url2png<\/code> delivery type. :<\/p>\n<pre class=\"js-syntax-highlighted\" 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-string\">\"use server\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> cloudinary <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@\/lib\/cloudinary\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">generateScreenshot<\/span>(<span class=\"hljs-params\">websiteUrl: string<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">if<\/span> (!websiteUrl) <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">null<\/span>;\n\n  <span class=\"hljs-keyword\">return<\/span> cloudinary.url(websiteUrl, {\n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"url2png\"<\/span>,\n    <span class=\"hljs-attr\">sign_url<\/span>: <span class=\"hljs-literal\">true<\/span>,\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>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"north\"<\/span> },\n      { <span class=\"hljs-attr\">quality<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>, <span class=\"hljs-attr\">fetch_format<\/span>: <span class=\"hljs-string\">\"auto\"<\/span> },\n    ],\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<h3>Promoting to Permanent Storage<\/h3>\n<p>Dynamic screenshots are generated on the fly. To save them for a community gallery, we must upload the result to our Media Library.<\/p>\n<p>Add this in <a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/app\/actions.ts\"><code>app\/actions.ts<\/code><\/a>:<\/p>\n<pre class=\"js-syntax-highlighted\" 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\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveToGallery<\/span>(<span class=\"hljs-params\">imageUrl: string<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">await<\/span> cloudinary.uploader.upload(imageUrl, {\n    <span class=\"hljs-attr\">folder<\/span>: <span class=\"hljs-string\">\"snapcard_gallery\"<\/span>,\n    <span class=\"hljs-attr\">tags<\/span>: &#91;<span class=\"hljs-string\">\"link-card\"<\/span>],\n    <span class=\"hljs-attr\">timeout<\/span>: <span class=\"hljs-number\">60000<\/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<h2>Handling the User Experience<\/h2>\n<p>Capturing a live website is heavy work. The browser must navigate, load assets, and render the viewport. This takes time, so a creative loading state is essential.<\/p>\n<h3>The Loading State Component<\/h3>\n<p>In <a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/components\/Loader.tsx\"><code>components\/Loader.tsx<\/code><\/a>, we combine <strong>Lucide<\/strong> icons with Tailwind animations to give the user visual feedback.:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" 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> { Loader2, Sparkles, Camera } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"lucide-react\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">LoadingState<\/span>(<span class=\"hljs-params\">{ message }: { message: string }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"flex flex-col items-center justify-center p-12 border-2 border-dashed rounded-3xl bg-slate-50\/50 animate-in fade-in zoom-in\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"relative\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Camera<\/span>\n          <span class=\"hljs-attr\">size<\/span>=<span class=\"hljs-string\">{32}<\/span>\n          <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"bg-primary text-primary-foreground p-2 rounded-full animate-pulse\"<\/span>\n        \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Loader2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"absolute -inset-2 h-full w-full animate-spin text-primary\/30\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-4 font-semibold text-slate-700\"<\/span>&gt;<\/span>{message}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/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-7\"><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<blockquote>\n<p>Full logic: Check how the Home Page manages these states in the <a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/app\/page.tsx\">GitHub Repo<\/a>.<\/p>\n<\/blockquote>\n<h2>Assembling the Home Page<\/h2>\n<p>The home page (<a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/app\/page.tsx\"><code>app\/page.tsx<\/code><\/a>) acts as the orchestrator for the entire application. It is a <strong>Client Component<\/strong> because it needs to manage interactive state, such as the URL input and the loading sequences required for capturing and saving images.<\/p>\n<h3>The Core Orchestration Logic<\/h3>\n<p>Instead of building a massive single file, we integrate specialized components <code>Input<\/code>, <code>Button<\/code>, <code>PreviewCard<\/code>, and <code>LoadingState<\/code>. The main logic revolves around two primary workflows: <strong>Generating<\/strong> the screenshot and <strong>Saving<\/strong> it to the gallery.<\/p>\n<h3>Generate the Screenshot<\/h3>\n<p>The first workflow captures a live website viewport. This process uses a <strong>Server Action<\/strong> to safely generate a <strong>signed URL<\/strong> using Cloudinary\u2019s <code>url2png<\/code> delivery type.<\/p>\n<p><strong>Core Logic:<\/strong><\/p>\n<ul>\n<li>\n<strong>Trigger.<\/strong> User clicks \u201cGenerate\u201d.<\/li>\n<li>\n<strong>State.<\/strong> Set <code>loading<\/code> to true and clear any existing screenshot.<\/li>\n<li>\n<strong>Action.<\/strong> Call <code>generateScreenshot(url)<\/code>. This backend function signs the request to ensure only authorized captures are billed to your account.<\/li>\n<li>\n<strong>Result.<\/strong> Store the returned signed URL in the <code>screenshot<\/code> state to render the <code>PreviewCard<\/code>.<\/li>\n<\/ul>\n<p>In <a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/app\/page.tsx\"><code>app\/page.tsx<\/code><\/a>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handleGenerate<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">if<\/span> (!url) <span class=\"hljs-keyword\">return<\/span>;\n\n  setScreenshot(<span class=\"hljs-literal\">null<\/span>);\n  setLoading(<span class=\"hljs-literal\">true<\/span>);\n\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> result = <span class=\"hljs-keyword\">await<\/span> generateScreenshot(url);\n    setScreenshot(result);\n  } <span class=\"hljs-keyword\">catch<\/span> {\n    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Capture failed\"<\/span>);\n  } <span class=\"hljs-keyword\">finally<\/span> {\n    setLoading(<span class=\"hljs-literal\">false<\/span>);\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><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<h3>Save to Permanent Gallery<\/h3>\n<p>Screenshots generated via <code>url2png<\/code> are dynamic and temporary. To display them in a persistent gallery, we must \u201cpromote\u201d them to permanent assets.<\/p>\n<p>Core logic:<\/p>\n<ul>\n<li>\n<strong>Trigger.<\/strong> User clicks \u201cSave Permanent Copy\u201d.<\/li>\n<li>\n<strong>Action.<\/strong> Send the dynamic URL to <code>saveToGallery()<\/code>.<\/li>\n<li>\n<strong>Backend logic.<\/strong> The server uses <code>cloudinary.uploader.upload<\/code> to pull the dynamic screenshot into a specific folder (e.g., <code>snapcard_gallery<\/code>).<\/li>\n<li>\n<strong>Timeout handling.<\/strong> Because capturing an external site takes time, the logic uses an extended 60-second timeout to ensure the upload doesn\u2019t drop prematurely.<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Inside app\/page.tsx<\/span>\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handleSave<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">if<\/span> (!screenshot) <span class=\"hljs-keyword\">return<\/span>;\n\n  setSaving(<span class=\"hljs-literal\">true<\/span>);\n\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-keyword\">await<\/span> saveToGallery(screenshot);\n    alert(<span class=\"hljs-string\">\"Successfully saved!\"<\/span>);\n  } <span class=\"hljs-keyword\">catch<\/span> {\n    alert(<span class=\"hljs-string\">\"Save failed\"<\/span>);\n  } <span class=\"hljs-keyword\">finally<\/span> {\n    setSaving(<span class=\"hljs-literal\">false<\/span>);\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><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<blockquote>\n<p>Explore the full interactive UI here. <a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/app\/page.tsx\">https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/app\/page.tsx<\/a><\/p>\n<\/blockquote>\n<h3>Under the Hood: Building the Visual Gallery<\/h3>\n<p>Now that the Home Page is assembled and saving snapshots, we need a way to display them. Instead of maintaining a separate database to track image metadata, we use the <strong>Cloudinary Search API<\/strong> to fetch assets from our <code>snapcard_gallery<\/code> folder in real-time.<\/p>\n<p>Core logic:<\/p>\n<ul>\n<li>\n<strong>Server Component.<\/strong> The Gallery page is a <strong>Server Component<\/strong>, meaning it fetches data during the server-side rendering phase. This improves SEO and ensures users see a populated list immediately upon arrival.<\/li>\n<li>\n<strong>Search expression.<\/strong> We query for all assets within the <code>folder:snapcard_gallery<\/code> and sort them by the newest creation date first.<\/li>\n<li>\n<strong>Mapping.<\/strong> The results are mapped directly to optimized Next.js <code>&lt;Image \/&gt;<\/code> components.<\/li>\n<\/ul>\n<p>In <a href=\"https:\/\/github.com\/musebe\/link-to-card\/blob\/main\/app\/gallery\/page.tsx\"><code>app\/gallery\/page.tsx<\/code><\/a>,  the final implementation looks like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" 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> Image <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/image\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> cloudinary <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@\/lib\/cloudinary\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">GalleryPage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> { resources } = <span class=\"hljs-keyword\">await<\/span> cloudinary.search\n    .expression(<span class=\"hljs-string\">\"folder:snapcard_gallery\"<\/span>)\n    .sort_by(<span class=\"hljs-string\">\"created_at\"<\/span>, <span class=\"hljs-string\">\"desc\"<\/span>)\n    .execute();\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid grid-cols-1 md:grid-cols-3 gap-6\"<\/span>&gt;<\/span>\n      {resources.map((img: any) =&gt; (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\n          <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{img.public_id}<\/span>\n          <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"relative aspect-video overflow-hidden rounded-xl border\"<\/span>\n        &gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span>\n            <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{img.secure_url}<\/span>\n            <span class=\"hljs-attr\">fill<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"object-cover\"<\/span>\n            <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Website Snapshot\"<\/span>\n          \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      ))}\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-10\"><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<h3>Why This Logic Is Powerful<\/h3>\n<ul>\n<li>Cloudinary acts as both your storage engine and your metadata provider. You don\u2019t need a backend table to track which images belong in the gallery.<\/li>\n<li>As soon as a user clicks <strong>Save<\/strong> on the home page, the image is tagged and stored. The next time the Gallery page is refreshed, it appears instantly.<\/li>\n<li>Cloudinary serves the optimized <code>secure_url<\/code>, while the <code>fill<\/code> property in Next.js ensures images scale perfectly within their responsive containers.<\/li>\n<\/ul>\n<h3>Key Takeaways<\/h3>\n<ul>\n<li>When using the <code>url2png<\/code> delivery type, signing the URL ensures your account quota is only used for authorized requests from your server.<\/li>\n<li>By uploading dynamic screenshots to your gallery via the uploader, you promote them to permanent assets. This avoids re-triggering the capture engine (and incurring extra costs) for repeated views.<\/li>\n<li>Cloudinary behaves like a headless browser for this add-on. Always increase your server-side timeouts to at least <strong>60 seconds<\/strong> to ensure successful renders of slower or asset-heavy websites.<\/li>\n<\/ul>\n<p>Ready to build your own link-preview engine?<\/p>\n<ul>\n<li>\n<strong>Live Demo:<\/strong> <a href=\"https:\/\/link-to-card.vercel.app\/\">SnapCard AI<\/a>\n<\/li>\n<li>\n<strong>Full Source Code:<\/strong> <a href=\"https:\/\/github.com\/musebe\/link-to-card\">musebe\/link-to-card<\/a>\n<\/li>\n<\/ul>\n<p>Sign up for a <a href=\"https:\/\/cloudinary.com\/users\/register_free\">free Cloudinary account<\/a> and start capturing the web today.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":39715,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[370,212],"class_list":["post-39701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image","tag-next-js"],"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>Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js<\/title>\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\/visual-cards-url2png-website-screenshots-add-on-next-js\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-20T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-21T18:28:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.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\/visual-cards-url2png-website-screenshots-add-on-next-js#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js\",\"datePublished\":\"2026-01-20T15:00:00+00:00\",\"dateModified\":\"2026-01-21T18:28:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js\"},\"wordCount\":18,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA\",\"keywords\":[\"Image\",\"Next.js\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js\",\"url\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js\",\"name\":\"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA\",\"datePublished\":\"2026-01-20T15:00:00+00:00\",\"dateModified\":\"2026-01-21T18:28:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js\"}]},{\"@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":"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js","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\/visual-cards-url2png-website-screenshots-add-on-next-js","og_locale":"en_US","og_type":"article","og_title":"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js","og_url":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js","og_site_name":"Cloudinary Blog","article_published_time":"2026-01-20T15:00:00+00:00","article_modified_time":"2026-01-21T18:28:27+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.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\/visual-cards-url2png-website-screenshots-add-on-next-js#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js","datePublished":"2026-01-20T15:00:00+00:00","dateModified":"2026-01-21T18:28:27+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js"},"wordCount":18,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA","keywords":["Image","Next.js"],"inLanguage":"en-US","copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js","url":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js","name":"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA","datePublished":"2026-01-20T15:00:00+00:00","dateModified":"2026-01-21T18:28:27+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/visual-cards-url2png-website-screenshots-add-on-next-js#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Transform Boring Text Links Into Visual Cards With Cloudinary\u2019s URL2PNG Website Screenshots Add-On and Next.js"}]},{"@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\/v1769020025\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On\/Blog_Transform_Boring_Text_Links_into_Visual_Cards_with_Cloudinary_s_URL2PNG_Website_Screenshots_Add-On.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39701","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=39701"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39701\/revisions"}],"predecessor-version":[{"id":39702,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39701\/revisions\/39702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/39715"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=39701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=39701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=39701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}