How is the Open Graph Protocol Object normally implemented in Netlify?

Alexei Goudzenko | Developer (goofy-keller-104bfa.netlify.app)

The objective is to get this custom preview image I made to show up on the featured section of my LinkedIn profile. Where in my GitHub repo should my image belong? Anywhere? I read that I am supposed to use an absolute url to point to this image. I made sure to make my og meta tags to be the first lines in my <head>. It doesn’t seem to work no matter what I do and when I try to visit the image Netlify just gives me a Page Not Found page.

OG images are a simple HTML tag independent of Netlify. Depending on which static site generator you’re using, the image should be copied in something like static folder, so that it can be available at a absolute URL.

Currently, your image (https://goofy-keller-104bfa.netlify.app/assets/Bublik_Image_Portfolio_Large.png) gives 404, thus it doesn’t appear:

So if you copy it to your static folder, it’ll be available at https://goofy-keller-104bfa.netlify.app/Bublik_Image_Portfolio_Large.png and if you want it to exist at your current URL, copy the image to static/assets folder

I guess my static site generator is webpack? I don’t have a folder titled “static”.

Doesn’t that mean if I copy it to “my static folder” mean the image will be available at “https://goofy-keller-104bfa.netlify.app/static/Bublik_Image_Portfolio_Large.png

Webpack is not a SSG. You might be using something else.

If you copy to your “static” folder, you’d get it at: https://goofy-keller-104bfa.netlify.app/Bublik_Image_Portfolio_Large.png”

I’m using this: https://github.com/cobidev/simplefolio

I’m not sure how exactly that website is set-up. Maybe you could try asking the developer how static files are used in this. If it was Gatsby, or Hugo, it could have been as simple as copying them to the static folders as I mentioned.

Do you know how you can reference an image in this website? In the sense, where do you copy it and how you link it in your website?

I’ll keep finding more till then.

EDIT: I just checked the demo website of the repo and its own favicon is returning a 404. But, it’s available here: https://simplfolio.netlify.app/favicon.png. So, I’m guessing, any file you copy to assets folder, can be referenced using /. I’ll try this before confirming.

So, I checked the source, and as it turns out, the image URLs are generated on the fly.

I coped a image to src/assets/ and added it in HTML like: <image src = "image.png"> and that returned a 404. The only way I got it to work was <img src = "./assets/image.png">, but when I checked the generated HTML, I noticed that, the image had got renamed with a string after the original name.

I noticed that too. So what you’re saying is that I can’t get og:img to work as intended?

There’s a plugin that seems to do it: https://www.npmjs.com/package/social-tags-webpack-plugin. That might work for the timebeing.

The problem is, Webpack doesn’t seem to know the URL of your website, thus, it doesn’t seem to be possible to reference the OG image as absolute path.

You have another option, to host the static image elsewhere and reference is, or as I said, use some plugins. Third option would be to switch to some other SSG or framework, but that might not be a viable option.

Any image host recommendations for this? Google Drive?

Google Drive won’t be able to give you a static URL. You can try with Dropbox. The sharing URL that Dropbox provides has an option to change the query parameter from the default dl=0 to raw=1 which should work.

So it worked but not with LinkedIn: Post Inspector (linkedin.com)

It asks me to Sign In and I don’t have a LinkedIn currently. Is there any other way you could show what’s happening?

Ah dangit totally forgot about that yeah here:

That’s strange. Since it’s able to see the URL correctly, it should have worked. Maybe the console shows something?

EDIT: It might as well be due to the oversized image. OG tags usually need something around 1200px * 628px or something like that. Yours is 7042 px * 3687.px. Maybe, that size is not allowed on LinkedIn?

Never mind it worked all of the sudden! I guess Netlify needed some time to implement even after it said the build was complete

That’s not how it usually works. But, glad it works! :grin: