How to Get the Image Url for Webflow Uploaded Image

This video features an old UI. Updated version coming soon!

Open Graph (OG) is a technology that social networks like Facebook, Twitter, Pinterest, etc., employ to pull data from your site when you add a URL of your site in whatever of your posts on these services. By setting the Open Graph settings of your pages, yous can specify which data from your pages yous want to prove when someone shares your page.

In this lesson

1. Accessing the Open Graph settings of a folio
2. Setting Open Graph settings
3. Setting dynamic Open Graph settings
4. Testing Open Graph settings
5. Updating Open Graph setting changes
6. Troubleshooting missing images

Accessing the Open Graph settings of a page

You lot tin can prepare the Open Graph settings of any or all of your pages by going to the Page settings of each of your pages.

• Pages panel > Page settings > Open up Graph Settings

Setting Open up Graph settings

In Webflow, you lot can ready three OG tags:

• Open Graph Title - The text that displays equally the folio's championship when shared.
• Open up Graph Description - The text that displays under the title, and gives people a description of the shared folio'due south content.
• Open Graph Paradigm - The image that displays above the championship and description.

Set your page's Open Graph title, description, and prototype to specify what content is pulled from that page when it'south shared on social media.

Yous can as well match your Open Graph title and description to your SEO title and meta clarification by clicking the checkboxes beneath each Open Graph field.

Good to know

• Open Graph content works best when it'southward specific to the folio being shared. For case, your home page'south Open Graph content should be different than your pricing page's. That's why there'southward no option to ready OG settings globally.
• And since, Open Graph settings useonly to the folio on which yous've set the settings. And so, be sure to set the Open up Graph settings for each of your pages.

When a folio is shared on social media, the URL is converted to a rich card pulling information from your Open up Graph settings.

This is what you'll meet when you lot share the Webflow University homepage URL.

Need to know
If you haven't set your OG settings, random content (sometimes no content) volition be pulled from your site when you share information technology on social media.

Open Graph image

Yous can add the URL of any image in theOpen Graph Paradigm. The URL must be a straight link i.e. it ends in the filename with the extension.

Important
Only use images you have rights to employ and share.

All-time practice

• Yous can upload the image(southward) you want to employ as OG image to the Asset panel.
• To grab the URL of the images in the Asset console, click the settings icon that appears when yous hover over the image in the Asset panel, then grab the URL by right-clicking on the link icon next to the asset proper name in the Asset Details menu and copy the link.

• Learn how to optimize images to generate better previews when sharing your pages.

Setting dynamic Open up Graph settings

For Collection pages, you'll define a pattern that all pages in a Collection will use for their Open up Graph information. That way, all Collection Items volition automatically generate their Open up Graph championship, description, and paradigm based on the design y'all defined.

You can edit this information in the Drove Template Folio'southward settings, but like you do for your static pages.

What makes Collection Template pages so powerful is the power to pull in unique information for each Collection item. So, instead of manually writing the Open Graph championship for each web log post, you can instead take Webflow pull that content from your post'southward name or championship field.

‍Collection Template pages let you dynamically ascertain Open Graph content, and so each new blog post writes its own OG content.

Testing Open Graph settings

Sometimes, when sharing your content on social media, you'll notice that there'due south a typo in your Open up Graph information, or that the image is cropped in a weird way, or yous've updated your settings, but the onetime data is withal beingness pulled.

To test that the correct data is displayed when your content is shared:

1. Paste the link to the folio from your site in a post box on Facebook
2. ‍Double check the content that displays

If there are any bug, read how to update your Open up Graph settings below.

Updating Open up Graph setting changes

To gear up whatever Open up Graph issues or to update your OG data:

1. Get back to your Folio settings in Webflow and bank check that all the information is right
2. Gear up anything that's incorrect. Save the page settings and publish your site.
3. Paste the link in the Facebook debugger, debug and and then scrape the data again.

Troubleshooting missing images

Sometimes, you may notice that when yous share a link on Facebook, merely the championship and description announced in the generate rich card. The paradigm you've set in your OG settings is missing. This usually happens when the page is shared for the first time. Fifty-fifty earlier you submit the post. If you abolish the mail service and try again, on the 2d attempt of sharing the same URL, the image volition announced in the rich menu. This happens for reasons that Facebook explains in their Best practices for sharing folio.

You tin can forbid this from happening by specifying the image dimensions so the crawler can render the epitome immediately without having to download and process it each fourth dimension. To practice that:

1. Brand certain to use the aforementioned image dimensions for all your images on your site (Read the best practices for ideal paradigm sizes)
2. Add together the following code snippet in the head section of your website:

• <meta property="og:image:width" content="1200">
• <meta holding="og:epitome:summit" content="630">

Replace the content values for the width and superlative with the pixel values of your images on your site.

Good to know

• If you want to use different image sizes for different pages, you tin add the aforementioned code in the head section of your page's custom code.
• All images of a Collection must have the same dimensions.

millergragairehe.blogspot.com

Source: https://university.webflow.com/lesson/open-graph-settings

Share this post