Open Graph Viewer

Inspect a page's Open Graph / Twitter metadata and social cards, built as a Vue + Vite SPA.

Package: @devframes/plugin-og

What it does

Enter any HTTP/HTTPS URL. It resolves relative image/icon URLs, renders social cards for Twitter, Facebook, LinkedIn, and Telegram, and flags missing metadata with a Nuxt useSeoMeta() snippet.

The standalone server requires devframe's trust handshake; set auth: false only for isolated local use.

Standalone

pnpx @devframes/plugin-og

Mount into a Vite host

With Vite DevTools:

// vite.config.ts
import createOgDevframe from '@devframes/plugin-og'
import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    createPluginFromDevframe(createOgDevframe()),
  ],
})

Or use devframeVite(createOgDevframe()) from @devframes/vite/single.

Programmatic

createOgDevframe(options) returns a definition for any adapter:

import { createOgDevframe } from '@devframes/plugin-og'

export default createOgDevframe({
  defaultUrl: 'http://localhost:3000/about',
})

defaultUrl sets the initial target and bakes it into the static build.

RPC

Namespaced devframes:plugin:og:*:

Source

plugins/og