Streaming live at 10am (PST)

Open Graph Images


#1

What's the best way to go about hosting an open graph image in webflow. The images I have on my site are all mostly background images within a section.

What I'd like to do is host an image on my site that is not explicitly shown or searchable, but that I can use as my open graph image.

I'm still understanding open graph tags, but basically what I'm asking is how to go about hosting these images.

Thanks


#2

You can make an extra page, unlinked for the other pages, that contains the image. They publish, catch the URL of the image and use it for OpenGraph.

You can also draw a div, give it a class (like "opengraphimage") define the image as background (so you upload it), and check its url once published. As it's attched to a class, webflow will keep it so you can even delete the div.


#3

Awesome man, thanks. Just to be sure, if it's unlinked to any other pages, google wouldn't index that right?


#4

It shouldn't, but it maybe could...

Rather use the second method so you don't even have an extra page.

Be aware of the Webflow rule in terms of images:

Webflow keeps your unused images if it's attached to a style. Weblfow will delete your image when the two following actions are taken consecutively:
- you clean your site of the "unused styles" in the site's tab
- then you duplicate your site.

If you do that, Webflow deletes your image, If you do not, it's kept. This is an unspoken rule, it's subject to change smile


#5

Thanks man. Really appreciate it.


#6

We actually just added site wide OG settings to the SEO tab:


#7

You can grab the url for the image from your asset manager like so..


#8

Hey @brryant I already have some Open Graph images in my custom code. Should I remove those and rely on this one? I can't remember if I'd put in the ones specific to different networks or not. Probably haven't haha. But optimal size is 1200x630 to account for retina screens & such according to their developers site. Any incite for other social media OG images & best practices there?

Thank you,

Waldo

BTW: #WinningAtTheInternets smiley wink purple_heart


#9

Hi @Waldo_Broodryk, you are safe to use the Webflow OG settings for title, description and image.

If you are using extra OG meta tags or custom tags with social media specific tags, you can continue to use those in custom code.

Always a good idea to check how things look, and are listed as you expect smile


#10

Any way we can add OG tag on page level? instead of whole site?


#11

where is the "delete" button in my page?


#12

Hi @zfe, are you referring to deleting an image? If so, that is not yet a feature of the asset manager. There is work going on add delete capability. This will come in an update. If you want to remove images, you can can duplicate your site. Images not used will be removed during duplication.

Does this help? Cheers, Dave


#14

Page specific OG settings is coming in an imminent release - stay tuned!


#15

I love, the "imminent release" haha smiley smiley smiley smiley smiley
surfer surfer surfer surfer surfer surfer surfer surfer surfer surfer surfer surfer surfer surfer surfer


A map also as a page!
#16

ha, that is really good news. i am waiting for the new feature. so far, duplication is helpful for me.


#17

Did anyone noticed that we can add Open Graph and HTML Code into a specific page now? wink


A map also as a page!
#18

Yes, that's awesome, already using that!
I found a new block quote widget, some new icons on the designer view and color for classes smiley Likin it


#19

Deleting images, its working now! One idea Dave! It would be perfect if it gives a warning "in use" or "not is use"

And Yes, the given url is perfect guys!


#20

Is this ever coming to Collection items? (I.e., blog posts?)


#21

Yep, it's coming very soon for collection detail pages - stay tuned! :smile: