KAKAMU
BlogTag

URLからOGPを取得する

そもそも

Node.jsでURLからOGPを取得する関数。

Next.jsのサーバーサイドで実行するケースを想定している。

主な依存パッケージ

// node v20.x
"dependencies": {
    "jsdom": "25.0.1"
},
"devDependencies": {
    "@types/jsdom": "21.1.7",
    "typescript": "5.6.3"
}

fetch-ogp.ts

fetch-ogp.ts
import { JSDOM } from 'jsdom'
 
type Ogp = {
  baseUrl?: string
  title?: string
  description?: string
  imageSrc?: string
  iconUrl?: string
}
 
export const fetchOGP = async (url: string): Promise<Ogp | null> => {
  if (!url.startsWith('https://')) {
    return null
  }
 
  try {
    const jsdom = await JSDOM.fromURL(url)
    const document: Document = jsdom.window.document
 
    const metaElements = document.querySelectorAll(
      'meta[property="og:title"], meta[property="og:title"], meta[property="og:image"], link[rel="icon"]',
    )
 
    const ogp: Ogp = {}
 
    for (const metaElement of metaElements) {
      const property = metaElement.getAttribute('property')
      const content = metaElement.getAttribute('content')
      const rel = metaElement.getAttribute('rel')
      const location: Location = jsdom.window.location
      const baseUrl = location.origin
 
      ogp.baseUrl = baseUrl
 
      if (property === 'og:title') {
        ogp.title = content ?? undefined
      }
 
      if (property === 'og:description') {
        ogp.description = content ?? undefined
      }
 
      if (property === 'og:image') {
        ogp.imageSrc = content ?? undefined
      }
 
      if (rel === 'icon') {
        const href = metaElement.getAttribute('href')
        if (href) {
          ogp.iconUrl = `${baseUrl}${href}`
        }
      }
    }
    return ogp
  } catch (error) {
    console.error(error)
    return null
  }
}

参考リンク

jsdom

#IT