Source: Dev.to

使用 SnapAPI + Zapier 自动化截图和元数据检查——无需编码

在这个教程中，我将向你展示如何使用 SnapAPI 与 Zapier 组合，来实现以下两件事：

1. 自动生成网页截图 并将其保存到指定的云存储（如 Google Drive、Dropbox 等）。
2. 检查网页的元数据（标题、描述、Open Graph 标签等），并在发现问题时发送通知。

整个过程不需要写一行代码，只需在 Zapier 中配置几个步骤即可。

---

前置条件

• 一个 SnapAPI 账户（注册页面）。
• 一个 Zapier 账户（免费版即可）。
• 目标云存储服务的访问权限（Google Drive、Dropbox、OneDrive 等）。
• （可选）Slack、Email 或其他通知渠道的账户，用于接收错误报告。

---

步骤概览

1. 创建 SnapAPI 项目：在 SnapAPI 控制台中添加你想要监控的 URL 列表，并启用“截图”和“元数据”功能。
2. 在 Zapier 中创建新 Zap：选择 Webhooks by Zapier 作为触发器，使用 SnapAPI 的 Webhook URL。
3. 添加动作：
   • 步骤 1：使用 “Upload File” 动作将截图保存到云存储。
   • 步骤 2：使用 “Filter” 动作检查返回的元数据是否符合预期。
   • 步骤 3：如果检查失败，使用 “Send Channel Message” 或 “Send Email” 动作发送警报。
4. 测试并启用 Zap：确保所有步骤都能顺利运行后，打开 Zap 让它自动执行。

下面我们逐步展开每个环节的具体操作。

---

1. 在 SnapAPI 中配置项目

1. 登录 SnapAPI 控制台，点击 “New Project”。
2. 输入项目名称，例如 “My Site Monitoring”。
3. 在 “URLs” 区域添加你想要监控的页面地址（每行一个）。
4. 勾选 “Capture Screenshot” 与 “Fetch Metadata” 选项。
5. 保存项目后，点击 “Integrations” → “Webhooks”，复制生成的 Webhook URL（后面会在 Zapier 中使用）。

提示：如果你只想监控特定的元数据字段（如 og:title），可以在 SnapAPI 的 Advanced Settings 中添加自定义检查规则。

---

2. 在 Zapier 中创建触发器

1. 登录 Zapier，点击 “Make a Zap”。
2. 搜索并选择 “Webhooks by Zapier” → “Catch Hook”。
3. 在弹出的页面中粘贴刚才从 SnapAPI 复制的 Webhook URL。
4. 点击 “Test Trigger”，Zapier 会等待 SnapAPI 发送一次请求。
   • 为了触发一次请求，你可以在 SnapAPI 控制台手动点击 “Run Now”，或等待下一个计划任务。
5. 成功捕获后，Zapier 会显示返回的 JSON 数据，其中包括 screenshot_url、metadata 等字段。

---

3. 将截图保存到云存储

下面以 Google Drive 为例：

1. 添加新动作，搜索 “Google Drive” → “Upload File”。
2. 在 “File” 字段中，选择 “Custom” → “screenshot_url”（来自 Webhook 的输出）。
3. 设置 “Folder” 为你想要存放截图的目录，例如 Screenshots/2024/03。
4. 你可以使用 Zapier 的日期变量 为文件名添加时间戳，例如 {{zap_meta_human_now}}_{{url}}.png。

注意：如果你使用的是 Dropbox、OneDrive 或其他服务，只需选择对应的应用并使用相同的字段映射即可。

---

4. 检查元数据并发送警报

4.1 添加过滤器

1. 添加 “Filter by Zapier” 步骤。
2. 配置条件，例如：
   • metadata.title **(Text) → (Does Not Contain) → “My Company”`
   • metadata.og_description **(Text) → (Is Empty)`

如果任意条件不满足，Zap 将停止执行；否则继续进入警报步骤。

4.2 发送通知（以 Slack 为例）

1. 添加 “Slack” → “Send Channel Message”。

2. 在 “Message Text” 中写入警报内容，例如：

   🚨 元数据检查失败！  
   URL: {{url}}  
   问题: {{zap_meta_human_now}}  
   - 标题缺少关键字  
   - Open Graph 描述为空

3. 选择目标频道或用户，保存并测试。

可选：如果你更倾向于 Email，直接使用 “Email by Zapier”，将同样的内容发送到你的收件箱。

---

5. 完成并启用 Zap

1. 回顾所有步骤，确保每个字段都已正确映射。

2. 点击右上角的 “Turn on Zap”。

3. 现在，每当 SnapAPI 运行并返回结果时，Zap 会自动：

   • 下载并保存截图。
   • 检查元数据是否符合预设规则。
   • 在发现异常时即时发送通知。

