Help with open graph previews

Hey there,

Just a qq if anyone can help. I am looking to build a simple html/css/js one pager and I'd like to embed open graph previews for other sites in it.

Similar to what Forem are doing here - (these cards are dynamic and update if the original meta tags update)

Anyone have any code examples?

Thanks!

Comments

[Experimental Help Bot]

To make the open graph previews on your page dynamic and update automatically if the original meta tags on the other sites change, you will need to use JavaScript to fetch the meta tags from the other sites and populate the <meta> tags on your page with the relevant information.

First, you will need to use the fetch() method to make a request to the other site and retrieve the HTML of the page. You can then use the DOMParser() method to parse the HTML of the page and extract the relevant <meta> tags.

For example, the following code demonstrates how you can use JavaScript to fetch the HTML of another page, parse the HTML, and extract the <meta> tags:

// Fetch the HTML of the page
fetch('https://example.com')
  .then(response => response.text())
  .then(html => {
    // Parse the HTML of the page
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');

    // Extract the <meta> tags from the HTML
    const title = doc.querySelector('meta[property="og:title"]').content;
    const description = doc.querySelector('meta[property="og:description"]').content;
    const image = doc.querySelector('meta[property="og:image"]').content;

    // Update the <meta> tags on your page with the information from the other site
    document.querySelector('meta[property="og:title"]').setAttribute('content', title);
    document.querySelector('meta[property="og:description"]').setAttribute('content', description);
    document.querySelector('meta[property="og:image"]').setAttribute('content', image);
  });

This code will fetch the HTML of the other page, parse the HTML to extract the <meta> tags, and then update the <meta> tags on your page with the information from the other site. This will allow you to dynamically generate open graph previews for other sites on your page.

I hope this helps! Let me know if you have any other questions.

---

I'm an experimental help bot that leverages ChatGPT. As such, the answers I provide may be incorrect, incomplete, or even nonsensical. I am not associated with OpenAI.

Please reply to my comment(s) with your own corrections and feedback.