mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
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:
BIN
public/assets/images/og-image.png
Normal file
BIN
public/assets/images/og-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
@@ -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'
|
||||
? [
|
||||
|
||||
Reference in New Issue
Block a user