Skip to Content
Odoo Menu
  • Sign in
  • Try it free
  • Apps
    Finance
    • Accounting
    • Invoicing
    • Expenses
    • Spreadsheet (BI)
    • Documents
    • Sign
    Sales
    • CRM
    • Sales
    • POS Shop
    • POS Restaurant
    • Subscriptions
    • Rental
    Websites
    • Website Builder
    • eCommerce
    • Blog
    • Forum
    • Live Chat
    • eLearning
    Supply Chain
    • Inventory
    • Manufacturing
    • PLM
    • Purchase
    • Maintenance
    • Quality
    Human Resources
    • Employees
    • Recruitment
    • Time Off
    • Appraisals
    • Referrals
    • Fleet
    Marketing
    • Social Marketing
    • Email Marketing
    • SMS Marketing
    • Events
    • Marketing Automation
    • Surveys
    Services
    • Project
    • Timesheets
    • Field Service
    • Helpdesk
    • Planning
    • Appointments
    Productivity
    • Discuss
    • Approvals
    • IoT
    • VoIP
    • Knowledge
    • WhatsApp
    Third party apps Odoo Studio Odoo Cloud Platform
  • Industries
    Retail
    • Book Store
    • Clothing Store
    • Furniture Store
    • Grocery Store
    • Hardware Store
    • Toy Store
    Food & Hospitality
    • Bar and Pub
    • Restaurant
    • Fast Food
    • Guest House
    • Beverage Distributor
    • Hotel
    Real Estate
    • Real Estate Agency
    • Architecture Firm
    • Construction
    • Estate Management
    • Gardening
    • Property Owner Association
    Consulting
    • Accounting Firm
    • Odoo Partner
    • Marketing Agency
    • Law firm
    • Talent Acquisition
    • Audit & Certification
    Manufacturing
    • Textile
    • Metal
    • Furnitures
    • Food
    • Brewery
    • Corporate Gifts
    Health & Fitness
    • Sports Club
    • Eyewear Store
    • Fitness Center
    • Wellness Practitioners
    • Pharmacy
    • Hair Salon
    Trades
    • Handyman
    • IT Hardware & Support
    • Solar Energy Systems
    • Shoe Maker
    • Cleaning Services
    • HVAC Services
    Others
    • Nonprofit Organization
    • Environmental Agency
    • Billboard Rental
    • Photography
    • Bike Leasing
    • Software Reseller
    Browse all Industries
  • Community
    Learn
    • Tutorials
    • Documentation
    • Certifications
    • Training
    • Blog
    • Podcast
    Empower Education
    • Education Program
    • Scale Up! Business Game
    • Visit Odoo
    Get the Software
    • Download
    • Compare Editions
    • Releases
    Collaborate
    • Github
    • Forum
    • Events
    • Translations
    • Become a Partner
    • Services for Partners
    • Register your Accounting Firm
    Get Services
    • Find a Partner
    • Find an Accountant
    • Meet an advisor
    • Implementation Services
    • Customer References
    • Support
    • Upgrades
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Get a demo
  • Pricing
  • Help

Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

  • CRM
  • e-Commerce
  • Accounting
  • Inventory
  • PoS
  • Project
  • MRP
All apps
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
Help

How to Add a Custom Field to the SEO Modal Form in Website Pages (Odoo 18)

Subscribe

Get notified when there's activity on this post

This question has been flagged
pagesseowebsitemodalOdoo 18custom field
2 Replies
1784 Views
Avatar
Gilvanilson Santos

Hi everyone,


I'm working on Odoo 18 and trying to add a custom field to the SEO modal popup that appears when editing a page on the website (the “Website > Optimize SEO” dialog). I want to include a field called webpage_schema_type to let users pick the Schema.org type for the current page (like WebPage, ContactPage, etc.).


I managed to create the field on the model and make it available, but I can't figure out how to inject it into the modal form UI. The modal is built using OWL components, and I couldn't find an easy way to extend or patch it.


Here’s what I tried:


1. Field on the model:


from odoo import models, fields


class WebsitePage(models.Model):

    _inherit = 'website.page'


    webpage_schema_type = fields.Selection([

        ('WebPage', 'WebPage'),

        ('AboutPage', 'About Page'),

        ('CheckoutPage', 'Checkout Page'),

        ('CollectionPage', 'Collection Page'),

        ('ContactPage', 'Contact Page'),

        ('FAQPage', 'FAQ Page'),

        ('ProfilePage', 'Profile Page'),

        ('SearchResultsPage', 'Search Results Page'),

    ], string="WebPage Schema Markup", default="WebPage", help="Select Schema Markup for your page. Search engines use structured data to display rich results in SERPs. For more information, visit https://schema.org/WebPage")



2. Trying to patch the modal component (JS):


// In website.assets_editor


/** @odoo-module **/

import { patch } from "@web/core/utils/patch";

