feat: Add Open Graph and Twitter meta tags for cloud distribution (#6571)

## Summary
- Add meta tags plugin for social media previews (Twitter, Facebook,
LinkedIn, etc.)
- Include SEO meta tags (title, description, keywords)
- Only applies to cloud distribution (`DISTRIBUTION === 'cloud'`)

## Changes
- Added Open Graph meta tags for better social media link previews
- Added Twitter Card meta tags for Twitter sharing
- Added SEO meta tags (title, description, keywords)
- Added `og-image.png` for preview image
- Meta tags only inject when `DISTRIBUTION === 'cloud'` to avoid
affecting other distributions

## Test plan
- [x] Build with `DISTRIBUTION=cloud pnpm build`
- [x] Verify meta tags appear in built HTML
- [ ] Test link sharing on Twitter, Facebook, Slack
- [ ] Verify meta tags don't appear in localhost/desktop builds

🤖 Generated with Claude Code

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6571-feat-Add-Open-Graph-and-Twitter-meta-tags-for-cloud-distribution-2a16d73d365081e58c73f6009513b2bb)
by [Unito](https://www.unito.io)
This commit is contained in:
Jin Yi
2025-11-05 00:18:17 +09:00
committed by GitHub
parent c2150c6046
commit 2c4280a28d
2 changed files with 93 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 KiB

View File

@@ -27,6 +27,15 @@ const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
const DISABLE_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true'
const GENERATE_SOURCEMAP = process.env.GENERATE_SOURCEMAP !== 'false'
// Open Graph / Twitter Meta Tags Constants
const VITE_OG_URL = 'https://cloud.comfy.org'
const VITE_OG_TITLE =
'Comfy Cloud: Run ComfyUI online | Zero Setup, Powerful GPUs, Create anywhere'
const VITE_OG_DESC =
'Bring your creative ideas to life with Comfy Cloud. Build and run your workflows to generate stunning images and videos instantly using powerful GPUs — all from your browser, no installation required.'
const VITE_OG_IMAGE = `${VITE_OG_URL}/assets/images/og-image.png`
const VITE_OG_KEYWORDS = 'ComfyUI, Comfy Cloud, ComfyUI online'
// Auto-detect cloud mode from DEV_SERVER_COMFYUI_URL
const DEV_SERVER_COMFYUI_ENV_URL = process.env.DEV_SERVER_COMFYUI_URL
const IS_CLOUD_URL = DEV_SERVER_COMFYUI_ENV_URL?.includes('.comfy.org')
@@ -222,6 +231,90 @@ export default defineConfig({
: [vue()]),
tailwindcss(),
comfyAPIPlugin(IS_DEV),
// Twitter/Open Graph meta tags plugin (cloud distribution only)
{
name: 'inject-twitter-meta',
transformIndexHtml(html) {
if (DISTRIBUTION !== 'cloud') return html
return {
html,
tags: [
// Basic SEO
{ tag: 'title', children: VITE_OG_TITLE, injectTo: 'head' },
{
tag: 'meta',
attrs: { name: 'description', content: VITE_OG_DESC },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { name: 'keywords', content: VITE_OG_KEYWORDS },
injectTo: 'head'
},
// Twitter Card tags
{
tag: 'meta',
attrs: { name: 'twitter:card', content: 'summary_large_image' },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { name: 'twitter:title', content: VITE_OG_TITLE },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { name: 'twitter:description', content: VITE_OG_DESC },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { name: 'twitter:image', content: VITE_OG_IMAGE },
injectTo: 'head'
},
// Open Graph tags (Twitter fallback & other platforms)
{
tag: 'meta',
attrs: { property: 'og:title', content: VITE_OG_TITLE },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { property: 'og:description', content: VITE_OG_DESC },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { property: 'og:image', content: VITE_OG_IMAGE },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { property: 'og:url', content: VITE_OG_URL },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { property: 'og:type', content: 'website' },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { property: 'og:site_name', content: 'Comfy Cloud' },
injectTo: 'head'
},
{
tag: 'meta',
attrs: { property: 'og:locale', content: 'en_US' },
injectTo: 'head'
}
]
}
}
},
// Skip import-map generation for cloud builds to keep bundle small
...(DISTRIBUTION !== 'cloud'
? [