分享链接时Open Graph显示默认/空白 如何实现每页动态配置

核心问题原因 #

• 现有OG标签属性使用不规范，og前缀标签应统一使用property属性而非name属性
• 动态数据缺少兜底逻辑，数据请求异常时会导致OG内容为空
• OG图片使用相对路径不符合协议要求，必须为完整可访问的绝对URL
• 若项目为SPA单页应用模式，爬虫不会执行客户端JS渲染动态meta，需调整渲染模式

修正后的代码 #

asyncData部分 #

async asyncData({ route, app }) {
  const appData = await 'my API call for data'
  // 增加兜底默认值，避免数据为空时变量未定义
  return {
    pageTitle: appData?.title || '默认页面标题',
    pageThumbnail: appData?.thumbnail || '',
  }
},

head部分 #

head() {
  const title = `${this.pageTitle} | SiteName`
  // 替换为你的站点域名，用于拼接完整图片路径
  const baseDomain = 'https://你的实际域名.com'
  const ogImage = this.pageThumbnail || `${baseDomain}/本地图片的完整路径.png`
  return {
    title,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: '默认页面描述',
      },
      // 所有og前缀标签统一用property属性
      {
        hid: 'og:type',
        property: 'og:type',
        content: 'website',
      },
      {
        hid: 'og:title',
        property: 'og:title',
        content: title,
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: '页面描述内容，可替换为动态字段',
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: ogImage,
      },
      // 补充OG图片宽高，提高抓取成功率
      {
        hid: 'og:image:width',
        property: 'og:image:width',
        content: '1200'
      },
      {
        hid: 'og:image:height',
        property: 'og:image:height',
        content: '630'
      },
      // 补充og:url，避免重复抓取
      {
        hid: 'og:url',
        property: 'og:url',
        content: process.server ? `${baseDomain}${route.fullPath}` : window.location.href
      }
    ],
  }
},

额外注意事项 #

• 如果项目使用Nuxt SPA模式，需要切换为SSR（服务端渲染）或SSG（静态站点生成）模式，保证爬虫请求时返回的HTML源码中已经包含渲染完成的meta标签
• 验证时直接使用curl 页面地址查看返回的HTML源码中的meta内容，不要使用浏览器开发者工具查看，浏览器中显示的是客户端JS执行后的结果，和爬虫拿到的内容不一致
• OG图片建议使用1200*630尺寸的JPG/PNG格式，文件大小不超过8M，保证所有平台都能正常抓取展示

内容的提问来源于stack exchange，提问作者DHAVAL KANJARIYA