<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>MetaTags</title>
    <meta property="twitter:description" content="twitter:description" />
    <meta property="og:description" content="og:description" />
    <meta name="description" content="description" />
    <meta name="unknown:tag" content="unknown:tag" />
    <meta property="og:image" content="https://test.com/og-image.jpg" />
    <meta property="twitter:image" content="https://test.com/twitter-image.jpg" />
    <meta property="og:image:url" content="https://test.com/og-image-url" />
    <meta name="thumbnail" content="https://test.com/thumbnail.jpg" />
  </head>
  <body>
    <script>
      function addMeta(tag) {
        const meta = document.createElement("meta");
        meta.content = "https://test.com/og-image-secure-url.jpg";
        meta.setAttribute("property", tag);
        document.head.appendChild(meta);
      }

      // Delay adding this "best" image tag to test that later tags are used.
      // Use a delay that is long enough for tests to check for wrong metadata.
      setTimeout(() => addMeta("og:image:secure_url"), 100);
    </script>
  </body>
</html>
