\n OpenGraph Preview Tool\n

\n See how your URLs will appear when shared on social media platforms\n

\n\n

\n \n Enter URL to preview\n \n

\n setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n disabled={loading}\n />\n \n {loading &&

}\n {loading ? 'Loading...' : 'Preview'}\n \n

\n \n

\n Try these examples:\n {exampleUrls.map((exampleUrl, index) => (\n handleExampleUrl(exampleUrl)}\n className=\"text-sm text-blue-600 hover:text-blue-800 underline\"\n disabled={loading}\n >\n {new URL(exampleUrl).hostname}\n \n ))}\n

\n\n {error && (\n

❌

Error

{error}

\n )}\n\n {result && result.success && result.data && (\n

\n Preview Results\n

\n {result.hasOpenGraph \n ? '✅ OpenGraph tags found and parsed successfully'\n : '⚠️ No OpenGraph tags found - showing fallback preview'\n }\n

\n URL: {result.url}\n

\n\n

\n \n \n \n \n

\n\n {/* Debug information */}\n

\n 🔍 Raw OpenGraph Data (for debugging)\n

\n              {JSON.stringify(result.data, null, 2)}\n

\n )}\n\n

\n This tool fetches and displays OpenGraph metadata from web pages.\n
\n It shows how your content will appear when shared on social media platforms.\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/hrbrmstr/og/code/frontend/components/App.tsx","extension","actionData","errors"]