Sup y'all. Let's dive into the world of Open Graph (OG)
meta tags and how to extract them using JavaScript console. Here's a quick copypasta for you to get the OG Metadata on a website without using third party stuff:
Step 1: Open the JavaScript Console
First things first, you need to open your browser's JavaScript console. If you're using Chrome, just hit Ctrl + Shift + J
(Windows/Linux) or Cmd + Option + J
(Mac). If you're on Firefox, it's Ctrl + Shift + K
(Windows/Linux) or Cmd + Option + K
(Mac).
Step 2: Write a Function to Extract OG Meta Tags
Now, let's write a function to extract all the OG meta tags from the page. Here's a simple function that does just that:
function getOgMeta() { const metaTags = document.getElementsByTagName('meta'); let ogTags = {}; for (let i = 0; i < metaTags.length; i++) { if (metaTags[i].getAttribute('property') && metaTags[i].getAttribute('property').includes('og:')) { ogTags[metaTags[i].getAttribute('property')] = metaTags[i].getAttribute('content'); } } return ogTags; }
Step 3: Log the OG Meta Tags
Now, let's use console.log
to print out all the OG meta tags in a friendly manner:
const ogTags = getOgMeta(); for (let key in ogTags) { console.log(`Key: ${key}, Value: ${ogTags[key]}`); }
And that's it homies. You've just extracted and logged all the OG meta tags from a webpage using the JavaScript console. Keep in mind that not all websites use OG meta tags, so you might not always get results. Happy coding.