Separate Browser Title from Content Title

This will run you through creating a Rapido element that we will use to replace the browsers <title> element to allow you to specify a different title for the page whilst leaving the default H1 tags intact.

First go to the Dexterity content types control panel (http://yoursite.com/@@dexterity-types).

Select the type you want to add the field to and add a new string field and call it "SEO Title", the short name should then appear as: seo_title.

Ensure you have Rapido installed, go to your theming control panel (http://yoursite.com/@@theming-controlpanel) and create a folder structure in your theme as per this article. Here's the folder structure we are using for this example:

THEME_FILES
|--rapido
  |--seo
    |--settings.yaml
    |--blocks
       |--seotitle.yaml
       |--seotitle.py
       |--seotitle.html

Below is the content of each file (excluding settings.yaml as it is not important for this):

seotitle.yaml

elements:
    seotitle:
        type: BASIC

seotitle.py

def seotitle(context):
    site_title = u'%s' % context.portal.Title
    seo_title = u'%s' % context.content.seo_title
    content_title = u'%s' % context.content.Title
    
    try:
        title = seo_title + ' | ' + site_title
    except:
        title = content_title + ' | ' + site_title
        
    title_tag = '<title>%s</title>' % title
    
    return title_tag

Regarding the above script, you can update the divider line to whatever you want ("|").

seotitle.html

{seotitle}

Go to your rules XML file and update the following:

<?xml version="1.0" encoding="UTF-8"?>
<rules
    xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- Apply the following rules to standard Plone pages -->
    <rules css:if-content="#visual-portal-wrapper">

        <theme href="index.html" />

        <!-- Replace title with Plone's page title -->
        <replace css:theme="html head title" css:content="html head title" />
        
        ...

    </rules>
</rules>

And replace it for this:

<replace css:theme="html head title" css:content="title"
    href="/@@rapido/seo/blocks/seotitle" />

You will need to add this field onto every type you want a title for, although if nothing is entered it should default to the content type's "Title" field.