feat: enhance OpenGraph metadata for repo pages#132
Conversation
- Add canonical URL to repo page metadata - Add siteName to openGraph for better sharing - Change OG type from website to article for repo pages - Add locale to openGraph metadata - Update Twitter card title format
|
Note Gemini is unable to generate a review for this pull request due to the file types involved not being currently supported. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthrough
ChangesSEO Metadata Enhancements
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@ui/src/app/`[...repo]/layout.tsx:
- Line 11: The canonicalUrl variable is using encodeURIComponent on the entire
repoName, which encodes forward slashes as %2F and breaks the URL structure. To
fix this, split repoName by forward slashes, apply encodeURIComponent to each
individual path segment separately, and then rejoin them with forward slashes
before constructing the canonicalUrl. This will preserve the path hierarchy
while properly encoding special characters within each segment.
- Line 37: The OpenGraph type property in the repository page layout is
incorrectly set to 'article', but it should be 'website' to align with other
similar informational pages in the codebase. The 'article' type is semantically
incorrect for repository pages as it requires metadata properties like
article:published_time and article:author that are not applicable here. Change
the type value from 'article' to 'website' in the OpenGraph metadata
configuration.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ce2a74cd-654e-4ee6-be2c-04f980e7f7a8
📒 Files selected for processing (1)
ui/src/app/[...repo]/layout.tsx
| title: `${repoName}`, | ||
| description: `Explore ${repoName} repository with Claude Code plugins, MCP servers, and agent skills. View plugin adoption metrics, AI development tools, and automated workflow integrations`, | ||
| type: 'website', | ||
| type: 'article', |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check if other Next.js projects use 'article' type for repository/profile pages
rg -n "type:\s*['\"]article['\"]" --type ts --type tsx -A5 -B5Repository: quemsah/awesome-claude-plugins
Length of output: 102
🌐 Web query:
OpenGraph protocol article type requirements and recommended properties
💡 Result:
To implement the Open Graph article type, you must first include the four core properties required for all Open Graph objects [1][2]. These are: og:title: The title of your article. og:type: Set to "article". og:image: A URL to an image representing the article. og:url: The canonical URL of the article, acting as its permanent ID. In addition to these base properties, you should include the article-specific metadata using the article namespace (article:*) to provide detailed context to scrapers and social platforms [1][3][2]. Recommended Article-Specific Properties These properties, while optional, are highly recommended for better representation [1][2]: article:published_time: The datetime when the article was first published [1][2]. article:modified_time: The datetime when the article was last changed [1][2]. article:expiration_time: The datetime when the article should be considered out of date [1][2]. article:author: An array of URLs to profile objects for the writers of the article [1][2]. article:section: A string representing the high-level section of the site (e.g., "Technology") [1][2]. article:tag: An array of tags associated with the article [1][2]. Additional Metadata Depending on your platform's integration (particularly if targeting Facebook's news indexing), you may also use these properties [4]: article:opinion: A boolean (true/false) indicating if the content is an opinion piece [4]. article:content_tier: Defines access status (e.g., "free", "locked", or "metered") [4]. article:location: Allows geo-tagging the content (e.g., city or region) [4]. Implementation Best Practices Always validate your markup using tools like the Facebook Sharing Debugger or similar platform-specific inspectors to ensure the properties are correctly parsed [3]. Because the Open Graph protocol uses RDFa, these tags should be placed within the head section of your HTML [1][2]. Note that once an object (a URL) has been shared and has accumulated significant engagement (like likes or shares), some properties, such as the object type, may become locked by the platform and impossible to change [5].
Citations:
- 1: https://github.com/facebookarchive/open-graph-protocol/blob/master/content/index.markdown
- 2: https://ogp.me/
- 3: https://www.thatdevpro.com/reference/html-open-graph/
- 4: https://developers.facebook.com/docs/news-indexing/guides/metadata-tags
- 5: https://developers.facebook.com/docs/sharing/opengraph/using-objects/
🏁 Script executed:
cat -n ui/src/app/\[...repo\]/layout.tsx | sed -n '20,50p'Repository: quemsah/awesome-claude-plugins
Length of output: 1170
🏁 Script executed:
# Check if there are any article metadata properties being set elsewhere in the codebase
rg -n "article:" ui/src --type ts
# Also check what type values are used elsewhere
rg -n "type:\s*['\"]" ui/src -A2 -B2Repository: quemsah/awesome-claude-plugins
Length of output: 5236
Change OpenGraph type from article to website for repository pages.
Repository pages are directory/informational content similar to the stats and about pages, which both use type: 'website'. The article type is semantically incorrect here—it requires metadata properties like article:published_time, article:author, and article:section per the OpenGraph specification, none of which are provided or applicable to repository pages.
Align this with the rest of the codebase by using website instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@ui/src/app/`[...repo]/layout.tsx at line 37, The OpenGraph type property in
the repository page layout is incorrectly set to 'article', but it should be
'website' to align with other similar informational pages in the codebase. The
'article' type is semantically incorrect for repository pages as it requires
metadata properties like article:published_time and article:author that are not
applicable here. Change the type value from 'article' to 'website' in the
OpenGraph metadata configuration.
1 participant
Summary
Changes
Summary by CodeRabbit