import { SeoDialog } from "@website/js/components/dialog/seo";


patch(SeoDialog.prototype, {

    setup() {

        this._super(...arguments);

        this.state.webpage_schema_type = this.props.values.webpage_schema_type || "";

    },

});


But nothing appears in the modal.




What I need:


  • How to properly extend or patch the SEO modal form to show and save my custom field?
  • Do I need to replace the whole component, or is there a cleaner way to inject just one new field?


Any help or example would be appreciated 🙏. I'm open to OWL/JS code if needed. Thanks in advance!

0
Avatar
Discard
Avatar
Piyush H
Best Answer

Dear Gilvanilson,

To properly add your webpage_schema_type field to the SEO dialog, you'll need to modify both the Python model and the OWL component. Here's a complete solution:

1. First, ensure your model extension is correct (Python)

python

from odoo import models, fields

class WebsitePage(models.Model):
    _inherit = 'website.page'

    webpage_schema_type = fields.Selection(
        selection=[
            ('WebPage', 'WebPage'),
            ('AboutPage', 'About Page'),
            ('CheckoutPage', 'Checkout Page'),
            ('CollectionPage', 'Collection Page'),
            ('ContactPage', 'Contact Page'),
            ('FAQPage', 'FAQ Page'),
            ('ProfilePage', 'Profile Page'),
            ('SearchResultsPage', 'Search Results Page'),
        ],
        string="Schema.org Type",
        default="WebPage",
        help="Select Schema Markup type for structured data"
    )
2. Create a JS module to extend the SEO dialog

Create a new file in your module: static/src/js/seo_dialog_extension.js

javascript

/** @odoo-module **/

import { patch } from "@web/core/utils/patch";
import { SeoDialog } from "@website/js/components/dialog/seo";

patch(SeoDialog.prototype, {
    setup() {
        super.setup();
        this.schemaOptions = [
            { value: 'WebPage', label: 'WebPage' },
            { value: 'AboutPage', label: 'About Page' },
            { value: 'CheckoutPage', label: 'Checkout Page' },
            { value: 'CollectionPage', label: 'Collection Page' },
            { value: 'ContactPage', label: 'Contact Page' },
            { value: 'FAQPage', label: 'FAQ Page' },
            { value: 'ProfilePage', label: 'Profile Page' },
            { value: 'SearchResultsPage', label: 'Search Results Page' },
        ];
    },

    /**
     * @override
     */
    async willStart() {
        const res = await super.willStart(...arguments);
        this.state.webpage_schema_type = this.initialValues.webpage_schema_type || 'WebPage';
        return res;
    },

    /**
     * @override
     */
    _prepareSEOPayload() {
        const payload = super._prepareSEOPayload();
        payload.webpage_schema_type = this.state.webpage_schema_type;
        return payload;
    },
});

// Add the field to the template
SeoDialog.template = 'your_module.SeoDialogExtended';
3. Create an XML template extension

Add to your module's views: views/seo_dialog_extension.xml

xml

<template id="SeoDialogExtended" inherit_id="website.SeoDialog" name="SEO Dialog Extended">
    <xpath expr="//div[hasclass('o_seo_configuration')]" position="before">
        <div class="form-group">
            <label class="col-form-label">Schema.org Type</label>
            <select t-att-name="'webpage_schema_type'" class="form-select" t-att-value="state.webpage_schema_type">
                <t t-foreach="schemaOptions" t-as="option">
                    <option t-att-value="option.value" t-esc="option.label"/>
                </t>
            </select>
        </div>
    </xpath>
</template>
4. Update your module assets

Add to your module's manifest (__manifest__.py):

python

'assets': {
    'web.assets_frontend': [
        'your_module/static/src/js/seo_dialog_extension.js',
    ],
    'web.assets_qweb': [
        'your_module/views/seo_dialog_extension.xml',
    ],
},
5. Update the website controller (optional)

To make the field available in the editor:

python

class Website(models.Model):
    _inherit = 'website'

    def _prepare_website_page_values(self, page):
        values = super()._prepare_website_page_values(page)
        values['webpage_schema_type'] = page.webpage_schema_type
        return values
Key Points:
  1. The patch modifies the original SeoDialog component to:
    • Add your schema options
    • Include the field in the state
    • Ensure it's saved with the SEO data
  2. The template inheritance adds your field to the existing dialog layout
  3. The manifest updates ensure your JS and XML are properly loaded
  4. This approach doesn't replace the whole component, just extends it cleanly

After implementing this, your field should appear in the SEO dialog and be properly saved with the page data. The value will be available on the website.page model for use in your templates or other business logic.

🚀 Did This Solve Your Problem?

If this answer helped you save time, money, or frustration, consider:

✅ Upvoting (👍) to help others find it faster

✅ Marking as "Best Answer" if it resolved your issue

