Node.js提取网页标题、图片及描述遇阻，link-preview-js失效如何解决？

问题原因 #

link-preview-js失效大概率是两个原因：

• 该库默认请求头未模拟浏览器，被USNews的反爬机制拦截
• 目标页面的元数据格式不符合库的解析逻辑，导致无法识别

手动提取方案（Axios + Cheerio） #

通过手动发送请求并解析HTML，能灵活适配目标页面的结构，绕过上述问题。

1. 安装依赖 #

npm install axios cheerio

2. 编写提取代码 #

const axios = require('axios');
const cheerio = require('cheerio');

async function extractPageMetadata(targetUrl) {
  try {
    // 发送请求时模拟浏览器UA，避免被拦截
    const response = await axios.get(targetUrl, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
      }
    });

    const $ = cheerio.load(response.data);

    // 提取标题：优先取Open Graph标签，降级到<title>
    const title = $('meta[property="og:title"]').attr('content') || $('title').text().trim();
    
    // 提取描述：优先og:description，降级到常规description元标签
    const description = $('meta[property="og:description"]').attr('content') 
      || $('meta[name="description"]').attr('content') 
      || '';

    // 提取图片：优先og:image，或者直接定位页面主图元素
    const image = $('meta[property="og:image"]').attr('content') 
      || $('div.ArcliteBody figure img').attr('src') 
      || '';

    return { title, description, image };
  } catch (err) {
    console.error('提取出错:', err.message);
    return null;
  }
}

// 调用示例
const url = 'https://www.usnews.com/education/best-colleges/articles/college-applications-are-on-the-rise-what-to-know';
extractPageMetadata(url).then(result => {
  if (result) {
    console.log('提取结果:', result);
  }
});

3. 关键说明 #

• 请求头设置：通过User-Agent模拟真实浏览器，避免被网站的反爬策略拦截
• 元数据优先级：优先使用Open Graph（og:xxx）标签，这类标签是专门为网页预览设计的，数据更准确；如果不存在，再降级到常规HTML标签或直接解析页面内的媒体元素
• 容错处理：每个提取步骤都做了备选方案，避免因某个元素缺失导致整个提取失败

进阶方案（动态页面适配） #

如果目标页面是JS动态渲染的（比如数据通过接口加载），可以用puppeteer模拟完整浏览器环境渲染页面后再解析：

npm install puppeteer

核心逻辑是启动无头浏览器，打开页面后再提取DOM内容，代码结构和上述类似，只是将Axios请求替换为Puppeteer的页面操作。

内容的提问来源于stack exchange，提问作者Inaara Kalani