How can I get Twitter, LinkedIn, etc. to display the "thumbnail image" from a blog post when I paste the link in Webflow?

Published on
September 22, 2023

If you want the thumbnail image from a blog post to be displayed when you paste the link in Webflow for platforms like Twitter and LinkedIn, you will need to set the Open Graph meta tags for your blog posts. Open Graph tags provide metadata to these platforms, allowing them to understand what content should be displayed when a link is shared.

Here's how you can set up the Open Graph meta tags in Webflow:

  1. Open your Webflow project and navigate to the page template that contains your blog posts.
  2. Click on the "Page Settings" icon (gear icon) in the left-hand menu.
  3. In the "SEO" tab, scroll down to the "Open Graph" section.
  4. Click on the "Add Open Graph Meta Tags" button.
  5. In the "Property" field, enter "og:image".
  6. In the "Content" field, enter the URL of the thumbnail image you want to display. Make sure the image is publicly accessible.
  7. Repeat steps 5 and 6 for other Open Graph tags you want to set, such as "og:title" and "og:description", to customize the title and description displayed when the link is shared.
  8. Save your changes and publish your site.

By setting the "og:image" tag with the URL of your desired thumbnail image, when you paste the link to your blog post on platforms like Twitter and LinkedIn, they should recognize the image and display it along with the link.

Remember to optimize your thumbnail image with the appropriate dimensions and file size for better display on social media platforms.

Additional Resources:

Q1: How do I set up Open Graph meta tags in Webflow?
Q2: What are the benefits of using Open Graph meta tags for social media sharing?
Q3: How can I optimize images for social media sharing in Webflow?