{"id":32141,"date":"2023-12-20T07:00:00","date_gmt":"2023-12-20T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32141"},"modified":"2025-02-08T17:13:54","modified_gmt":"2025-02-09T01:13:54","slug":"twitter-ruined-your-link-previews","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews","title":{"rendered":"Twitter Ruined Your Link Previews: Here’s How Cloudinary Can Help"},"content":{"rendered":"\n

In October 2023, Twitter rolled out a big and controversial update, which changed how links to the content you share are displayed on the timeline. Previously, link previews would come with a large or small image, and most importantly, the image was accompanied by the headline and description of the URL, giving crucial information to readers scrolling the feed. Now, link previews that include large images are stripped of this contextual data, which has been replaced by a tiny label of the top-level domain of the link, overlaid on the bottom left-hand corner of the image.\u00a0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Today, links with large image previews don\u2019t even look like links \u2014 and this is on purpose. Twitter doesn\u2019t want you to click away from the platform anymore. Sneaky. Additionally, this change comes with some big barriers to accessibility.<\/p>\n\n\n\n

In a tweet from October 5, 2023, designer and developer Matt Eason writes<\/a>: \u201cThe X\/Twitter update to remove headlines from link previews has also completely broken their accessibility. The link\/image can’t be tabbed to with the keyboard, and it’s been totally hidden from screen readers.\u201d While the tech community on Twitter rushed to find quick fixes and temporary workarounds for this, others proved how this change could further exacerbate the sharing of misinformation, by posting links to articles that showed images of Elon Musk and other questionable public figures, accompanied by false, damaging, and highly NSFW headlines in the body of the tweet. <\/p>\n\n\n\n

While, unfortunately, this post can\u2019t help with fixing the accessibility issues around link sharing on Twitter, it will help you add contextual information to your images that accompany your URLs on Twitter using Cloudinary. But first, let\u2019s take a look at what powers those images.<\/p>\n\n\n\n

The Open Graph Protocol<\/h2>\n\n\n\n

Created at Facebook in 2010, the Open Graph (OG) protocol<\/a> was designed to transform web links into visually rich content previews that looked like native Facebook content at the time. Today, you can use Open Graph meta tags in the <head><\/code> of an HTML page to expose information about web pages to social media platforms and other applications that unfurl URL metadata \u2014 such as Twitter. OG meta tags in the source code are identified by an attribute prefixed with og<\/code>. The following code provides an image URL to be displayed when sharing links on platforms that support it:<\/p>\n\n\n

<meta<\/span> property<\/span>=\"og:image\"<\/span> content<\/span>=\"https:\/\/example.com\/image.png\"<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To instruct Twitter to show large full-width OG images when you share a link, as opposed to the default smaller image alongside the title and description, you can use this meta tag:<\/p>\n\n\n
<meta<\/span> name<\/span>=\"twitter:card\"<\/span> content<\/span>=\"summary_large_image\"<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
To fix a lot of this mess, we could all just revert to using the smaller default image in our link previews on Twitter. However, most people prefer to use larger images because they\u2019re easier to notice, and more aligned with the original visual intentions of the Open Graph protocol created by Facebook in 2010. If you\u2019d like to continue using large images for your URLs on Twitter, here\u2019s how Cloudinary can help.<\/p>\n\n\n\n
Use Cloudinary to Add Text to Open Graph Images for Twitter<\/h2>\n\n\n\n
Before image transformation APIs, Open Graph images were created manually \u2014 for each blog post, website page, or anything else people wanted to share \u2014 uploaded to a CDN (or a folder in a repo!), and referenced by URL when they were needed. As you can imagine, this doesn\u2019t scale, especially for businesses that are adding hundreds of new pages to their websites each week (think e-commerce). Now, with Cloudinary, you can generate dynamic Open Graph images on the fly, via programmatically constructed URLs, or your SDK of choice.<\/p>\n\n\n\n
The Cloudinary API offers huge flexibility in adding text to images, overlaying images on images, and further image transformations, but the quickest way to solve the problem Twitter created (if only for sighted people), is to use Cloudinary to add a page title to a base image. Here\u2019s an Open Graph image for one of my blog posts, generated programmatically via the Cloudinary API.<\/p>\n\n\n\n
\"Salma<\/figure>\n\n\n\n
Let\u2019s look at how to overlay text on an image uploaded to Cloudinary, using URL parameters. The following assumes you\u2019ve signed up for a free Cloudinary account<\/a>, and you\u2019re familiar with JavaScript.<\/p>\n\n\n\n
Upload a Base Image to Cloudinary<\/h3>\n\n\n\n
Before writing any code, you\u2019ll need a base image to work with. You might want to mock up what you want the finished product to look like in your image editing software of choice, to know how much space to leave on the design for text. A tactic I\u2019ve used in the past is to find the shortest and longest page titles on my website, and work the design around those parameters (and I\u2019ll also share a little bonus workaround to accommodate a variety of page title lengths).<\/p>\n\n\n\n
Log in to Cloudinary, click Upload<\/strong>, and add your base image to your Cloudinary Media Library.<\/p>\n\n\n\n
\"Cloudinary<\/figure>\n\n\n\n
Cloudinary will add an auto-generated suffix to your image name. Click the image to open it in the preview pane, and change the file name using the pencil icon, so that it\u2019s easier to use the asset name in the code. Here\u2019s my base image uploaded to Cloudinary, which includes my name, and a stylized image that matches my website branding.<\/p>\n\n\n\n
\"My<\/figure>\n\n\n\n
Now, let\u2019s write some code!<\/p>\n\n\n\n
The Cloudinary Image URL: Explained<\/h3>\n\n\n\n
Here\u2019s the URL to the current Open Graph image for my website homepage, which overlays the text \u201cLive streamer, software engineer and developer educator\u201d onto my base image.<\/p>\n\n\n
https:\/\/res.cloudinary.com\/whitep4nth3r\/image\/upload\/w_1200,h_630,c_fill,q_auto,f_auto\/w_657,c_fit,g_south_west,co_rgb:ffffff,x_255,y_80,l_text:interblack.ttf_60:Live%20streamer%252C%20software%20engineer%20and%20developer%20educator\/og_pink.png<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
It looks overwhelming at first glance, but each part of the URL gives Cloudinary specific instructions on how to transform your image, like so:<\/p>\n\n\n
https:\/\/res.cloudinary.com\/{cloud_name}\/image\/upload\/{image_transformations}\/{text_parameters}:{title}\/image_name.png<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Let\u2019s take a look at each part of the URL, and how it works to overlay text on a base image.<\/p>\n\n\n\n
The Base URL and Account Slug<\/h3>\n\n\n\n
The base URL comprises the protocol https:\/\/<\/code>, the CDN subdomain res.cloudinary.com<\/code>, your cloud name (which is found and editable in Cloudinary account settings), followed by \/image\/upload\/<\/code>, indicating we\u2019re accessing a resource of type image<\/code> that is an upload<\/code>. Putting that all together, we have:<\/p>\n\n\n
https:\/\/res.cloudinary.com\/{cloud_name}\/image\/upload\/<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Image Transformations<\/h3>\n\n\n\n
The next part of the URL tells Cloudinary what to do with the base image. My parameters, provided as as comma separated string, are as follows:<\/p>\n\n\n\n
    \n
  1. w_1200<\/code> tells Cloudinary to resize the width of the image to 1200px.<\/li>\n\n\n\n
  2. h_630<\/code> tells Cloudinary to resize the height of the image to 630px.<\/li>\n\n\n\n
  3. c_fill<\/code> sets the crop parameter, denoted by c_<\/code>, to fill<\/code>.<\/li>\n\n\n\n
  4. q_auto<\/code> sets the quality parameter, denoted by q_<\/code>, to auto<\/code>.<\/li>\n\n\n\n
  5. f_auto<\/code> sets the requested file format, denoted by f_<\/code>, to auto<\/code>, which automatically generates (if needed) and delivers an asset in the most optimal format for the requesting browser<\/a> in order to minimize the file size.<\/li>\n\n\n\n
  6. Indicate the end of the image transformations with a forward slash \/<\/code>.<\/li>\n<\/ol>\n\n\n\n
    While 1200×630 are the dimensions of my original base image, should I change my base image in the future and upload a different image size, using w_1200<\/code> and h_630<\/code> ensures that the text positioning will stay consistent without any further changes.<\/p>\n\n\n\n
    Text Parameters<\/h3>\n\n\n\n
    Next are the text parameters, provided as a comma-separated string. Note that these parameters can be in any order, but I\u2019ve detailed them in the order they appear in the URL above.<\/p>\n\n\n\n
      \n
    1. w_657<\/code> sets the width of the text container to 657px.<\/li>\n\n\n\n
    2. c_fit<\/code> tells Cloudinary to fit my text into the specified container and to wrap the text accordingly.<\/li>\n\n\n\n
    3. g_south_west<\/code> anchors my text container to the bottom left of the image boundary for positioning with X and Y coordinates.<\/li>\n\n\n\n
    4. co_rgb:ffffff<\/code> sets the text color to the hex code #ffffff (white).<\/li>\n\n\n\n
    5. x_255<\/code> moves the text container 255px along the X axis.<\/li>\n\n\n\n
    6. y_80<\/code> moves the text container 80px along the Y axis.<\/li>\n\n\n\n
    7. l_text:interblack.ttf_60<\/code> adds the text layer, where l_<\/code> denotes \u201clayer,\u201d sets the font to interblack.ttf<\/code>, which I uploaded to my Cloudinary Media Library, and sets the font size to 60.<\/li>\n<\/ol>\n\n\n\n
      The Text as an Encoded String<\/h3>\n\n\n\n
      Next, we\u2019ll define the text we want to layer on the image, preceded by a colon. Given the text will be applied via the URL in this case, we\u2019ll need to encode the string in code, so that \u201cLive streamer, software engineer and developer education\u201d becomes Live%20streamer%252C%20software%20engineer%20and%20developer%20educator<\/code>.<\/p>\n\n\n\n
      Image Name<\/h3>\n\n\n\n
      The final part of the URL is the name of your image (that you edited to a more memorable name after you uploaded it). Make sure to include the file extension; in my example, it\u2019s og_pink.png<\/code>.<\/p>\n\n\n\n
      Now let\u2019s look at how to construct this URL in plain JavaScript, without any libraries or SDKs.<\/p>\n\n\n\n
      Generating the Image URL Programmatically in Code<\/h3>\n\n\n\n
      Here\u2019s how I construct the Cloudinary image URL using JavaScript. The generateCloudinaryImageUrl<\/code> takes a title<\/code> parameter, which is a string. To make the code easier to read, I define two arrays: imageTransformations<\/code> and titleParameters<\/code>, which are joined by a comma. <\/p>\n\n\n\n
      Above the titleParameters<\/code> you\u2019ll notice the bonus workaround to accommodate different page title lengths I mentioned earlier. Here, I count the number of words in the title using a Regular Expression. My default titleSize<\/code> is 50. However, if I find 10 words or fewer, I set the titleSize to 60 to make it fill more of the image. Your implementation will depend on the font family you use, and the overall design of your Open Graph image, but it\u2019s a good trick to ensure you account for a variety of title lengths in the code. Also note that I have switched out my custom font for a Cloudinary-supported Google font<\/a> in the code.<\/p>\n\n\n\n
      Finally, all parameters are combined with the necessary parts of the Cloudinary image URL described above, joined via a forward slash, and returned from the function.<\/p>\n\n\n\n
      If you\u2019d like to add extra information such as the author or the page description, it\u2019s as straightforward as adding an extra text layer, and configuring the parameters accordingly.<\/p>\n\n\n
      function<\/span> generateCloudinaryImageUrl<\/span>(title<\/span>) <\/span>{\n  \/\/ configure image transformations<\/span>\n  const<\/span> imageTransformations = [`w_1200`<\/span>, `h_630`<\/span>, \"c_fill\"<\/span>, \"q_auto\"<\/span>, \"f_auto\"<\/span>].join(\",\"<\/span>);\n\n  \/\/ if 10 words or fewer, increase font size<\/span>\n  const<\/span> wordCount = title.match(\/(\\w+)\/g<\/span>).length;\n  const<\/span> titleSize = wordCount < 10<\/span> ? 60<\/span> : 50<\/span>;\n\n  const<\/span> titleParameters = [\n    `w_657`<\/span>,\n    \"c_fit\"<\/span>,\n    \"g_south_west\"<\/span>,\n    \"co_rgb:ffffff\"<\/span>,\n    `x_255`<\/span>,\n    `y_80`<\/span>,\n    `l_text:Roboto_${titleSize}<\/span>:${encodeURIComponent<\/span>(title)}<\/span>`<\/span>,\n  ].join(\",\"<\/span>);\n\n  \/\/ combine all URL parts to generate a Cloudinary URL<\/span>\n  return<\/span> [\n    \"https:\/\/res.cloudinary.com\"<\/span>,\n    \"whitep4nth3r\"<\/span>,\n    \"image\"<\/span>,\n    \"upload\"<\/span>,\n    imageTransformations,\n    titleParameters,\n    \"og_pink.png\"<\/span>,\n  ].join(\"\/\"<\/span>);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      My website is primarily a static site, so my Open Graph image URLs are generated at build time, and added to the relevant meta tags in the head of my static HTML pages. Your implementation may vary, but ensure you add the following meta tag to the head of your website pages:<\/p>\n\n\n
      <meta<\/span> property<\/span>=\"og:image\"<\/span>\ncontent<\/span>=\"https:\/\/your_dynamically_generated_cloudinary_url\"<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      And that\u2019s it!<\/p>\n\n\n\n
      Transforming Images With Cloudinary in NuxtJS<\/h3>\n\n\n\n
      If you\u2019re using Nuxt, Cloudinary provides a handy Open Graph image component<\/a> that automatically generates and inserts the required Open Graph meta tags to the head of your pages. <\/p>\n\n\n\n
      Follow the installation instructions for a Nuxt project<\/a> to install the dependency and add the module to the nuxt.config.ts file, and use the <CldOgImage><\/code> component to render Open Graph meta tags containing a transformed URL. Inspect the source code and notice that the generated HTML contains a meta tag for twitter:card<\/code> set to summary_large_image<\/code> to provide large Open Graph images for Twitter.<\/p>\n\n\n
      <CldOgImage<\/span>\n    src<\/span>=\"og_pink.png\"<\/span>\n    height<\/span>=\"630\"<\/span>\n    width<\/span>=\"1200\"<\/span>\n    :overlays<\/span>=\"[\n      {\n        position: {\n          gravity: 'south_west',\n          y: 80,\n          x: 255,\n        },\n        width: 657,\n        crop:  'fit',\n        text: {\n          color: '#ffffff',\n          fontFamily: 'Roboto',\n          fontSize: 60,\n          text: 'Live streamer, software engineer and developer educator',\n        },\n      },\n    ]\"<\/span>\n  \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      With this library, you can also use a composable to construct the Cloudinary URL, should you want to use the image URL elsewhere. This gives the same result, so you don\u2019t have to manage your own URL construction<\/p>\n\n\n
      <script<\/span> lang<\/span>=\"ts\"<\/span> setup<\/span>><\/span>\nconst<\/span> { url } = useCldImageUrl({\n  options<\/span>: {\n    src<\/span>: \"\/og_pink.png\"<\/span>,\n    width<\/span>: 1200<\/span>,\n    height<\/span>: 630<\/span>,\n    overlays<\/span>: [\n      {\n        position<\/span>: {\n          gravity<\/span>: \"south_west\"<\/span>,\n          x<\/span>: 255<\/span>,\n          y<\/span>: 80<\/span>,\n        },\n        crop<\/span>: \"fit\"<\/span>,\n        width<\/span>: 657<\/span>,\n        text<\/span>: {\n          color<\/span>: \"#ffffff\"<\/span>,\n          fontFamily<\/span>: \"Roboto\"<\/span>,\n          fontSize<\/span>: 60<\/span>,\n          text<\/span>: \"Live streamer, software engineer and developer educator\"<\/span>,\n        },\n      },\n    ],\n  },\n});\n\nconsole<\/span>.log(url);\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      Transforming Images With Cloudinary in Next.js<\/h3>\n\n\n\n
      If you\u2019re using Next.js, Cloudinary offers the same component functionality as Nuxt.  <\/p>\n\n\n\n
      Follow the installation instructions for a Next.js project<\/a> to install the dependency and use the <CldOgImage><\/code> component to render Open Graph meta tags containing a transformed URL in the same way.<\/p>\n\n\n
      import { CldOgImage } from 'next-cloudinary'<\/span>;\n\n<CldOgImage\n  src=\"og_pink.png\"<\/span>\n  width=\"1200\"<\/span>\n  height=\"630\"<\/span>\n  overlays={[\n    {\n      position: {\n        gravity: 'south_west'<\/span>,\n        y: 80<\/span>,\n        x: 255<\/span>,\n      },\n      width: 657<\/span>,\n      crop: 'fit'<\/span>,\n      text: {\n        color: '#ffffff'<\/span>,\n        fontFamily: 'Roboto'<\/span>,\n        fontSize: 60<\/span>,\n        text: 'Live streamer, software engineer and developer educator'<\/span>,\n      },\n    },\n  ]}\n\/>;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
      What Else Can You Do?<\/h2>\n\n\n\n
      Generating dynamic Open Graph images for sharing links on social sharing is only touching the surface of what Cloudinary can do with your images and media. Programmable image transformations remove so much of the manual image editing work that\u2019s often required to create responsive and adaptive page designs, such as cropping, rounding corners, overlaying text and images such as company logos, and so much more, so you can focus on writing code and shipping features without waiting for bespoke design assets over and over again. Cloudinary also offers video transformation APIs, allowing you to crop videos, overlay images and videos on videos \u2014 all without video editing software. And this blows my mind.<\/p>\n\n\n\n
      Although we can\u2019t fix Twitter accessibility, we can be more intentional about how we share links. If you do want to continue using large Open Graph images on Twitter, even if you\u2019re overlaying text on your images, I\u2019d recommend providing the page title and a short description in your tweets, to ensure that people using screen readers and assistive technology can access the information, and understand what they\u2019re clicking before they visit the link.<\/p>\n","protected":false},"excerpt":{"rendered":"
      In October 2023, Twitter rolled out a big and controversial update, which changed how links to the content you share are displayed on the timeline. Previously, link previews would come with a large or small image, and most importantly, the image was accompanied by the headline and description of the URL, giving crucial information to […]<\/p>\n","protected":false},"author":87,"featured_media":32143,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,165],"class_list":["post-32141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image-transformation"],"acf":[],"yoast_head":"\nTwitter Ruined Your Link Previews: Here's How Cloudinary Can Help<\/title>\n<meta name=\"description\" content=\"In October 2023, Twitter rolled out a controversial update, changing how content links are displayed. Read how Cloudinary can fix it.\" \/>\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\/twitter-ruined-your-link-previews\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twitter Ruined Your Link Previews: Here's How Cloudinary Can Help\" \/>\n<meta property=\"og:description\" content=\"In October 2023, Twitter rolled out a controversial update, changing how content links are displayed. Read how Cloudinary can fix it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-20T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-09T01:13:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog-png?_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\/png\" \/>\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\/twitter-ruined-your-link-previews#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Twitter Ruined Your Link Previews: Here’s How Cloudinary Can Help\",\"datePublished\":\"2023-12-20T15:00:00+00:00\",\"dateModified\":\"2025-02-09T01:13:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews\"},\"wordCount\":2239,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews\",\"url\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews\",\"name\":\"Twitter Ruined Your Link Previews: Here's How Cloudinary Can Help\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA\",\"datePublished\":\"2023-12-20T15:00:00+00:00\",\"dateModified\":\"2025-02-09T01:13:54+00:00\",\"description\":\"In October 2023, Twitter rolled out a controversial update, changing how content links are displayed. Read how Cloudinary can fix it.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Twitter Ruined Your Link Previews: Here’s How Cloudinary Can Help\"}]},{\"@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":"Twitter Ruined Your Link Previews: Here's How Cloudinary Can Help","description":"In October 2023, Twitter rolled out a controversial update, changing how content links are displayed. Read how Cloudinary can fix it.","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\/twitter-ruined-your-link-previews","og_locale":"en_US","og_type":"article","og_title":"Twitter Ruined Your Link Previews: Here's How Cloudinary Can Help","og_description":"In October 2023, Twitter rolled out a controversial update, changing how content links are displayed. Read how Cloudinary can fix it.","og_url":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews","og_site_name":"Cloudinary Blog","article_published_time":"2023-12-20T15:00:00+00:00","article_modified_time":"2025-02-09T01:13:54+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog-png?_i=AA","type":"image\/png"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Twitter Ruined Your Link Previews: Here’s How Cloudinary Can Help","datePublished":"2023-12-20T15:00:00+00:00","dateModified":"2025-02-09T01:13:54+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews"},"wordCount":2239,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA","keywords":["Guest Post","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews","url":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews","name":"Twitter Ruined Your Link Previews: Here's How Cloudinary Can Help","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA","datePublished":"2023-12-20T15:00:00+00:00","dateModified":"2025-02-09T01:13:54+00:00","description":"In October 2023, Twitter rolled out a controversial update, changing how content links are displayed. Read how Cloudinary can fix it.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/twitter-ruined-your-link-previews#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Twitter Ruined Your Link Previews: Here’s How Cloudinary Can Help"}]},{"@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\/v1701473151\/x_open_graph_images-blog\/x_open_graph_images-blog.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32141","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=32141"}],"version-history":[{"count":9,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32141\/revisions"}],"predecessor-version":[{"id":36750,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32141\/revisions\/36750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32143"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
      Image Transformation in Front-End Frameworks and Libraries<\/h3>\n\n\n\n
      Cloudinary offers many more image transformation libraries, SDKs, and utilities for frameworks such as Svelte<\/a>, Angular<\/a>, and for the most popular JavaScript library on the web \u2014 jQuery<\/a>. Visit the official Cloudinary SDK Guide<\/a> to see the full list.<\/p>\n\n\n\n
      Streamline Your Workflow With Cloudinary SDKs<\/h2>\n\n\n\n
      Now that you\u2019re familiar with adding text to images using Cloudinary URL parameters, you may want to level up your productivity by using one of the many Cloudinary SDKs<\/a> to achieve the same results in your front-end framework of choice, without needing to write your own bespoke transformation methods.<\/p>\n\n\n\n
Shortly after, Twitter rolled out its own custom implementation built on the OG protocol<\/a>, allowing you to configure the appearance of your web pages on Twitter specifically. On Twitter, you can choose to show a small square image by default, which appears next to the headline (page title) and description (meta description) of the page (and was unaffected by this change in October 2023), or a large landscape image, which used to be displayed above the headline and description.<\/p>\n\n\n\n