Composr Tutorial: Metadata

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

Introduction

By default Composr outputs 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
• Twitter Card type
• 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. search engines.

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 (Search engines don'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" configuration option.

Open Graph

This is covered in the Facebook Support / Open Graph tutorial.

Twitter Cards

Twitter Card is built on top of Open Graph. It allows URLs posted on Twitter to be associated with Twitter accounts, and to be presented in a better way.
We output twitter:card, which has a value of summary_large_image for Composr gallery images.

If you have a Twitter account you want to promote, you may also want to add:
(Where @example is your Twitter account)

Or if you want to allow individual content items to have their own metadata specifying the creator, you can do that. Here's an example for gallery images:

1. Create a custom field for the gallery images (Admin Zone > Content > Galleries > Choose custom 'Image' fields). It should be of field type Codename.
2. Edit the GALLERY_ENTRY_SCREEN template, adding the following to the end:
   

   Code (HTML)

   {+START,IF,{$EQ,{MEDIA_TYPE},image}}{$METADATA,twitter_handle,{$CATALOGUE_ENTRY_FIELD_VALUE,{$GET,bound_catalogue_entry},0}}{+END}
    
   (FIELD_0 assumes your custom field is the 1st custom field for gallery images, if it is not change accordingly)
3. Edit the HTML_HEAD template, changing:
   

   Code (HTML)

   {+START,IF,{$EQ,{$METADATA,type},Image}}
           <meta property="twitter:card" content="summary_large_image" />
   {+END}
   {+START,IF,{$NEQ,{$METADATA,type},Image}}
           <meta property="twitter:card" content="summary" />
   {+END}
    
   to:
   

   Code (HTML)

   {+START,IF,{$EQ,{$METADATA,type},Image}}
           <meta property="twitter:card" content="summary_large_image" />
   {+END}
   {+START,IF,{$NEQ,{$METADATA,type},Image}}
           <meta property="twitter:card" content="summary" />
   {+END}
   {+START,IF_NON_EMPTY,{$METADATA,twitter_handle}}
           <meta name="twitter:creator" content="@{$METADATA*,twitter_handle}" />
   {+END}
    

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 upload 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:

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
• Website Health
• Facebook Support / Open Graph

Feedback

Have a suggestion? Report an issue on the tracker.