Custom meta details for Serendipity static pages

As discussed in Improvement of Static Page Plugin, a folder named "backend_templates" was added to the static page plugin beginning with version 3.7. Inside that folder is a file named "default_staticpage_backend.tpl". This is the smarty template used to display static page properties when creating or editing static pages using the static page backend template "simple template".

First, create this folder within your template, such as /serendipity/templates/YOURTEMPLATE/backend_templates/. Next, place a copy of the file default_staticpage_backend.tpl into this newly created subfolder of your template. Alternatively, you could rename the file so you have both the original (which will be loaded from the plugin folder) and your renamed version.

For simplicity, I am going to place the new properties just after "pre-content", which will make them the last items in the box labeled "structural"... so, look for this code in your copy of default_staticpage_backend.tpl:

           <div class="sp_sect">
                <label class="sp_label" title="{staticpage_input item="pre_content" what="desc"|escape:js}">{staticpage_input item="pre_content" what="name"|escape:js}</label><br />
                    {staticpage_input item="pre_content"}
            </div>

{* CUSTOM TITLE ELEMENT *}
            <div class="sp_sect">
                <label class="sp_label" title="Custom Title Element">HTML page title element</label><br />
                    <input class="input_textbox" type="text" name="serendipity[plugin][custom][title_element]" value="{$form_values.custom.title_element|@default:''}" />
            </div>

{* CUSTOM META Description *}
            <div class="sp_sect">
                <label class="sp_label" title="Custom META Description">META Description</label><br />
                    <input class="input_textbox" type="text" name="serendipity[plugin][custom][meta_description]" value="{$form_values.custom.meta_description|@default:''}" />
            </div>

{* CUSTOM META Keywords *}
            <div class="sp_sect">
                <label class="sp_label" title="Custom META Keywords">META Keywords</label><br />
                    <input class="input_textbox" type="text" name="serendipity[plugin][custom][meta_keywords]" value="{$form_values.custom.meta_keywords|@default:''}" />
            </div>

We now have 3 new properties for our static pages - a <title> element, META description and META keywords.

Now we need our template to emit this information when it exists. For that, you will need to edit your template's index.tpl file. It SHOULD have a <title> element, and probably looks like this:

<title>{$head_title|@default:$blogTitle}{if $head_subtitle} - {$head_subtitle}{/if}</title>

Lets replace that with this:

    {if $staticpage_custom.title_element}
        <title>{$staticpage_custom.title_element|escape:htmlall}</title>
    {else}
        <title>{$head_title|@default:$blogTitle}{if $head_subtitle} - {$head_subtitle}{/if}</title>
    {/if}
    {if $staticpage_custom.meta_description}
        <meta name="description" content="{$staticpage_custom.meta_description|escape:htmlall}" />
    {/if}
    {if $staticpage_custom.meta_keywords}
        <meta name="keywords" content="{$staticpage_custom.meta_keywords|escape:htmlall}" />
    {/if}

IMPORTANT: If you use this method, do NOT use the HTML META-tag options "HTML default meta description" and "HTML default meta keywords". Unlike entries, the plugin has no way of knowing that static pages may have their own descriptions and keywords, and static pages have no way of knowing the plugin is setting defaults. Other than this caveat, this method is an easy way to get custom meta details on each static page.

If you enjoyed this article, please leave a comment and bookmark it at your favorite social bookmarking sites using the Bookmark button below so that others will enjoy it as well!