@jcottam/html-metadata is a JavaScript library that simplifies the extraction of HTML meta and Open Graph tags from HTML content or URLs. These tags provide structured metadata for webpages, useful for social media sharing and SEO purposes.
The library is compatible with both server and browser environments, supporting ES6 and CommonJS module systems. ES6 modules are suitable for modern browsers, while CommonJS modules are commonly used in server-side JavaScript environments like Node.js.
Contributions to this open-source project are welcome.
- Lightning-fast performance for optimal efficiency.
- Versatile compatibility with both Node.js and web browsers.
- Effortlessly extract HTML meta and Open Graph tags from HTML code or URLs.
- Seamlessly parse and access metadata such as
og:title,og:description,og:image,favicon, and more. - Developed using TypeScript to ensure robust type safety.
- Simple integration into web applications for hassle-free implementation.
- Comprehensive support for error handling and customization options.
Please report bugs by filing an issue. Contribute to the project by following the guidelines outlined in the contributing section.
npm install @jcottam/html-metadataES6 and CommonJS syntax supported. Examples below are in CommonJS syntax.
const { extractFromUrl } = require("@jcottam/html-metadata")
extractFromUrl("https://www.retool.com").then((data) => console.log(data))Useful in serverless environments like Cloudflare Workers where server-side fetches and Response objects are at play.
const { extractFromHTML } = require("@jcottam/html-metadata")
const data = extractFromHTML(
"<html><head><meta property='og:title' content='Hello World' /></head></html>"
)extractFromHTML: (html: string, options?: Options) => ExtractedDataextractFromUrl: (url: string, options?: Options) =>
Promise<ExtractedData | null>type Options = {
timeout?: number // fetch timeout in milliseconds
metaTags?: string[] // list of meta tags to extract
}
type ExtractedData = {
[key: string]: string
}{
"og:type": "website",
"og:url": "https://retool.com/",
"og:title": "Retool | The fastest way to build internal software.",
"og:description": "Retool is the fastest way to build internal software. Use Retool's building blocks to build apps and workflow automations that connect to your databases and APIs, instantly.",
"og:image": "https://d3399nw8s4ngfo.cloudfront.net/og-image-default.webp",
"favicon": "/favicon.png",
"twitter:card": "summary_large_image",
"twitter:creator": "@retool",
"twitter:title": "Retool | The fastest way to build internal software.",
"twitter:description": "Retool is the fastest way to build internal software. Use Retool's building blocks to build apps and workflow automations that connect to your databases and APIs, instantly.",
"twitter:image": "https://d3399nw8s4ngfo.cloudfront.net/og-image-default.webp"
}To circumvent CORS (Cross-Origin Resource Sharing) issues, one approach is to execute the extractFromUrl function from a server-side environment. Alternatively, if you are working in a browser-based setting, you can proxy the request through a free service such as allorigins.win.
For instance, you can use the following URL format to access the desired resource: https://api.allorigins.win/get?url=https://www.retool.com. This will allow you to retrieve the necessary data without running into CORS restrictions. By leveraging this method, you can effectively work around CORS limitations and access the desired information seamlessly.
The module utilizes the following third-party tools for testing and functionality:
- Vitest: Next-generation testing framework.
- Cheerio: A fast, flexible, and lean implementation of core jQuery designed for server-side Node.js.
- Markdwown-Badges: Badges for your personal developer branding, profile, and projects.
We welcome contributions to the @jcottam/html-metadata module! If you'd like to contribute, please follow these guidelines:
- Fork the repository and create a branch.
- Make your changes and ensure that the code style and tests pass.
- Submit a pull request with a detailed description of your changes.
Click on the "Fork" button in the top right corner of the repository page. This will create a copy of the repository under your GitHub account.
git clone https://github.com/your-username/@jcottam/html-metadata.gitCreate a new branch to work on your changes:
git checkout -b feature-branchMake your desired changes to the codebase, documentation, or any other relevant files.
npm install
npm run buildnpm run test- Stage the changes you have made:
git add .- Commit the staged changes with a descriptive message:
git commit -m "Add feature XYZ"git push origin feature-branch- Visit your forked repository on GitHub.
- Click on the "New pull request" button next to the branch selection drop-down.
- Select the base branch (usually the main branch of the original repository) and the compare branch (your feature branch).
- Provide a descriptive title and detailed description of your changes in the pull request.
- Click on the "Create pull request" button to submit your pull request for review.
- The maintainers of the original repository will review your pull request.
- Any feedback or changes required will be communicated through comments on the pull request.
- Once the changes are approved, your pull request will be merged into the main repository.