[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>

9 files changed, 30 insertions, 17 deletions

diff --git a/addons/website/models/mixins.py b/addons/website/models/mixins.py
index 1d46b55c3bd..39a14b6060e 100644
--- a/addons/website/models/mixins.py
+++ b/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')
         }
 
 
diff --git a/addons/website/static/src/js/menu/seo.js b/addons/website/static/src/js/menu/seo.js
index 85d959cb3c6..332fde71a4f 100644
--- a/addons/website/static/src/js/menu/seo.js
+++ b/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
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index bf2de26d4ce..1aac9fc49a7 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/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>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 36e376975d2..6da73cda8dd 100644
--- a/addons/website/views/website_templates.xml
+++ b/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">
diff --git a/addons/website_blog/models/website_blog.py b/addons/website_blog/models/website_blog.py
index 6616b62ce43..c6a4fda0b3b 100644
--- a/addons/website_blog/models/website_blog.py
+++ b/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
diff --git a/addons/website_event/models/event.py b/addons/website_event/models/event.py
index 90dc9f0a856..17d9b1bd328 100644
--- a/addons/website_event/models/event.py
+++ b/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
diff --git a/addons/website_forum/models/forum.py b/addons/website_forum/models/forum.py
index 60a6edea242..be2a5822127 100644
--- a/addons/website_forum/models/forum.py
+++ b/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')
diff --git a/addons/website_sale/models/product.py b/addons/website_sale/models/product.py
index c3c641bedff..e4d37a6ec76 100644
--- a/addons/website_sale/models/product.py
+++ b/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
diff --git a/addons/website_slides/models/slide_slide.py b/addons/website_slides/models/slide_slide.py
index 7b05ed91584..91c327b9090 100644
--- a/addons/website_slides/models/slide_slide.py
+++ b/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