//====================================================================
//                   ██████╗  ██████╗
//                  ██╔═══██╗██╔════╝
//                  ██║   ██║██║  ███╗█████╗
//                  ██║   ██║██║   ██║╚════╝
//                  ╚██████╔╝╚██████╔╝
//                   ╚═════╝  ╚═════╝
//              ███████╗ █████╗ ███████╗██╗   ██╗
//              ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝
//              █████╗  ███████║███████╗ ╚████╔╝
//              ██╔══╝  ██╔══██║╚════██║  ╚██╔╝
//              ███████╗██║  ██║███████║   ██║
//              ╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝
//                                                          ◎     ◎
//          ╔╗ ┬ ┬  ╔╗╔┌─┐┬─┐┌─┐┌─┐  ╔═╗┌┬┐┌─┐┬┌─┌─┐         \   /
//          ╠╩╗└┬┘  ║║║│ │├┬┘├─┤├─┤  ╚═╗ │ │ │├┴┐├┤        o(👁 👁)o
//          ╚═╝ ┴   ╝╚╝└─┘┴└─┴ ┴┴ ┴  ╚═╝ ┴ └─┘┴ ┴└─┘       🦾  🫦  🤳
//                     MIT LICENSE                            /  \
//                                                           🛼   🛼
//     AUTHOR GITHUB: http://github.com/noraa-july-stoke
//     PROJECT REPO: https://github.com/noraa-july-stoke/og-easy
//====================================================================
//    An easy to use api for getting site metadata to display link
//    previews. It looks for Opengraph tags first, and also
//    provides an "alt" object for convenience/choice, and/or
//    the case of the site not being compliant with OpenGraph
//    protocol.
//====================================================================

og-easy

The og-easy package provides a simple, lightweight and easy-to-use API for getting Open Graph data from a URL. It includes an "alt" object that provides alternatives in case something is wrong with the site's meta/og tags.

Installation

1npm install og-easy

Usage

Here is an example route you can implement on the backend

1// To use `og-easy`, you can simply require it in your code:
2const express = require("express");
3const getSiteMetaData = require("og-easy");
4
5const router = express.Router();
6
7// and then implement it in your route as follows:
8//==================================================================================
9// Fetches URL previews from opengraph API
10//==================================================================================
11router.get("/opengraph-preview", async (req, res) => {
12  const url = req.query?.url;
13  if (url) {
14    try {
15      const metadata = await getSiteMetaData(url);
16      res.status(200).json(metadata);
17    } catch (error) {
18      console.error(error);
19      res.status(500).send("Error retrieving metadata");
20    }
21  }
22  else res.status(404).send("No url found");
23});
24
25module.exports = router;
26
27

This will return an object containing the Open Graph metadata for the website, along with some alternative metadata if no Open Graph metadata is found.

The object looks like this and should always have backup alt properties:

1{
2  og: {
3    title: 'Example Title',
4    description: 'Example Description',
5    image: 'https://example.com/example.jpg',
6    url: 'https://example.com'
7  },
8  alt: {
9    title: 'Example Title',
10    description: 'Example Description',
11    image: 'https://example.com/example.jpg',
12    url: 'https://example.com'
13  }
14}
15

You can then access the metadata fields like this:

1console.log(metadata.og.title);
2console.log(metadata.alt.title);

1
2router.get("/opengraph-preview", async (req, res) => {
3
4}

React Component

Here is an example react component that utilizes this method:

1
2import React, { useState, useEffect } from "react";
3import axios from "axios";
4
5  const fetchOpenGraphData = async (url) => {
6  try {
7    const response = await axios.get("/api/microservices/opengraph-preview", { params: { url } });
8    return response.data;
9  } catch (error) {
10    console.error(error);
11  }
12};
13
14
15const PostLink = ({ url }) => {
16  const [linkData, setLinkData] = useState({});
17
18
19  useEffect(() => {
20    const fetchData = async () => {
21      const data = await fetchOpenGraphData(url);
22      setLinkData(data);
23    };
24    fetchData();
25  }, [url]);
26
27  const {og, alt} = linkData;
28  const title = og?.title || alt?.title;
29  const image = og?.image || alt?.image;
30  const description = og?.description || alt?.description;
31  const siteUrl = og?.url || alt?.url;
32
33  return (
34    <div className="post-link-container">
35      <a href={siteUrl} target="_blank" rel="noopener noreferrer">
36        {image && <img src={image} alt={title} />}
37        <div className="post-link__info">
38          <h2 style={{color: "black"}}>{title}</h2>
39          {description && <p>{description}</p>}
40        </div>
41      </a>
42    </div>
43  );
44};
45export default PostLink;
46
47