[IMP] website: improvements in SEO dialog

In this commit, we have changed behaviour of SEO dialog. Now when you
keep title and description fields empty, then the page will use default
title and description. We have added default_title and default_description
to render the preview with default values when title and description
fields are empty in SEO dialog.

Task ID:1949636

closes odoo/odoo#32449

Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>

addons/website/models/mixins.py

@@ -93,7 +93,8 @@ class SeoMetadata(models.AbstractModel):
         twitter_meta['twitter:image'] = meta_image
         return {
             'opengraph_meta': opengraph_meta,
-            'twitter_meta': twitter_meta
+            'twitter_meta': twitter_meta,
+            'meta_description': default_meta.get('default_meta_description')
         }
 
 

addons/website/static/src/js/menu/seo.js

@@ -220,6 +220,8 @@ var HtmlPage = Class.extend(mixins.PropertiesMixin, {
     init: function () {
         mixins.PropertiesMixin.init.call(this);
         this.initTitle = this.title();
+        this.defaultTitle = $('meta[name="default_title"]').attr('content');
+        this.defaultDescription = $('meta[name="default_description"]').attr('content') || _t("The description will be generated by social media based on page content unless you specify one.");
         this.initDescription = this.description();
     },
     url: function () {
@@ -230,7 +232,7 @@ var HtmlPage = Class.extend(mixins.PropertiesMixin, {
     },
     changeTitle: function (title) {
         // TODO create tag if missing
-        $('title').text(title.trim() || this.initTitle);
+        $('title').text(title.trim() || this.defaultTitle);
         this.trigger('title-changed', title);
     },
     description: function () {
@@ -348,9 +350,12 @@ var MetaTitleDescription = Widget.extend({
         if (!this.canEditDescription) {
             this.$description.attr('disabled', true);
         }
-
-        this.$title.val(this.htmlPage.title());
-        this.$description.val(this.htmlPage.description());
+        if (this.htmlPage.title().trim() !== this.htmlPage.defaultTitle.trim()) {
+            this.$title.val(this.htmlPage.title());
+        }
+        if (this.htmlPage.description().trim() !== this.htmlPage.defaultDescription.trim()) {
+            this.$description.val(this.htmlPage.description());
+        }
 
         this._descriptionOnChange();
     },
@@ -358,13 +363,13 @@ var MetaTitleDescription = Widget.extend({
      * Get the current title
      */
     getTitle: function () {
-        return this.$title.val().trim() || this.htmlPage.initTitle;
+        return this.$title.val().trim() || this.htmlPage.defaultTitle;
     },
     /**
      * Get the current description
      */
     getDescription: function () {
-        return this.$description.val();
+        return this.$description.val() || this.htmlPage.defaultDescription;
     },
     /**
      * @private

addons/website/static/src/xml/website.seo.xml

@@ -62,13 +62,13 @@
                     <label for="website_meta_title">
                         Title <i class="fa fa-question-circle-o" title="The title will take a default value unless you specify one."/>
                     </label>
-                    <input type="text" name="website_meta_title" id="website_meta_title" class="form-control" maxlength="70" size="70"/>
+                    <input type="text" name="website_meta_title" id="website_meta_title" class="form-control" placeholder="Keep empty to use default value" maxlength="70" size="70"/>
                 </div>
                 <div class="form-group">
                     <label for="website_meta_description">
                         Description <i class="fa fa-question-circle-o" title="The description will be generated by search engines based on page content unless you specify one."/>
                     </label>
-                    <textarea name="website_meta_description" id="website_meta_description" class="form-control"/>
+                    <textarea name="website_meta_description" id="website_meta_description" placeholder="Keep empty to use default value" class="form-control"/>
                     <div class="alert alert-warning mt16 mb0 small" id="website_meta_description_warning" style="display: none;"/>
                 </div>
             </div>
@@ -140,7 +140,7 @@
             </div>
             <div class="col-lg-6">
                 <div class="card p-0 mb16">
-                    <div class="card-header">Preview</div>
+                    <div class="card-header">Social Preview</div>
                     <img class="card-img-top o_meta_active_img" t-att-src="widget.activeMetaImg"/>
                     <div class="card-body px-3 py-2">
                         <h6 class="text-alpha card-title mb0"><t t-esc="widget.metaTitle"/></h6>

addons/website/views/website_templates.xml

@@ -173,14 +173,15 @@
             'data-oe-company-name': res_company.name
         }"/>
         <t t-if="not title">
+            <t t-if="not additional_title and main_object and 'name' in main_object">
+                <t t-set="additional_title" t-value="main_object.name"/>
+            </t>
+            <t t-set="default_title"> <t t-if="additional_title"><t t-raw="additional_title"/> | </t><t t-raw="(website or res_company).name"/> </t>
             <t t-if="main_object and 'website_meta_title' in main_object and main_object.website_meta_title">
                 <t t-set="title" t-value="main_object.website_meta_title"/>
             </t>
             <t t-else="">
-                <t t-if="not additional_title and main_object and 'name' in main_object">
-                    <t t-set="additional_title" t-value="main_object.name"/>
-                </t>
-                <t t-set="title"><t t-if="additional_title"><t t-raw="additional_title"/> | </t><t t-raw="(website or res_company).name"/></t>
+                <t t-set="title" t-value="default_title"></t>
             </t>
         </t>
         <t t-set="x_icon" t-value="'/web/image/website/%s/favicon/' % website.id"/>
@@ -188,17 +189,18 @@
     <xpath expr="//t[@t-set='head_website']" position="replace">
         <t t-set="head_website">
             <meta name="generator" content="Odoo"/>
-
+            <t t-set="website_meta" t-value="main_object and main_object.get_website_meta() or {}"/>
+            <meta name="default_title" t-att-content="default_title" groups="website.group_website_designer"/>
             <meta t-if="main_object and 'website_indexed' in main_object
                 and not main_object.website_indexed" name="robots" content="noindex"/>
             <t t-set="meta_description" t-value="main_object and 'website_meta_description' in main_object
-                and main_object.website_meta_description or website_meta_description"/>
+                and main_object.website_meta_description or website_meta_description or website_meta.get('meta_description', '')"/>
             <t t-set="meta_keywords" t-value="main_object and 'website_meta_keywords' in main_object
                 and main_object.website_meta_keywords or website_meta_keywords"/>
             <meta t-if="meta_description or editable" name="description" t-att-content="meta_description"/>
             <meta t-if="meta_keywords or editable" name="keywords" t-att-content="meta_keywords"/>
             <t t-if="main_object">
-                <t t-set="website_meta" t-value="main_object.get_website_meta()"/>
+                <meta name="default_description" t-att-content="website_meta_description or website_meta.get('meta_description')" groups="website.group_website_designer"/>
                 <!-- OpenGraph tags for Facebook sharing -->
                 <t t-set="opengraph_meta" t-value="website_meta.get('opengraph_meta')"/>
                 <t t-if="opengraph_meta">

addons/website_blog/models/website_blog.py

@@ -274,4 +274,5 @@ class BlogPost(models.Model):
         blog_post_cover_properties = json.loads(self.cover_properties)
         res['default_opengraph']['og:image'] = res['default_twitter']['twitter:image'] = blog_post_cover_properties.get('background-image', 'none')[4:-1]
         res['default_opengraph']['og:title'] = res['default_twitter']['twitter:title'] = self.name
+        res['default_meta_description'] = self.subtitle
         return res

addons/website_event/models/event.py

@@ -154,4 +154,5 @@ class Event(models.Model):
         res['default_opengraph']['og:title'] = res['default_twitter']['twitter:title'] = self.name
         res['default_opengraph']['og:description'] = res['default_twitter']['twitter:description'] = self.date_begin
         res['default_twitter']['twitter:card'] = 'summary'
+        res['default_meta_description'] = self.date_begin
         return res

addons/website_forum/models/forum.py

@@ -389,6 +389,7 @@ class Post(models.Model):
         res['default_opengraph']['og:description'] = res['default_twitter']['twitter:description'] = self.plain_content
         res['default_opengraph']['og:image'] = res['default_twitter']['twitter:image'] = "/web/image/res.users/%s/image" % (self.create_uid.id)
         res['default_twitter']['twitter:card'] = 'summary'
+        res['default_meta_description'] = self.plain_content
         return res
 
     @api.constrains('parent_id')

addons/website_sale/models/product.py

@@ -376,6 +376,7 @@ class ProductTemplate(models.Model):
         res['default_opengraph']['og:description'] = res['default_twitter']['twitter:description'] = self.description_sale
         res['default_opengraph']['og:title'] = res['default_twitter']['twitter:title'] = self.name
         res['default_opengraph']['og:image'] = res['default_twitter']['twitter:image'] = "/web/image/product.template/%s/image" % (self.id)
+        res['default_meta_description'] = self.description_sale
         return res
 
     @api.multi

addons/website_slides/models/slide_slide.py

@@ -669,4 +669,5 @@ class Slide(models.Model):
         res['default_opengraph']['og:title'] = res['default_twitter']['twitter:title'] = self.name
         res['default_opengraph']['og:description'] = res['default_twitter']['twitter:description'] = self.description
         res['default_opengraph']['og:image'] = res['default_twitter']['twitter:image'] = "/web/image/slide.slide/%s/image_small" % (self.id)
+        res['default_meta_description'] = self.description
         return res