Magic Heading

Easy creation and management of page titles, headings, descriptions and metadata.  Add a Magic Heading block to a page, or better still, add it to the page defaults and build the magic into an entire site. All your headings, titles, metadata and descriptions will magically stay consistent with your content.

Magic Heading will magically:

  • Insert a heading based on the page name, title, path, and user entered text.
  • Change the browser tab title to match the page name, title, path, and user entered text.
  • Write the title back to the page meta_title attribute.
  • Parse the page to extract a description, and write that back to the page meta_description and C5 collection description.
  • Set Facebook title and description metadata.

Each of these actions is configurable and optional.

Adding a new page is a bit of a chicken and egg thing. You create a page with a name and path, but don’t yet know enough to write the description or meta-data. Then you edit the page and enter a heading, usually the same as the page name, write some content, then use the first few sentences of the content to go back and write the meta-data and description. Then when you change the content, you have to remember to go back and change the meta-data and descriptions again. Or, like me, you are lazy and let the description and meta-data get out of date.

Magic heading takes all the hassle out of this. Add a Magic Heading to a page and the heading and browser title tab will automatically reflect the page name. The page will be analysed and the metadata and description will be automatically generated from the page.

It saves time when added to any individual page, so think of how much time it saves when added to page defaults, with every new page instantly having a heading to match the page name and all that meta-data and description text being magically added across an entire site. Think of how much more time it saves whenever you edit pages.

If all this is too much for some of your site editors, a reduced functionality Muggle Heading block strips out all the complicated bits and simply sets a heading and/or title for the page.


All of this is highly configurable

As well as starting from the page name, a Magic Heading can be based on the site name, the page path, the meta-title, or various combinations of these and text entered to go before or after. It can be any level of heading tag and CSS classes can be attached for additional styling.

The heading can even be left blank, so you can use all the meta-data and description magic without having to add a heading to the page!

The title is similarly but independently configurable, with the option of writing the title back to the mete-title attribute so it forms part of the html of the page.

When you enable capturing of the C5 page/collection description or metadata-description, Magic Heading will automatically parse the text on the page, extract description text and save it. The default settings are configured to be a good starting point when using the plain yoghurt default theme.

You have control over:

  • The approximate or exact maximum size of the generated description.
  • Whether to ignore small fragments of text, and how small.
  • What html tags to consider. By default, only <P> paragraph tags are parsed. Additional optional tags include H1 to H6 headings, list elements, table cells, links, form labels and legends.
  • Exclude before is a DOM selector (as used by jQuery), to exclude any part of the page before the matching element. By default this is #body, the DOM element that plan yoghurt uses for the ‘Main’ area of the page.
  • Exclude any is another DOM selector, to exclude any part of the page that is within the selected element. By default this is #sidebar, the DOM element that plan yoghurt uses for the ‘Sidebar’ area of the page.
  • To only parse visible content (or also use any hidden content).
  • Whether any existing descriptions should be overwritten.
  • Whether the Magic Heading itself should be included (also requires the appropriate heading level tag to be checked).
  • Whether repeated elements should be filtered out.

Finally, once your web site is stable, the headings, titles and descriptions will not change that often. So why suffer the network and database overhead of doing all this magic to re-create them each time the page is viewed? The Network and database overhead throttle reduces the overhead between 1 and 100%.

Start a web site with 100%, then either switch off the metadata and description magic or reduce the throttle to just a few % when the site is stable. If you make some changes, put the throttle back up to 100% for a while.

If you have added Magic Heading globally to a page deafault, but don’t want to change the description on a particular page, create and set a page attribute ‘protected_from_magic_heading’. You will still get the heading and title, but now the meta-data and description magic for the page will be blocked.

Under the hood

Because it works by parsing a page when it is viewed in a visitor’s web browser, Magic Heading can look at anything on the page after the actual Magic Heading block. Whatever C5 block generated the content or wherever the content comes from, from standard content blocks to eCommerce product listings, Magic Heading can use that content to create a page description.

The default settings are good for most plain yoghurt pages, but a site administrator will want to adjust these to match the layout and general content on a particular site, theme and page type.

The parsed description is then sent back to the web server by ajax and saved. By default, this happens each time a page is viewed. To reduce the network and database overhead on a busy site, reduce the throttle setting.

When tuning the settings for Magic Heading, the Diagnostics tab provides options to show diagnostics in the browser, reflect the parsed text back to the browser, and to log any updated description. Used in combination, these provide feedback and assurance that the Magic Heading configuration is appropriate to the page.

While the Diagnostic options in the add/edit dialog are only visible to Administrators, the diagnostics on the page can be visible to all site visitors. Diagnostics should therefore always be disabled on a live site.

If you add more than one Magic Heading block to a page, only the first set of meta-data and description magic will be active. Subsequent blocks will work at the Muggle level.

Be aware that magic heading can make changes to meta-data. Once made, these changes are not reversible simply by swithing off the magic.

Magic Heading renders headings in all browsers, but the metadata and description may not be parsed or returned to the server when viewed in Internet Explorer versions <= 7.