Open Graph Tools and Resources for Web Nerds (Like Me)

DEC

2022

Open Graph Tools and Resources for Web Nerds (Like Me)

ORIGINALLY POSTED TO: https://www.davidwesst.com/blog/open-graph-tools-and-resources-for-web-nerds

The Open Graph Protocol (OGP) is an open standard that allows web pages to have deeper integration with a social graph, such as Facebook, Twitter, or LinkedIn. You know those cards that appear on Twitter or LinkedIn with tailored images for a link to a blog post? That is OGP in action.

With my recent adventures with reimplementing my website, I wanted to leverage this on pages and posts, specifically with LinkedIn and it took a little more research to get it working right. So, for the web nerds like me looking to implement OGP on their projects, I wanted to share the resources I found useful to hopefully save them some time in finding the right resources.

`ogp.me`

I am calling this the specification, or "spec", and it probably the most important resource. The best part about this site is how approachable it is.

There are code snippets, explanations of all the object types and their properties, and its own list of tools (although they differ from the ones I am including on this list).

If you take one thing away from this post for your work with OGP, take this one.

Reference

Open Graph protocol page

LinkedIn (and Facebook) Post Inspectors

Both Facebook and LinkedIn provide a developer tool to analyze and verify your implemenation of OGP and has the added feature of busting whatever the social networks have cached for the pages you share.

These tools for triaging or assesing publically shared pages, but not so much when it comes to local development. That is where the next tool comes into play.

Reference

Social Share Preview Web Extension

Available for both Chromium Browsers and Firefox, this web extension allows you simulate what should appears for any page loaded up in your browser.

This tool saved me from having to continually publish the content to a public location for the post inspector, but note that it is just a simulation of what the tool thinks it should appear. It does not replace post inspector or proper testing on the site you are looking to share to.

Reference

Browser Dev Tools (Obviously)

If you are reading the post, then this one is an obvious one-- but sometimes we (like me) get so caught up on exploring new ways to solve my problem, we forget about the obvious ones.

OGP tags live in the <head> of your HTML page. If you are unsure why things are not working, make sure you run your browser dev tools of choice and check the <head> of the document and make sure the OGP tags you are expecting appear where they should be.

It seems simple, but depending on what tool, engine, or framework to output HTML, you may be surprised what shows up.

Reference

Open this post on a desktop browser and press the key combination Ctrl + Shift + i and you should see your browser dev tools pop open for the site.

Conclusion / TL;DR;

Read the aproachable spec document. That is the most important part takeaway from my OGP implemenation. It is very approachable and gives you a strong foundation to work from as you use other tools to triage and assess your implementation.

These are the tools I used to implement LinkedIn support, along with my browser dev tools.