DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
James Bubb
James Bubb

Posted on

3 2

How to make an Open Graph Scraper (Node, XPath, JavaScript)

Originally published here on YouTube.
(Give me a thumbs up and subscribe if you found this useful ๐Ÿ™).

01:41 App Setup
04:57 Back end
14:07 Front end

โ€” Follow Me โ€”
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
โ€” Thanks! โ€”

In the video we're going to make an open graph scraper which could potentially be created in just client-side code however most requests to access a web url would be blocked in the browser so we'll send a request for a URL from a Node.js back end.

The Node server will also parse our open graph data with XPath and reconstruct the data in to a JavaScript object which we can then send to the client as JSON data.

Our VanillaJS front-end will consume the response from our API endpoint and we'll display the open graph data using a simple front-end.

This might not be the kind of app that you create as a standalone project but there might be a need in a larger application to parse some data from an external web page and you can certainly use these principals of using an open graph scraper to get data from a web page into an object to be used in either your server side or client side code.

Check out the rest of the Junior Developer Central Full Stack Apps here: https://www.youtube.com/watch?v=m2ZzRZemc98&list=PLpc_YvcwbxaTSuBQZkJdt7UKsWAC9wyR2

Image of PulumiUP 2025

From Cloud to Platforms: What Top Engineers Are Doing Differently

Hear insights from industry leaders about the current state and future of cloud and IaC, platform engineering, and security.

Save Your Spot

Top comments (0)

๐Ÿ‘‹ Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someoneโ€™s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay