search

tbakerx / react-resume-template

A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css
https://reactresume.com
MIT License
1.88k stars 1.43k forks source link

Is there a way to specify og:image? #119

Closed claym closed 11 months ago

claym commented 11 months ago

Do you have a good way of specifying an og:image in meta tags?

Teddy-van-Jerry commented 11 months ago

After the release of Next 13, my suggestion would be to upgrade to app router (instead of page router), and then there is Metadata provided by Next for integrating og:image in meta tags. Check out the migration link here: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration

tbakerx commented 11 months ago

This ☝🏼 is a good and more complete option until I have a chance to update the template itself. As an alternative and simpler solution, there is an ogImageUrl attribute available in the HomepageMeta interface in data.tsx. You can set this with an image hosted elsewhere, or put your image in the /src/images folder and import it as I've done with the portfolio and other items in data.tsx.

As a note if you go this route, there is also a twitterImageUrl attribute that functions the same but will work for twitter share cards.