---

常见问题排查

---

小结

通过 SnapAPI 与 Zapier 的无代码集成，你可以轻松实现：

• 每日/每小时 自动抓取网页截图并归档。
• 实时 检测页面元数据的完整性与准确性。
• 即时 将异常通过 Slack、Email 或其他渠道告知团队。

整个流程只需几分钟即可搭建完成，省去了手动检查和脚本维护的繁琐。快去试试吧，让你的内容运营更高效、更可靠！

SnapAPI + Zapier 集成指南

自动化截图、元数据检查和 OG 审计——无需编写代码。

您可以自动化的内容

Zapier 通过“如果…则…”的工作流（称为 Zaps）连接应用。将其与 SnapAPI 结合，您可以：

• 对每个新表单提交的 URL 进行截图——有人在潜在客户表单中填写了他们的网站，Zapier 会自动截图并保存到 Google Drive。
• 对每篇新博客文章进行 OG 标签审计——您的 CMS 发布文章后，Zapier 检查元数据，如果缺少 og:image 则在 Slack 中提醒您。
• 监控竞争对手页面——每周一，对竞争对手 URL 列表进行全新截图并保存到 Notion 数据库。

这些都不需要编写代码。Zapier 的内置 Webhooks 操作即可处理 SnapAPI 调用。

您需要的准备

• 一个 Zapier 账户——免费套餐（每月 100 次任务）足以入门。
• 一个 SnapAPI API 密钥——免费获取，100 次调用/每月，无需信用卡。

步骤指南：使用 Zapier 截图 URL

此示例 Zap 会对每个新的 Google 表单响应 URL 进行截图，并将图像保存到 Google Drive。根据你的工作流需求自行调整触发器。

步骤 1 – 创建新 Zap

前往 zapier.com/app/zaps，点击 + Create Zap。

步骤 2 – 设置触发器

选择你的触发应用和事件。本示例：

• 应用程序： Google Forms
• 触发事件： New Response in Spreadsheet

连接你的 Google 账户并选择相应的电子表格。在 “Set up trigger” 步骤中，映射包含你想要截图的 URL 的列。

步骤 3 – 添加 Webhooks by Zapier 动作

1. 点击 + 添加动作步骤。
2. 应用程序： Webhooks by Zapier
3. 动作事件： GET
4. 点击 Continue。

步骤 4 – 配置 Webhooks 动作

URL

https://api.snapapi.tech/v1/screenshot

查询字符串参数 – 添加两行：

请求头 – 添加一行：

响应类型： File

步骤 5 – 测试此步骤

点击 Test step。Zapier 将向 SnapAPI 发起实时请求。若成功，你将在响应中看到一个文件对象——这就是你的截图。

步骤 6 – 添加最终动作（保存或发送）

在 Webhooks 步骤之后再添加一个动作：

• 保存到 Google Drive： 应用 = Google Drive，动作事件 = Upload File，文件 = Webhooks 响应的文件。
• 或通过 Slack 发送： 应用 = Slack，动作事件 = Send File，文件 = Webhooks 响应的文件。

步骤 7 – 启用 Zap

点击 Publish。从此 Zap 将自动运行。

替代方案：Code by Zapier（用于元数据）

如果您需要 JSON 元数据（og:title、og:image 等），而不是图像文件，请使用 Code by Zapier 而不是 Webhooks。

应用程序： Code by Zapier
操作事件： Run Javascript

const url = inputData.pageUrl; // mapped from your trigger
const apiKey = 'YOUR_SNAPAPI_KEY';

const res = await fetch(
  `https://api.snapapi.tech/v1/metadata?url=${encodeURIComponent(url)}`,
  { headers: { 'x-api-key': apiKey } }
);
const data = await res.json();

return {
  title:       data.og_title || data.title,
  description: data.og_description || data.description,
  og_image:    data.og_image,
  missing_og:  !data.og_image ? 'YES' : 'NO'
};

输出字段（title、description、og_image、missing_og）将在后续步骤中可用——可将它们传输到 Slack、Notion 或 Google 表格。

三个完整的 Zap 思路

Zap 1 – 自动截图新潜在客户

结果： 每当 CRM 中出现新潜在客户时，系统会自动将其网站的截图保存到 Drive。

Zap 2 – 新博客文章的 OG 标签提醒

结果： 每当文章上线但缺少 OG 图片时，Slack 会收到提醒。

Zap 3 – 每周竞争对手截图归档

结果： 在带日期的 Google Drive 文件夹中，形成每周一次的竞争对手首页视觉归档。

获取您的免费 SnapAPI 密钥

每月 100 次 API 调用，无需信用卡，30 秒内激活。

→ snapapi.tech