本文へ移動
cccskills
無料GitHub で公開

og-url-match

Use when auditing Open Graph tags or investigating why social share counts appear low. Applies to any page with both canonical-url and og:url tags.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md2.1 KB
  • references/rule.md3.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

OG URL Match

When og:url doesn't match the canonical URL, social platforms track share counts separately for each URL variant—published share counts get split across multiple URLs and appear lower than they actually are.

Quick Reference

  • og:url must exactly match the <link rel='canonical-url'> URL
  • Use absolute HTTPS URLs for both og:url and canonical-url
  • Mismatched URLs cause social platforms to aggregate share counts on the wrong URL
  • og:url should be the clean canonical URL without tracking parameters

Check

Compare the og:url meta tag value with the <link rel='canonical'> href value. Both must be identical absolute HTTPS URLs. Flag any page where they differ, either in protocol, domain, path, or query string.

Fix

Set og:url to exactly the same absolute HTTPS URL as the canonical tag. Remove any UTM parameters, session IDs, or tracking tokens from og:url. If no canonical tag exists, add one and set og:url to match it.

Explain

Social platforms use og:url as the canonical identifier for aggregating share counts and comments. If og:url differs from the canonical tag, shares on the page URL and shares of the og:url accumulate separately, making your content appear less popular than it is and creating attribution confusion.

Code Review

Compare the value of <meta property='og:url' content='...'> with the value of <link rel='canonical' href='...'>. They must be identical character-for-character. Check for: different protocols (http vs https), www vs non-www mismatch, query string differences, trailing slash inconsistencies. Flag any page where the two values differ.


For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/seo/og-url-match

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

404-page

無料

Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. Verify the rendered HTML and HTTP response rather than relying only on source files.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks. Automated testing is strongest at catching structural and attribute-level issues; it does not replace keyboard, screen reader, and manual UX testing.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path, including error handling and backup methods, not just the primary login form.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate the final browser-facing markup, not just the source framework abstraction.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table markup for screen readers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

日本語の概要は準備中です。原文の説明を表示しています。

thedaviddias/Front-End-Checklist7.4万2026年10月6日 更新

thedaviddias のスキルをすべて見る

このスキルの問題を報告する