Skip to content

Improve SEO by adding proper titles and og:tags #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sm1990 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve SEO by adding proper titles and og:tags #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions en/docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
---
title: Devant Documentation
description: Devant Documentation - Build, deploy, and manage integrations in the cloud
Copy link
Contributor

@pcnfernando pcnfernando Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should say develop too

template: templates/home-page-2.html
extra:
og:title: Devant Documentation
og:description: Devant Documentation - Build, deploy, and manage integrations in the cloud
og:image: https://wso2.com/devant/docs/assets/images/og-devant.png
og:type: website
og:url: https://wso2.com/devant/docs/
---
2 changes: 1 addition & 1 deletion en/mkdocs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
# under the License.

# Project information
site_name: ""
site_name: "Devant Documentation"
site_description: Devant Learning Portal
site_author: WSO2
site_url: https://wso2.com/devant/docs
Expand Down
Binary file added en/theme/material/assets/images/og-devant.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions en/theme/material/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,42 @@
{% endif %}
<link rel="icon" href="{{ config.theme.favicon | url }}">
<meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-9.1.2">

{# Open Graph tags #}
{# og:title - match the <title> tag logic #}
{% if page.meta and page.meta.extra and page.meta.extra['og:title'] %}
<meta property="og:title" content="{{ page.meta.extra['og:title'] }}">
{% elif page.meta and page.meta.title %}
<meta property="og:title" content="{{ page.meta.title }} - {{ config.site_name }}">
{% elif page.title and not page.is_homepage %}
<meta property="og:title" content="{{ page.title | striptags }} - {{ config.site_name }}">
{% else %}
<meta property="og:title" content="{{ config.site_name }}">
{% endif %}

{# 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 %}
Comment on lines +47 to +61
Copy link

@coderabbitai coderabbitai bot Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
{% 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).


{# og:url - use page canonical URL if available, otherwise custom URL from metadata #}
{% if page.meta and page.meta.extra and page.meta.extra['og:url'] %}
<meta property="og:url" content="{{ page.meta.extra['og:url'] }}">
{% elif page.canonical_url %}
<meta property="og:url" content="{{ page.canonical_url }}">
{% endif %}
{% endblock %}
{% block htmltitle %}
{% if page.meta and page.meta.title %}
Expand Down