Loading web preview image for Observable Framework app

Community Help
1

Hi Observable community!

I am working on an Observable framework app, and in my markdown file I am loading a .png as part of a data visualization project. I notice that since it is the first image loaded, that image appears as the “web preview” image when I share the link of the deployed page (e.g. in a message or on LinkedIn).

I’d like to change the web preview image. I’ve tried loading a different image in the markdown file first, and just hiding the image, but that doesn’t make that image appear in the web preview. Does anyone know how to update the web preview image without having that image appear somewhere in the webpage itself?

Thanks!
Aura

2

You should be able to set the metadata for your page (in the header). See https://ogp.me

In Framework, you can add a snippet to add this to the of your page. Configuration | Observable Framework

3

That worked, thank you very much!