How can I change the link preview text and thumbnail image for my blog articles on Webflow? Currently, the displayed text and image do not relate to the articles when shared on social media and chat boxes.

TL;DR
  • Use Webflow's Open Graph Settings to update the link preview text and thumbnail image by accessing the Page Settings, updating the Open Graph Image, Title, and Description, and then publishing the changes to push them live.

When sharing blog articles, you can adjust the link preview text and thumbnail image using Open Graph Settings in Webflow.

​

1. Access the Page Settings

  • Open Webflow Designer and navigate to the page or template you want to modify.
  • Select the page from the Pages panel.

​

2. Update Open Graph Settings

  • In the Page Settings panel, scroll to the Open Graph Settings section.
  • Update the Open Graph Image: Upload an image that you want to use as the thumbnail. This should be an appropriate size, typically 1200x630 pixels.
  • Set the Open Graph Title: Enter a concise and informative title that will appear as the link preview.
  • Set the Open Graph Description: Add a brief description that accurately reflects the content of your article.

​

3. Publish Your Changes

  • Click the Publish button in Webflow to push your changes live.
  • Verify that the updates are live by using a link preview tool or sharing the link in social media/chats.

​

Summary

To change the link preview text and thumbnail image for your blog articles, adjust the Open Graph Settings in Webflow's page settings. After updating, always remember to publish your changes to make them live.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I set up a custom code button in Webflow that waits 2 seconds before redirecting to a specific URL when clicked?
Is Webflow as powerful as WordPress for SEO optimization?
How do I fix the interaction on hover issue in Webflow for a collection list with two different components?
How can I create a slider on mobile where cards turn into slides, using Webflow?
How can I hide the Coda badges displayed when an iframe loads from `<a class="lightbox"` using Webflow?
Where can I find Lottie animations like the ones shown in the picture? And how can I change the color of a Lottie animation like the ones in the picture?
How can I add an image from my media Library to a blog post in the Webflow editor without having to upload it again? It's a straightforward process in WordPress, but seems more complicated in Webflow. Am I overlooking something?
How can the text color be changed for custom input fields on Webflow?
Can a third party payment gateway, such as "Tap Pay," be integrated into Webflow for an ecommerce site that does not support any of the available payment methods provided by Webflow? If so, how can this integration be achieved?
Can I duplicate and save my home page as another page in Webflow?
Can the play, pause, and stop functions of a Lottie animation be controlled through JavaScript calls in Webflow?
How can I create a dynamic grid layout in Webflow that automatically populates images and links from a collection, where some images are larger and others flow around each other nicely?
Is there a straightforward way to duplicate a Symbol in the symbols list in Webflow? I need to create a duplicate of a navbar to make changes without affecting the original one or its interactions. Unlinking the Symbol causes issues with interactions on desktop view. The duplicated navbars will be used for different screen versions. Thank you!
How can I create nesting lists in Webflow?
How do I center a third party affiliate code widget in my Webflow page?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?