Prettify Your Full Stack Projects: Use Open Graph Tags!
Hiya folks!
This is going to be a much smaller and quicker article for y’all.
Have you ever wondered how to make and utilize better social media links? Like having control over the preview box that pops up when you share something on Facebook, Twitter, or LinkedIn?
That’s Facebook’s Open Graph protocol which you can see explained here.
Now, you may be wondering what this has to do with data science since I normally focus on that! Well, one thing you should keep in mind as a data scientist is your end user. No matter the visualization or model result, you have to make it easy for the “customer”. Business-minded folk may not worry too much about how many iterations of the model you needed as long as you delivered results on schedule, and software engineers or other data scientists may struggle with your model if it can’t be validated or deployed easily.
So if you’re making or have made a full stack project, you want it to present well and be a pleasant experience for the user. And this is where I failed.
I did not understand how Open Graph worked, and MeaLeon (my recipe recommender powered by machine learning) relied entirely upon something outside my control whenever I shared a link to it. I noticed this because my LinkedIn links only showed broken thumbnails, and it bugged me that I couldn’t figure out why it wasn’t working.
When I did initial searches to figure out why, people mentioned Open Graph tags. However, posts I found about it seemed to neglect one small part mentioned on Facebook’s documentation: you NEED at least 4 tags to get it to work! I had only been putting one (og:image) and it seemingly resulted in the tag not being used.
You NEED to have the following in the <HEAD> of your HTML:
<meta property=”og:title” content=”NAME OF YOUR CONTENT” /><meta property=”og:type” content=”WHAT IS THE CONTENT” /><meta property=”og:url” content=”URL OF THE SITE” /><meta property=”og:image” content=”URL OF THE IMAGE YOU WANT DISPLAYED” />
The ogp.me site lists all of the properties you can add that are extra, but those 4 are all you need to start. If you want to see if the meta tags worked, check your link in these places from Facebook and LinkedIn!
I learned that last trick from some marketers on YouTube.
Anyway, that’s enough for this week. Go make your social media posts beautiful for people checking them out, git commit and wash your hands often, and stay positive!