Your feedback keeps the Odoo community strong! 💪

(Need further customization? Drop a comment—I’m happy to refine the solution!)

1
Avatar
Discard
Gilvanilson Santos
Author

Hi Piyush,

Thanks a lot for taking the time to share this solution with us. It’s very helpful! We’re going to test the implementation and will let you know how it goes. Really appreciate your help!

Avatar
D Enterprise
Best Answer

Hii,

Ensure your field is present on the model
You already did this — great.
# models/website_page.py

from odoo import models, fields


class WebsitePage(models.Model):

    _inherit = 'website.page'


    webpage_schema_type = fields.Selection([

        ('WebPage', 'WebPage'),

        ('AboutPage', 'About Page'),

        ('CheckoutPage', 'Checkout Page'),

        ('CollectionPage', 'Collection Page'),

        ('ContactPage', 'Contact Page'),

        ('FAQPage', 'FAQ Page'),

        ('ProfilePage', 'Profile Page'),

        ('SearchResultsPage', 'Search Results Page'),

    ], string="WebPage Schema Markup", default="WebPage")

Patch the SeoDialog and its template

  • You need to patch both:
    • setup() to handle the state.
    • template to render the field in the modal.

/** @odoo-module **/


import { patch } from "@web/core/utils/patch";

import { SeoDialog } from "@website/js/components/dialog/seo";

import { xml } from "@odoo/owl";


patch(SeoDialog.prototype, {

    setup() {

        super.setup(...arguments);

        this.state.webpage_schema_type = this.props.values.webpage_schema_type || "WebPage";

    },


    getAdditionalFields() {

        return xml`

            <div class="form-group">

                <label>WebPage Schema Markup</label>

                <select t-model="state.webpage_schema_type" class="form-control">

                    <option value="WebPage">WebPage</option>

                    <option value="AboutPage">About Page</option>

                    <option value="CheckoutPage">Checkout Page</option>

                    <option value="CollectionPage">Collection Page</option>

                    <option value="ContactPage">Contact Page</option>

                    <option value="FAQPage">FAQ Page</option>

                    <option value="ProfilePage">Profile Page</option>

                    <option value="SearchResultsPage">Search Results Page</option>

                </select>

            </div>

        `;

    },


    _getValues() {

        return {

            ...super._getValues(),

            webpage_schema_type: this.state.webpage_schema_type,

        };

    },

});

Patch the template

You must ensure the patched field is actually rendered. Inside your JS module:
patch(SeoDialog, {

    components: SeoDialog.components,

    template: xml`

        <div>

            <t t-call="website.SeoDialog.main">

                <!-- your custom field injected below -->

                <t t-raw="this.getAdditionalFields()" />

            </t>

        </div>

    `,

});


0
Avatar
Discard
Gilvanilson Santos
Author

Hi Desk,

Thanks for the advice! It’s good to know we’re on the right track with the model. We’ll test the implementation and get back to you with feedback. Thanks again for your help!

Enjoying the discussion? Don't just read, join in!

Create an account today to enjoy exclusive features and engage with our awesome community!

Sign up
Related Posts Replies Views Activity
Odoo SEO – How to handle parameterized URLs? Is robots.txt blocking the right move?
seo website
Avatar
0
Oct 25
1707
Optimize Seo Error - V14 - V15
seo website
Avatar
0
Mar 23
2765
Paid Website Orders not Automatically Confirmed
ecommerce website Odoo 18
Avatar
Avatar
Avatar
Avatar
3
Sep 25
2138
'noindex' in meta tags even when robots.txt have been updated
seo website robots.txt
Avatar
0
Aug 24
2525
Rewriting URL in Odoo 11 ( Odoo Sh)
url seo website
Avatar
0
Aug 18
4021
Community
  • Tutorials
  • Documentation
  • Forum
Open Source
  • Download
  • Github
  • Runbot
  • Translations
Services
  • Odoo.sh Hosting
  • Support
  • Upgrade
  • Custom Developments
  • Education
  • Find an Accountant
  • Find a Partner
  • Become a Partner
About us
  • Our company
  • Brand Assets
  • Contact us
  • Jobs
  • Events
  • Podcast
  • Blog
  • Customers
  • Legal • Privacy
  • Security
الْعَرَبيّة Català 简体中文 繁體中文 (台灣) Čeština Dansk Nederlands English Suomi Français Deutsch हिंदी Bahasa Indonesia Italiano 日本語 한국어 (KR) Lietuvių kalba Język polski Português (BR) română русский язык Slovenský jazyk slovenščina Español (América Latina) Español ภาษาไทย Türkçe українська Tiếng Việt

Odoo is a suite of open source business apps that cover all your company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc.

Odoo's unique value proposition is to be at the same time very easy to use and fully integrated.

Website made with

Odoo Experience on YouTube

1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.

Live support on Youtube
Watch now