From add-seo-ga
This skill should be used when the user asks to "加入 SEO", "加 meta tags", "加 og tags", "加 Open Graph", "加 Google Analytics", "GA 追蹤", "GA ID", "gtag", "SEO 標籤", "社群分享標籤", or asks to add SEO metadata, Open Graph tags, or Google Analytics tracking code to HTML files.
npx claudepluginhub tim80411/ai-agent-extension --plugin add-seo-gaThis skill uses the workspace's default tool permissions.
在 HTML 文件的 `<head>` 區段加入完整的 SEO 標籤結構和 Google Analytics 追蹤代碼。
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
在 HTML 文件的 <head> 區段加入完整的 SEO 標籤結構和 Google Analytics 追蹤代碼。
注意:GA 資訊為可選項,如果使用者未提供則僅加入 SEO 標籤。
<!-- SEO Meta Tags -->
<title>{頁籤標題}</title>
<meta name="keywords" content="{搜尋關鍵字}">
<meta name="description" content="{分享描述文}">
<meta property="og:title" content="{分享預覽標題}" />
<meta property="og:description" content="{分享描述文}" />
<meta property="og:url" content="{網址}" />
<meta property="og:image" content="{預覽圖網址}" />
<meta property="og:locale" content="zh_TW" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="{網站名稱}" />
<meta name="author" content="{作者名稱}">
<meta name="copyright" content="{版權所有者}">
<link rel="author" href="{作者名稱}">
<link rel="publisher" href="{作者名稱}">
<meta itemprop="name" content="{分享預覽標題}">
<meta itemprop="image" content="{預覽圖網址}">
<meta itemprop="description" content="{分享描述文}">
<meta property="og:image:secure_url" content="{預覽圖網址}" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="{預覽圖寬度}" />
<meta property="og:image:height" content="{預覽圖高度}" />
GA 代碼應加在 </head> 標籤之前,在所有其他 <script> 標籤之後。
如果使用者提供 GA ID(例如:G-1WBLRTAAAA),使用以下格式:
<!-- write your code here -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={GA_ID}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', '{GA_ID}');
</script>
</head>
如果使用者提供完整的 GA script 代碼,直接插入:
<!-- write your code here -->
{使用者提供的完整 GA Script}
</head>
放在 <head> 區段的最前面,緊接在基本 meta 標籤(charset, viewport)之後:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ↓ SEO 標籤從這裡開始 ↓ -->
<title>...</title>
<meta property="og:title" content="..." />
...
放在 </head> 結束標籤之前,在所有其他內容之後:
</script>
<!-- write your code here -->
<!-- ↓ GA 代碼放這裡 ↓ -->
<!-- Google tag (gtag.js) -->
<script async src="..."></script>
<script>...</script>
</head>
G-XXXXXXXXXX(10 個字符)UA-XXXXXXXX-XGTM-XXXXXXX如果使用者只提供 ID(沒有完整 script),自動套用標準 gtag.js 格式。
在加入 GA 代碼前,檢查 HTML 文件中是否已存在:
gtag.js、analytics.js、ga(、dataLayer<head> 區段適當位置加入,使用 <!-- SEO Meta Tags --> 標記</head> 之前加入,使用 <!-- Google tag (gtag.js) --> 標記og:image:type,確認格式正確og:image:type:.png → image/png、.jpg/.jpeg → image/jpeg、.webp → image/webp、.gif → image/gifFor detailed input/output examples, consult:
references/examples.md - 包含教育類網站、純 SEO(無 GA)、完整 GA Script 等完整範例