Composr Tutorial: Metadata

This tutorial provides an explanation of how metadata works within Composr.

Introduction

Composr contains the following primary metadata that you have a moderate chance of wanting to edit:

• Title
• Meta Keywords
• Meta Description
• Open Graph Title
• Open Graph Image
• Favicon
• Apple Web Clip image

(there are many other items of published metadata, such as the Site Name, and modification dates, but you're unlikely to want to change the automatic settings for those)

Other metadata formats are supported, such as Dublin Core metadata, but are disabled in the default templates in order to reduce bandwidth overheads.

There are many other "behind-the-scenes" features not discussed above, such as print CSS, and RSS. We are only discussing page-embedded metadata here.

All metadata may be automatically set by Composr as described below, but ultimately can also be completely customised in a theme.

Title

The title is used for the browser window/tab, and often used by external linkers e.g. Google.

It is generally devised by combining your Site Name, with the screen title of the page being viewed.

The Site Name is set at Admin Zone > Setup > Configuration > Site Options.

For a Comcode Page, the title may be edited via editing that page. The title is the same as the actual h1 heading of the page. For other content (e.g. a news post), the title is usually specified in its own field.

If Composr detects that the Site Name is also contained within the title of the screen being viewed, the Site Name will not be included in order to reduce duplication.

In your HTML the title tag looks similar to:

Meta Keywords and Description

The Meta Keywords and Description are not used by many wide-stream services nowadays (Google doesn't really use them), but are still considered a primary standard for information exchange, so most people do maintain them.

The site-wide keywords and description can be set at Admin Zone > Setup > Configuration > Site Options.

If some content (e.g. a Comcode page) defines its own description, it will be used instead.

If some content defines its own meta keywords, these will get merged in.

Almost all forms of content in Composr may set their own keywords and description, and by default they get autodetected via automatic content analysis (i.e. finding the most commonly used words in the text, and copying the main descriptive part of the content as the meta description too).

In your HTML this metadata looks similar to:

If you don't like the presence of the metadata options then you can disable the "Enable SEO fields" option.

Open Graph

Open Graph is the system devised by Facebook, for automatically supplying details relating to a webpage when a link to it is posted on Facebook. It's an Open Standard that may also be used by others.

The Open Graph Title is taken as the same as the screen title (it's not combined with the site name, which we pass separately to Facebook).

The Open Graph Image is either contextual (the main image of whatever content is being viewed), or the logo/standalone_logo theme image.

Note that logo/standalone_logo is used for a number of things, including the e-mail header, and in RSS feeds. It is intended to be a simple standalone logo (i.e. not tied into the overall web design).

In your HTML the Open Graph tags look similar to:

Icons

The Favicon is the little icon used in bookmarks/favorites, and next to the browser tab. It is the favicon theme image.

There are many tools out there for creating favicons, but in the most basic form you can just uploads a 32x32 PNG file.

The Apple Web Clip image is similar to a Favicon, but larger. It is used primarily as the launch icon when a smartphone user saves a link onto their phone home screen. It is the webclipicon theme image.

There are many different recommended sizes for Apple Web Clip images, for different smartphone screen sizes. The easiest choice is just to supply a 129x129 PNG file. More advanced users could customise the HTML_HEAD.tpl template to supply multiple possible images.

In your HTML the icon tags look similar to:

Worked example - The site-wide Open Graph image

The default Open Graph image definitely isn't appropriate for live sites – like any logo, it should be changed. Unfortunately as it is metadata, the need to do it can go unnoticed.

Here are the step by step instructions for selecting an appropriate image:

1. Log in to Admin Zone, and you should see the dashboard
2. Next, click or mouse-over on the 'Style' menu which is in the toolbar at the top just below the header
3. Within the 'Style' selection you should see the 'Themes' icon, click on 'Themes'
4. After this you will be taken to 'Manage Themes' page, where you would find the Theme of your current website and the default Composr theme
5. Look under your site theme, and in the options listed for it you should see a link for 'Manage theme images'; click this
6. In the 'Manage theme images' page you should see a list of different types of images used in the website,  choose 'Logo' from this list which will expand to show all the logo images used in the website currently
7. Click on standalone_logo and you'll be taken to a 'edit the image' page where you can simply upload a new file and scroll down towards the bottom of the page and hit 'Save'

See also

• Supplementary web technologies (media, social networking, etc)
• Improving your search engine ranking
• URL Schemes in Composr
• Guide to web technologies (including HTML, CSS, and JavaScript)
• Browser version requirements

Feedback

Have a suggestion? Report an issue on the tracker.