Improve SEO by adding proper titles and og:tags#152
Conversation
WalkthroughUpdates documentation site to support Open Graph metadata, including front matter configuration in the index page, site name definition in the MkDocs configuration, and conditional meta tag rendering in the theme template with fallback logic. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
en/theme/material/base.html (2)
9-9:⚠️ Potential issue | 🔴 Critical
noindexrobots directive contradicts the SEO improvement goal of this PR.Line 9 contains
<meta name="robots" content="noindex">, which instructs search engines to not index any page on the site. This completely undermines the OG tags and title improvements being added for SEO. If this is intentional for a staging/preview environment, it should be conditionally applied; otherwise, it should be removed for production.
72-72:⚠️ Potential issue | 🟡 MinorRemove
styleattribute from<title>tag.The
<title>element is not a visible element — it only sets the browser tab/window title and is used by search engines. An inlinestyle="color: blue;"has no effect here and looks like a debug artifact.Proposed fix
- <title style="color: blue;">{{ page.meta.title }} - {{ config.site_name }}</title> + <title>{{ page.meta.title }} - {{ config.site_name }}</title>
🤖 Fix all issues with AI agents
In `@en/theme/material/base.html`:
- Around line 47-61: The template currently gates all OG fallbacks on the
presence of page.meta.extra, causing missing tags when extra is present but
partial; update the base.html template to render each meta property
independently by checking page.meta.extra['og:description'],
page.meta.extra['og:image'], and page.meta.extra['og:type'] individually and
using config.site_description, the default image URL, and "website" respectively
when each key is absent (i.e., change the single if/else that wraps all three
tags into three separate conditional expressions that fall back per-property).
| {% if page.meta and page.meta.extra %} | ||
| {% if page.meta.extra['og:description'] %} | ||
| <meta property="og:description" content="{{ page.meta.extra['og:description'] }}"> | ||
| {% endif %} | ||
| {% if page.meta.extra['og:image'] %} | ||
| <meta property="og:image" content="{{ page.meta.extra['og:image'] }}"> | ||
| {% endif %} | ||
| {% if page.meta.extra['og:type'] %} | ||
| <meta property="og:type" content="{{ page.meta.extra['og:type'] }}"> | ||
| {% endif %} | ||
| {% else %} | ||
| <meta property="og:description" content="{{ config.site_description }}"> | ||
| <meta property="og:type" content="website"> | ||
| <meta property="og:image" content="https://wso2.com/devant/docs/assets/images/og-devant.png"> | ||
| {% endif %} |
There was a problem hiding this comment.
Partial extra metadata causes missing OG fallbacks for og:description, og:image, and og:type.
When page.meta.extra exists but only defines some OG keys (e.g., only og:title), the {% else %} branch on line 57 is skipped entirely, so og:description, og:image, and og:type won't be emitted at all. Currently index.md defines all keys so it works, but any future page with partial extra metadata will silently lose these tags.
Each OG property should independently fall back to a default rather than being gated by the existence of the extra object.
Proposed fix — independent fallbacks per property
{# Other Open Graph tags #}
- {% if page.meta and page.meta.extra %}
- {% if page.meta.extra['og:description'] %}
- <meta property="og:description" content="{{ page.meta.extra['og:description'] }}">
- {% endif %}
- {% if page.meta.extra['og:image'] %}
- <meta property="og:image" content="{{ page.meta.extra['og:image'] }}">
- {% endif %}
- {% if page.meta.extra['og:type'] %}
- <meta property="og:type" content="{{ page.meta.extra['og:type'] }}">
- {% endif %}
- {% else %}
- <meta property="og:description" content="{{ config.site_description }}">
- <meta property="og:type" content="website">
- <meta property="og:image" content="https://wso2.com/devant/docs/assets/images/og-devant.png">
- {% endif %}
+ {% if page.meta and page.meta.extra and page.meta.extra['og:description'] %}
+ <meta property="og:description" content="{{ page.meta.extra['og:description'] }}">
+ {% elif config.site_description %}
+ <meta property="og:description" content="{{ config.site_description }}">
+ {% endif %}
+
+ {% if page.meta and page.meta.extra and page.meta.extra['og:image'] %}
+ <meta property="og:image" content="{{ page.meta.extra['og:image'] }}">
+ {% else %}
+ <meta property="og:image" content="https://wso2.com/devant/docs/assets/images/og-devant.png">
+ {% endif %}
+
+ {% if page.meta and page.meta.extra and page.meta.extra['og:type'] %}
+ <meta property="og:type" content="{{ page.meta.extra['og:type'] }}">
+ {% else %}
+ <meta property="og:type" content="website">
+ {% endif %}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {% if page.meta and page.meta.extra %} | |
| {% if page.meta.extra['og:description'] %} | |
| <meta property="og:description" content="{{ page.meta.extra['og:description'] }}"> | |
| {% endif %} | |
| {% if page.meta.extra['og:image'] %} | |
| <meta property="og:image" content="{{ page.meta.extra['og:image'] }}"> | |
| {% endif %} | |
| {% if page.meta.extra['og:type'] %} | |
| <meta property="og:type" content="{{ page.meta.extra['og:type'] }}"> | |
| {% endif %} | |
| {% else %} | |
| <meta property="og:description" content="{{ config.site_description }}"> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:image" content="https://wso2.com/devant/docs/assets/images/og-devant.png"> | |
| {% endif %} | |
| {% if page.meta and page.meta.extra and page.meta.extra['og:description'] %} | |
| <meta property="og:description" content="{{ page.meta.extra['og:description'] }}"> | |
| {% elif config.site_description %} | |
| <meta property="og:description" content="{{ config.site_description }}"> | |
| {% endif %} | |
| {% if page.meta and page.meta.extra and page.meta.extra['og:image'] %} | |
| <meta property="og:image" content="{{ page.meta.extra['og:image'] }}"> | |
| {% else %} | |
| <meta property="og:image" content="https://wso2.com/devant/docs/assets/images/og-devant.png"> | |
| {% endif %} | |
| {% if page.meta and page.meta.extra and page.meta.extra['og:type'] %} | |
| <meta property="og:type" content="{{ page.meta.extra['og:type'] }}"> | |
| {% else %} | |
| <meta property="og:type" content="website"> | |
| {% endif %} |
🤖 Prompt for AI Agents
In `@en/theme/material/base.html` around lines 47 - 61, The template currently
gates all OG fallbacks on the presence of page.meta.extra, causing missing tags
when extra is present but partial; update the base.html template to render each
meta property independently by checking page.meta.extra['og:description'],
page.meta.extra['og:image'], and page.meta.extra['og:type'] individually and
using config.site_description, the default image URL, and "website" respectively
when each key is absent (i.e., change the single if/else that wraps all three
tags into three separate conditional expressions that fall back per-property).
| @@ -1,3 +1,11 @@ | |||
| --- | |||
| title: Devant Documentation | |||
| description: Devant Documentation - Build, deploy, and manage integrations in the cloud | |||
2 participants
Purpose
Goals
Approach
User stories
Release note
Documentation
Training
Certification
Marketing
Automation tests
Security checks
Samples
Related PRs
Migrations (if applicable)
Test environment
Learning
Summary by CodeRabbit
Release Notes
New Features
Chores