{"id":17782,"library":"link-preview-js","title":"Link Preview JS","description":"link-preview-js is a JavaScript/TypeScript module designed to extract and fetch rich HTTP link information, such as title, description, images, and videos, primarily leveraging OpenGraph tags. It processes either direct URLs or text blocks containing URLs to return structured metadata. The library is currently on stable version 4.0.0 and demonstrates an active release cadence with frequent updates. A key differentiator is its explicit focus on server-side execution (Node.js >=18 environments) or specific mobile runtimes (like React Native/Cordova), strictly advising against direct client-side usage due to browser-enforced Cross-Origin Resource Sharing (CORS) policies. It also provides a utility to parse already-fetched HTML content.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/ospfranco/link-preview-js","tags":["javascript","link","url","http","preview","typescript"],"install":[{"cmd":"npm install link-preview-js","lang":"bash","label":"npm"},{"cmd":"yarn add link-preview-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add link-preview-js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily uses ES Modules. For Node.js environments supporting ES Modules (>=18), use the 'import' syntax. CommonJS 'require' will not work directly.","wrong":"const { getLinkPreview } = require('link-preview-js');","symbol":"getLinkPreview","correct":"import { getLinkPreview } from 'link-preview-js';"},{"note":"Both `getLinkPreview` and `getPreviewFromContent` are named exports. There is no default export.","wrong":"import getPreviewFromContent from 'link-preview-js';","symbol":"getPreviewFromContent","correct":"import { getPreviewFromContent } from 'link-preview-js';"},{"note":"For TypeScript users, import the `LinkPreview` interface for type hinting of the returned data object.","symbol":"LinkPreview","correct":"import type { LinkPreview } from 'link-preview-js';"}],"quickstart":{"code":"import { getLinkPreview, getPreviewFromContent } from 'link-preview-js';\n\n// Example 1: Directly fetching a link\ngetLinkPreview('https://www.youtube.com/watch?v=MejbOFk7H6c').then((data) => {\n console.log('Link preview data:', data);\n}).catch(error => {\n console.error('Error fetching link preview:', error.message);\n});\n\n// Example 2: Fetching from a text block\nconst textWithLink = 'Check out this video: https://www.youtube.com/watch?v=MejbOFk7H6c and some more text.';\ngetLinkPreview(textWithLink).then((data) => {\n console.log('Link preview from text:', data);\n}).catch(error => {\n console.error('Error fetching link preview from text:', error.message);\n});\n\n// Example 3: Parsing pre-fetched HTML content\n// In a real application, 'yourAjaxCall' would be your server-side fetch.\nconst mockResponse = {\n data: 'Mock Title',\n headers: {\n 'content-type': 'text/html; charset=utf-8'\n },\n url: 'https://example.com/mock-page'\n};\n\ngetPreviewFromContent(mockResponse).then((data) => {\n console.log('Link preview from content:', data);\n}).catch(error => {\n console.error('Error fetching link preview from content:', error.message);\n});","lang":"typescript","description":"This quickstart demonstrates how to use `getLinkPreview` with both a direct URL and a text string, and `getPreviewFromContent` for pre-fetched HTML, showcasing basic usage and error handling."},"warnings":[{"fix":"Review how URLs are constructed and passed to `getLinkPreview`. Ensure they adhere to standard URL specifications. If encountering issues, validate URLs before passing them to the function.","message":"Version 4.0.0 migrates internal URL handling to the standard WHATWG URL API. While this improves robustness and compliance, it might subtly change parsing behavior for malformed or non-standard URLs compared to previous versions. Ensure your input URLs are well-formed.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Always run this library on your backend server. If you need link previews in a web application, implement an API endpoint on your server that calls `link-preview-js` and then serves the results to your frontend.","message":"This library is strictly intended for server-side (Node.js) or specific mobile runtime usage (e.g., React Native, Cordova). Attempting to use `getLinkPreview` directly in a browser environment will fail due to browser security policies (Cross-Origin Resource Sharing - CORS).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider trying different `User-Agent` headers (e.g., 'Googlebot', 'Twitterbot') via the options object to see if the target site serves different content to known bots. However, there's no universal fix for all redirect scenarios.","message":"The preview process simulates a user visiting a page. If a target website redirects to a login page, consent screen, or another intermediary page, the library will parse that redirected content instead of the intended page, leading to incorrect preview data.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"No direct fix for missing OpenGraph tags on target sites. Understand that some links may yield minimal data. You can inspect the returned data and apply custom fallbacks if certain fields are missing.","message":"The library primarily relies on OpenGraph (OG) tags for extracting metadata. If a target website does not implement OpenGraph tags, the preview will be less accurate or incomplete, despite some fallbacks.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your Node.js environment is updated to version 18 or newer. Use `nvm` or similar tools to manage Node.js versions efficiently.","message":"The minimum required Node.js version has been updated to `^18.0.0`. Older Node.js versions are no longer supported, which might cause compatibility issues if deployed in an older environment.","severity":"breaking","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Move `link-preview-js` usage to a backend server (Node.js) and create an API endpoint to fetch and return the preview data to your frontend.","cause":"Attempting to use `link-preview-js` directly in a browser environment, triggering browser security (CORS).","error":"Access to fetch at 'https://example.com' from origin 'https://your-app.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."},{"fix":"Ensure you are using named imports correctly: `import { getLinkPreview } from 'link-preview-js';` and that your environment supports ESM (Node.js >=18 with appropriate `type: 'module'` in package.json or transpilation).","cause":"Incorrect import syntax, typically trying to use CommonJS `require` or a default import for a named export in an ESM context.","error":"TypeError: (0 , link_preview_js_1.getLinkPreview) is not a function"},{"fix":"This is a common behavior. Try passing a different `User-Agent` string in the options (e.g., mimicking a search engine bot) to see if the website serves different content. There is no guaranteed fix as websites can implement various anti-scraping measures.","cause":"The target website redirected to a login or consent page, and the library parsed that page instead of the intended content.","error":"The link preview data is empty or incorrect, showing login page content."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}