To add an image when sharing your website on platforms like Messenger, you need to include Open Graph tags in the `
` section of your website's code. Open Graph (OG) tags allow you to control how your website's content is displayed when shared on social media platforms.Here are the steps to add an image using Open Graph tags:
1. Open your website in the Webflow Designer.
2. Go to the Pages panel on the left-hand side and select the page you want to add the image to.
3. Click on the Settings tab in the right-hand panel.
4. Scroll down to the Open Graph settings section.
5. You'll see fields where you can set the og:image, og:image:width, and og:image:height.
- og:image: Enter the URL of the image you want to display.
- og:image:width: Enter the width of the image in pixels.
- og:image:height: Enter the height of the image in pixels.
6. Save your changes and publish your website.
7. Test the image by sharing your website's URL on platforms like Messenger.
By adding the og:image tag, you're providing the platform with a specific image to display alongside the shared link. It's important to note that the image should meet the recommended image dimensions for social media platforms to ensure optimal display quality.
Additionally, make sure to set extensive Open Graph metadata for your pages, such as og:title and og:description, to control how your shared content appears beyond just the image. This can greatly enhance the overall sharing experience and increase click-through rates when users come across your website on social platforms.