w
文档 核心 Open Graph Meta Generator

API 参考

本文档提供 Open Graph 元标签生成器的技术细节及其底层功能说明。

工具概览

Open Graph 元标签生成器是一款在客户端运行的工具，用于生成适用于 Open Graph 和 Twitter Card 协议的 HTML meta 标签。它会处理用户输入，并输出格式正确的 HTML meta 标签。

输入参数

通用信息

参数类型必填说明示例
pageTypestring是内容类型"website", "article", "book"
titlestring否页面标题"My Awesome Website"
descriptionstring否页面描述"A great website for developers"
urlstring否页面 URL"https://example.com/page"
siteNamestring否站点名称"My Company"

图片设置

参数类型必填说明示例
imageUrlstring否图片 URL"https://example.com/image.jpg"
imageAltstring否图片 Alt 文本"Company logo"
imageWidthstring否图片宽度（像素）"1200"
imageHeightstring否图片高度（像素）"630"

Twitter 设置

参数类型必填说明示例
twitterCardTypestring是Twitter 卡片类型"summary_large_image"
twitterSitestring否站点 Twitter 账号"@example"
twitterCreatorstring否作者 Twitter 账号"@author"

输出格式

该工具会生成如下格式的 HTML meta 标签：

Open Graph 标签

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter 标签

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

内容类型

支持的页面类型

类型说明使用场景
website通用网站页面首页、关于页、联系页
article博客文章、新闻文章博客文章、新闻文章、教程
book图书页面、电子书图书列表页、电子书页面
profile个人或企业资料页用户资料页、公司页面
music音乐曲目、专辑音乐流媒体、专辑页面
video视频内容视频页面、电影列表页

Twitter Card 类型

类型说明最适合
summary带缩略图的基础卡片博客文章、新闻文章
summary_large_image带大图的卡片视觉内容、产品
app移动应用推广App Store 页面
player视频/音频内容视频页面、播客

数据处理

HTML 转义

所有用户输入都会自动转义，以防止 XSS 攻击：

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

URL 验证

系统会验证 URL，确保其格式正确：

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

内容长度限制

该工具会执行建议的长度限制：

  • 标题：最多 60 个字符
  • 描述：最多 160 个字符
  • URL：必须是有效的 URL 格式

浏览器兼容性

支持的浏览器

浏览器版本支持情况
Chrome60+完全支持
Firefox55+完全支持
Safari12+完全支持
Edge79+完全支持

所需特性

  • ES6+ 支持
  • Clipboard API 支持
  • Local Storage 支持
  • CSS Grid 支持

性能考量

客户端处理

  • 所有处理都在浏览器中完成
  • 无需服务器请求
  • 即时生成并预览
  • 内存占用极小

缓存

  • 生成的 meta 标签会缓存在浏览器存储中
  • 历史记录会保存在本地
  • 无外部依赖

错误处理

输入验证错误

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

图片加载错误

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

集成示例

WordPress 集成

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

React 集成

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Next.js 集成

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

测试与验证

社交媒体调试工具

自动化测试

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

故障排查

常见问题

  1. 图片不显示: 检查 URL 格式和可访问性
  2. 标签不生效: 使用社交媒体调试工具进行验证
  3. 内容被截断: 检查字符长度限制
  4. 缓存问题: 使用调试工具刷新缓存

调试模式

启用调试模式以查看详细信息：

// Enable debug logging
localStorage.setItem("debug", "true");

后续增强

计划中的功能

  • 支持 Schema.org 结构化数据
  • 支持多语言
  • 支持批量生成
  • 提供服务端生成的 API 端点
  • 提供高级图片优化
  • 集成分析能力

贡献方式

如果你想为 Open Graph 元标签生成器做出贡献：

  1. Fork 仓库
  2. 创建功能分支
  3. 提交你的更改
  4. 添加测试
  5. 提交 pull request

支持

如需技术支持或有相关问题：

  • 查看 FAQ
  • 查看 Examples
  • 通过主站联系支持团队
这个页面对您有帮助吗？