Code to Extract the Site Thumbnail Image for Twitter or Facebook

To extract a site thumbnail (often referred to as Open Graph or Twitter Card image) from an HTML string, we need to look for specific <meta> tags that are commonly used for social media sharing on platforms like Facebook and Twitter. These tags include Open Graph (og:image) and Twitter Card (twitter:image) meta tags.

Open Graph is a protocol originally created by Facebook that allows web pages to become rich objects within social media platforms. By using Open Graph meta tags in the HTML <head> of a webpage, developers can control how their content is displayed when shared on social media networks such as Facebook, LinkedIn, Twitter, and others that support the protocol.

Twitter Card is a metadata protocol used by Twitter to display rich media (like images, videos, and previews) when a link to a webpage is shared on the platform. By adding specific meta tags to the <head> section of a webpage's HTML, developers can control how content appears in tweets, making it more engaging and visually appealing.

Code to Extract the Thumbnail Image for Twitter or Facebook:

function getSiteThumbnailFromHtml(html) {
  // Create a DOM parser to parse the HTML string
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');

  // Look for Open Graph image or Twitter Card image meta tags
  const ogImage = doc.querySelector('meta[property="og:image"]');
  const twitterImage = doc.querySelector('meta[name="twitter:image"]');
  
  // Return the content of the first found image
  if (ogImage) {
    return ogImage.getAttribute('content');
  } else if (twitterImage) {
    return twitterImage.getAttribute('content');
  } else {
    return null; // No thumbnail found
  }
}

// Example HTML input (replace with your HTML content)
const htmlText = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta name="twitter:image" content="https://example.com/twitter-image.jpg">
  <title>Example Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>
`;

// Extract the site thumbnail
const thumbnailUrl = getSiteThumbnailFromHtml(htmlText);
console.log(thumbnailUrl); // Outputs: "https://example.com/og-image.jpg"

How It Works:

1. DOMParser: Converts the HTML string into a DOM object.
2. meta[property="og:image"]: Searches for the Open Graph image meta tag, which is commonly used by Facebook and other social platforms.
3. meta[name="twitter:image"]: Searches for the Twitter Card image meta tag, which is specifically used by Twitter.
4. getAttribute('content'): Retrieves the image URL from the content attribute of the first found meta tag.
5. Returns the Image URL: The function returns the first image it finds from the two tags, prioritizing the Open Graph image (og:image) if both are present.

Explanation of Meta Tags:

• Open Graph (og:image): Used by Facebook and other platforms like LinkedIn to define the image that will be used when a page is shared on social media.

  <meta property="og:image" content="https://example.com/og-image.jpg">
  

• Twitter Card (twitter:image): Used by Twitter to specify the image that should be displayed in a tweet when a link to the page is shared.

  <meta name="twitter:image" content="https://example.com/twitter-image.jpg">
  

Notes:

• If both meta tags are present, the Open Graph image will take priority in the function. You can modify the logic if you want to prioritize Twitter's image or handle both in some other way.
• If neither tag is found, the function returns null.