Thursday - February 24, 2022 - 08:46:02 (E.S.T.) - 8th Blog Entry

How I Added Open Graph Link Previews

A quick note on web development. Learned how to get that cool link preview when you send a link to a friend or post a link to facebook. There's a thing called Open Graph meta tags, which you use to specify the requirements for your tag. For instance, your title, description and image are the typical use scenario. They look like this:

<meta property="og:title" content="Ryan O'Connors Technical Blog" />
<meta property="og:description" content="Read about my technical journey as I tackle technical subjects." />
<meta property="og:image" content="http://(website_here)" />

You plug these right into the <head/> section of your website, and it will populate whenever you send or post a link to your buddy. Pretty cool! You can read more about Open Graph Meta Tags here. Upon testing out my open graph link on Facebook, I found this cool site for developers. It will scrape your website, and also give you a preview of your open graph to verify it works.