在线 Open Graph 标签生成器

关于此工具

Open Graph 标签是页面 `` 中一小段额外的 `` 标签，用来告诉 Facebook、LinkedIn、Discord、Slack 等大多数平台，当有人分享该网址时应该如何渲染链接预览——显示哪个标题、描述和图片，而不是一个光秃秃的链接。如果没有这些标签，大多数平台会退而求其次，根据页面自身的 `` 和第一张图片来猜测，效果往往不准确或不完整。</p><p data-astro-cid-zpu62n3h>这个生成器会为你构建 `og:title`、`og:description`、`og:url`、`og:image`、`og:type` 以及可选的 `og:site_name` 标签，并提供一个近似展示卡片通常渲染效果的实时预览。由于渲染细节（图片裁剪、字符限制、缓存行为）在各平台之间略有不同，在大范围发布之前，仍然值得用目标平台自带的调试或预览工具测试最终效果——这里的一切都在你的浏览器本地运行，不会上传任何内容。</p> <h2>常见问题</h2> <div class="faq-item"> <h3>og:image 应该使用多大的图片尺寸？</h3> <p>1200×630 像素是广泛推荐的尺寸——它在 Facebook、LinkedIn 及大多数链接预览界面中都能以大卡片形式良好显示，且不会出现尴尬的裁剪。</p> </div><div class="faq-item"> <h3>为什么我的标题/描述显示警告？</h3> <p>当标题超过 60 个字符或描述超过 200 个字符时，工具会发出提示，因为大多数平台会在预览卡片中截断较长的文本。这只是一个非阻塞性的建议，而非错误。</p> </div> </article> <nav class="related" aria-label="相关工具"> <h2>相关工具</h2> <div class="tool-grid"> <a class="tool-card" href="/zh/css-gradient-generator/"> <span class="icon">▧</span> <h3>CSS 渐变生成器</h3> <p>设计线性、径向和圆锥渐变并复制 CSS。</p> </a><a class="tool-card" href="/zh/box-shadow-generator/"> <span class="icon">❏</span> <h3>盒阴影生成器</h3> <p>通过实时预览构建多层 CSS 盒阴影。</p> </a><a class="tool-card" href="/zh/border-radius-generator/"> <span class="icon">⌒</span> <h3>圆角生成器</h3> <p>打造圆角和有机水滴形状，然后复制 CSS。</p> </a><a class="tool-card" href="/zh/flexbox-generator/"> <span class="icon">⧉</span> <h3>Flexbox 生成器</h3> <p>调整 flex 属性并复制布局 CSS。</p> </a><a class="tool-card" href="/zh/css-variables-generator/"> <span class="icon">🎨</span> <h3>CSS 变量生成器</h3> <p>根据名称/值对生成 :root CSS 自定义属性代码块。</p> </a><a class="tool-card" href="/zh/svg-blob-generator/"> <span class="icon">🫧</span> <h3>SVG 有机形状生成器</h3> <p>生成有机、随机的斑点形状，作为可复用的 SVG 路径。</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"og:image 应该使用多大的图片尺寸？","acceptedAnswer":{"@type":"Answer","text":"1200×630 像素是广泛推荐的尺寸——它在 Facebook、LinkedIn 及大多数链接预览界面中都能以大卡片形式良好显示，且不会出现尴尬的裁剪。"}},{"@type":"Question","name":"为什么我的标题/描述显示警告？","acceptedAnswer":{"@type":"Answer","text":"当标题超过 60 个字符或描述超过 200 个字符时，工具会发出提示，因为大多数平台会在预览卡片中截断较长的文本。这只是一个非阻塞性的建议，而非错误。"}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — 所有处理均在客户端完成，数据绝不上传。</span> <span><a href="https://dec0de.dev" rel="noopener">dec0de.dev — 18 formatters & encoders</a></span> </div> </footer> <script type="module">const a=document.getElementById("lang-select");a?.addEventListener("change",()=>{const e=a.value,t=a.dataset.path??"";window.location.href=e==="en"?`/${t}`:`/${e}/${t}`});document.getElementById("theme-toggle")?.addEventListener("click",()=>{const e=document.documentElement,t=e.dataset.theme==="dark"?"light":"dark";e.dataset.theme=t,localStorage.setItem("theme",t)});document.addEventListener("click",async e=>{const t=e.target.closest("[data-copy]");if(!t)return;const n=document.getElementById(t.dataset.copy);if(!n)return;const o="value"in n?n.value:n.textContent??"";try{await navigator.clipboard.writeText(o);const c=t.textContent;t.textContent=t.dataset.copiedLabel||"✓",t.classList.add("copied"),setTimeout(()=>{t.textContent=c,t.classList.remove("copied")},1200)}catch{}});</script> </body> </html> <script type="module" src="/_astro/open-graph-generator.astro_astro_type_script_index_0_lang.Aj92YbMh.js"></script>

Open Graph 标签生成器 🔒 完全在您的浏览器中运行——不上传任何数据。

链接预览

生成的 meta 标签

关于此工具