Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/602https://channel.meo-ai.com/posts/602Sat, 18 Apr 2026 08:39:56 GMT<span class="post-title-source">《在本地终端预览OpenGraph卡片》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23OpenGraph" title="#OpenGraph">#OpenGraph</a> <a href="/search/result?q=%23CLI%E5%B7%A5%E5%85%B7" title="#CLI工具">#CLI工具</a> <a href="/search/result?q=%23Zig" title="#Zig">#Zig</a> <a href="/search/result?q=%23Kitty%E5%9B%BE%E5%BD%A2%E5%8D%8F%E8%AE%AE" title="#Kitty图形协议">#Kitty图形协议</a> <a href="/search/result?q=%23%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7" title="#开发工具">#开发工具</a><br /><br />总结：<br />作者为解决OpenGraph调试痛点，开发了CLI工具<code>og-check</code>，可直接在终端内渲染本地开发环境的OG卡片预览，无需部署到公网或使用隧道服务。工具基于Zig编写，支持Kitty图形协议在终端内显示图片，并提供OpenGraph、Twitter Card、表格和JSON四种输出格式，同时可作为CI检查工具确保OG标签完整性。<br /><br />文章要点：<br />- 传统OG调试流程繁琐：需要部署到公网或使用隧道工具，且Facebook等平台的调试器缓存机制会导致反复迭代困难<br />- <code>og-check</code>支持在本地终端直接预览OG卡片，包含图片渲染，将反馈周期从分钟级缩短到秒级<br />- 终端图片渲染基于Kitty图形协议，兼容Ghostty、iTerm2、WezTerm等主流终端，不支持的终端会自动降级为文本输出<br />- 工具内部使用Zig的<code>std.http.Client</code>抓取页面，解析meta标签并按命名空间分类（og:、twitter:等），通过zigdown渲染Markdown到终端<br />- 提供四种输出模式：OpenGraph预览（默认）、Twitter Card预览、表格视图、JSON格式，后者支持管道操作（如配合jq使用）<br />- 具备校验功能：当缺少必需的OG字段（title、type、image、url）时会输出错误并返回非零退出码，适合集成到CI流程作为布局模板检查<br />- 安装方式灵活：支持预编译二进制、源码编译（Zig 0.15+）和mise工具管理<br /><br />文章URL：<a href="https://simonhartcher.com/posts/2026-04-15-testing-opengraph-on-localhost-from-the-cli/" target="_blank" rel="noopener" title="https://simonhartcher.com/posts/2026-04-15-testing-opengraph-on-localhost-from-the-cli/">https://simonhartcher.com/posts/2026-04-15-testing-opengraph-on-localhost-from-the-cli/</a><a class="tgme_widget_message_link_preview" href="https://simonhartcher.com/posts/2026-04-15-testing-opengraph-on-localhost-from-the-cli" target="_blank" rel="noopener" title="og-check fetches a URL and renders its OpenGraph and Twitter Card metadata directly in your terminal, images and all. Point it at localhost and skip the tunnel."> <div class="link_preview_site_name accent_color">Simon Hartcher</div> <img class="link_preview_image" alt="Testing OpenGraph on localhost from the CLI before you go public | Simon Hartcher" src="/static/https://cdn4.telesco.pe/file/Ai-97E7GvAgxwag_beQJlkJCsxZj6bIjoR3S3AgoPLvfcnzZMyR-XVXuo6wRE-PVhwmckjCqWVXVc5DGN-m2_gl9GwO7irjjVQupvdk9MjfoB1Vw2XL4tWwv4lo8vi0PdEgso14pNC4wav98YQaLTwxR5GD9R4HPexShcqjx2e7AzLIXqVzZ0hCbfQavrXOeg127ysD_k-RePyLFKSlHwqZjO7fk2gokkxTxBBunk-C3BAwCSYBuNjkGJnnMeyketNlb46_Ur_-dnJdGRJigGVPj7YMj3BeumDhIbTPdQjYxh91OlZ0q4_9my9JWCj3TOJR-dLDx6EhJ2KIy2jmjwA.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Testing OpenGraph on localhost from the CLI before you go public | Simon Hartcher</div> <div class="link_preview_description">og-check fetches a URL and renders its OpenGraph and Twitter Card metadata directly in your terminal, images and all. Point it at localhost and skip the tunnel.</div> </a>