📌  相关文章
📜  openGraph 3 - Html (1)

📅  最后修改于: 2023-12-03 15:18:07.663000             🧑  作者: Mango

OpenGraph 3 - HTML

OpenGraph is a protocol that allows web developers to add rich information to their markup, which can be previewed on social media platforms like Facebook, Twitter, and LinkedIn. OpenGraph 3 – HTML is a simple and powerful HTML parser that can extract and manipulate OpenGraph meta tags.

Features
  • Easy-to-use API for parsing and manipulating OpenGraph meta tags.
  • Compatible with all modern browsers.
  • Simple and intuitive syntax.
Installation
<script src="https://unpkg.com/open-graph-3/dist/open-graph-3.min.js"></script>
Usage

To use OpenGraph 3 – HTML, simply include the script in your HTML code and call OpenGraph3.parse():

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenGraph 3 - HTML</title>
    <meta property="og:title" content="My Webpage">
    <meta property="og:description" content="Lorem ipsum dolor sit amet.">
    <meta property="og:image" content="http://example.com/image.jpg">
    <script src="https://unpkg.com/open-graph-3/dist/open-graph-3.min.js"></script>
    <script>
      const og = OpenGraph3.parse();
      console.log(og.title); // My Webpage
      console.log(og.description); // Lorem ipsum dolor sit amet.
      console.log(og.image); // http://example.com/image.jpg
    </script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
API
OpenGraph3.parse()

OpenGraph3.parse() can be called without any arguments to parse the current page's OpenGraph meta tags.

const og = OpenGraph3.parse();
OpenGraph3.parse(html)

OpenGraph3.parse(html) can be called with an optional html argument to parse OpenGraph meta tags from an HTML string.

const html = '<html><head><meta property="og:title" content="My Webpage"></head><body><h1>Hello World!</h1></body></html>';
const og = OpenGraph3.parse(html);
OpenGraph3.create(meta)

OpenGraph3.create(meta) can be called with an object of OpenGraph meta tag information to create an HTML string with the corresponding meta tags.

const meta = {
  title: 'My Webpage',
  description: 'Lorem ipsum dolor sit amet.',
  image: 'http://example.com/image.jpg',
};
const html = OpenGraph3.create(meta);
Conclusion

OpenGraph 3 - HTML is a fantastic tool for developers who want to add rich information to their website. With its simple and intuitive API, you can easily parse and manipulate OpenGraph meta tags. Whether you're building a personal blog or an enterprise-level web application, OpenGraph 3 - HTML is a must-have tool for optimizing your site's social media presence.