Docs:
I wanted my preview to look cool when I share it. I recalled learning about OGP in the Meta Coursera course(https://www.coursera.org/learn/html-and-css-in-depth/paidmedia?specialization=meta-front-end-developer).
<!-- OGP tags -->
<meta property="og:title" content="Hey, I'm Jose. I build things with code" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<https://jose-barrera.com/>" />
<meta property="og:description" content="I'm an early-career software developer sharing my projects, experiments, and self-hosting journey. Always learning, always building." />
<meta property="og:image" content="<https://jose-barrera.com/assets/preview-card.png>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
I also went ahead and added in the twitter tags that I recently discovered.
<!-- Twitter tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Hey, I'm Jose. I build things with code" />
<meta name="twitter:description" content="I'm working on fun, functional tools. From web apps to homelab setups." />
<meta name="twitter:image" content="<https://jose-barrera.com/assets/preview-card.png>" />
To see if it worked, I used opengraph.xyz to preview the content of the tags. Here’s the preview for my site: https://www.opengraph.xyz/url/https%3A%2F%2Fjose-barrera.com
Pretty neat!