UD5工具箱
第一步：输入网页URL并获取OG标签
打开社媒链接预览生成器后，在页面顶部的URL输入框中粘贴或输入你想要预览的网页地址。确保URL格式正确且包含协议前缀（如https://）。输入完成后，点击旁边的获取按钮。工具会自动发起网络请求抓取目标页面的HTML内容，并从中提取Open Graph相关的meta标签信息。抓取成功后，下方的各个编辑字段会自动填充对应的标签值。如果目标页面没有设置某些OG标签，对应的字段将保持空白状态，等待用户手动填写。如果抓取失败，请检查URL是否正确、目标服务器是否允许跨域请求，或者尝试手动填写各字段。
第二步：编辑OG标签内容
抓取完成后，你可以对每个OG标签进行自定义编辑。首先是og:title字段，这是链接预览卡片上显示的标题，建议控制在六十字符以内以确保在所有平台上都能完整显示，工具最多支持一百二十字符并配有实时字数统计。然后是og:description字段，这是卡片上显示的描述文字，建议控制在一百五十字符左右，工具最多支持三百字符。接下来是og:url字段，设置链接预览指向的目标地址。og:site_name字段设置网站名称，og:type字段从下拉菜单中选择页面类型（如website、article、product等）。每个字段旁都有清晰的标签说明和格式要求，帮助你准确填写。
第三步：设置预览图片
在og:image字段中输入预览图片的完整URL地址。工具提示推荐的图片尺寸为一千二百乘以六百三十像素，格式支持JPG和PNG。图片URL必须是完整的绝对路径，以https://开头。设置完成后，你可以在下方的预览卡片中立即看到图片的显示效果。如果图片尺寸不符合平台要求或URL无法访问，预览卡片会显示占位图。建议使用宽高比接近1.91:1的图片，这样在所有平台上都能获得最佳的显示效果。对于Twitter的小图模式，图片至少应为一百四十四乘以一百四十四像素。
第四步：配置Twitter Card类型
在og:type字段下方，你可以设置twitter:card的类型。工具提供了summary_large_image（大图模式）和summary（小图模式）两种主要选项，以及player（播放器模式）。选择大图模式时，预览卡片会以大尺寸图片作为主体，标题和描述位于图片下方，视觉效果更加突出。选择小图模式时，图片缩小到标题右侧，整体布局更加紧凑。你可以随时在两种模式之间切换，实时对比效果差异。此外，你还可以通过预览区域上方的切换按钮来快速切换大图和小图模式的展示效果。
第五步：预览各平台效果
在页面下方的预览区域，你可以看到四个平台标签页——Facebook、X/Twitter、LinkedIn和Discord。点击不同的标签页可以查看当前OG标签配置在对应平台上的模拟显示效果。每个平台的卡片样式都经过精心还原，包括字体、颜色、间距和布局等细节。仔细检查每个平台上的标题是否被截断、描述是否完整、图片是否正常显示。如果发现某个平台上的显示效果不理想，返回上方的编辑区域进行调整，预览会实时更新。这种多平台对比预览的能力帮助你确保链接在所有主流社交平台上都能获得良好的展示效果。
第六步：复制Meta标签代码
当所有OG标签都编辑完成且预览效果满意后，在页面的Meta标签代码区域查看自动生成的HTML代码片段。代码包含了所有已填写的OG标签和Twitter Card标签，格式规范。点击复制Meta标签按钮，完整的代码将被复制到你的剪贴板中。然后将这段代码粘贴到你网页HTML文档的head标签内，保存并部署后即可生效。社交平台在下次抓取你的页面时就会使用新的OG标签来生成链接预览卡片。如果平台仍然显示旧的预览效果，可以使用各平台提供的调试工具来刷新缓存。
第七步：使用示例快速体验
如果你是第一次使用本工具，可以点击示例快速填充区域的博客文章或产品页按钮。工具会自动将所有OG标签字段填充为预先配置好的示例值，预览卡片也会立即更新为对应的显示效果。你可以在示例的基础上修改标题、描述、图片等字段，快速体验从编辑到预览再到代码生成的完整工作流程。示例配置遵循了各字段的最佳实践，包括推荐的标题长度、描述长度和图片尺寸，可以作为你实际使用时的参考标准。通过示例快速上手后，你就可以开始为自己网站的各个页面配置最优的OG标签了。