Add main image for sharing by link in FB | HTML, Angular

Question

When I put the link into the new post in FB - for example GitHub I see title image of GitHub

When I try to put into the post my web site. I see only the title.

Where do I need to add the title image for sharing in FB?

Answer 1

That data comes from open graph tags:

https://ogp.me/

If you are using angular, react, or view, and create the metadata via javascript in client, apps like twitter, whatsapp, facebook, etc. won't display the data of the OG tags, bc those apps don't execute javascript

To show the OG tags, you MUST set those tags in server. Maybe SSR, maybe a proxy that generate that tags, there are multiple options. I would not recommend full SSR generation bc it has bad performance, you have to try a custom implementation on the server side to fill those tags always watching the performance.

It requires some work when using these kind of frameworks, and Angular universa is specially heavy. Maybe you can use a proxy with fastify for do that job only in certain urls, or detecting the client device and calling this OG render server only for robots? using a proxy like nginx you can move robots trafic to OG render server and normal users to original HTML files.

Good Luck