[title sub="Written by Chris Graham"]Composr Tutorial: Metadata[/title]

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

[contents]decimal,lower-alpha[/contents]

[title="2"]Introduction[/title]

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="2"]Title[/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:
[code="HTML"]
<title>Example page &ndash; yourdomain.com</title>
[/code]

[title="2"]Meta Keywords and Description[/title]

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:
[code="HTML"]
<meta name="description" content="This is an example page." />
<meta name="keywords" content="example,keywords,go,here" />
[/code]

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

[title="2"]Open Graph[/title]

This is covered in the [page="_SEARCH:sup_facebook"]Facebook Support / Open Graph[/page] tutorial.

[title="2"]Twitter Cards[/title]

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 [tt]twitter:card[/tt], which has a value of [tt]summary_large_image[/tt] for Composr gallery images.

If you have a Twitter account you want to promote, you may also want to add:
[code="HTML"]
<meta name="twitter:site" content="@example" />
[/code]
(Where [tt]@example[/tt] 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:[list="1"]
[*] Create a custom field for the gallery images (Admin Zone > Content > Galleries > Choose custom 'Image' fields). It should be of field type Codename.
[*] Edit the [tt]GALLERY_ENTRY_SCREEN[/tt] 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}
[/code]
([tt]FIELD_0[/tt] assumes your custom field is the 1st custom field for gallery images, if it is not change accordingly)
[*] Edit the [tt]HTML_HEAD[/tt] 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}
[/code]
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}
[/code]
[/list]

[title="2"]Icons[/title]

The Favicon is the little icon used in bookmarks/favorites, and next to the browser tab. It is the [tt]favicon[/tt] 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 [tt]webclipicon[/tt] 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 [tt]HTML_HEAD.tpl[/tt] template to supply multiple possible images.

In your HTML the icon tags look similar to:
[code="HTML"]
<link rel="icon" href="http://yourbaseurl/themes/default/images/favicon.ico" type="image/x-icon" sizes="16x16 24x24 32x32 48x48" />
<link rel="apple-touch-icon" href="http://yourbaseurl/themes/default/images/webclipicon.ico" sizes="120x120 144x144 152x152" />
[/code]

[concepts
 1_key="Open Graph"                1_value="Facebook's standard for supplying web-page metadata"
 2_key="Twitter Card"              2_value="Twitter's standard for supplying web-page metadata"
 3_key="Favicon"                   3_value="The standardised small icon used for your webpage (typically the same across the whole website)"
]Concepts[/concepts]

[title="2"]See also[/title]

 - [page="_SEARCH:tut_fringe"]Supplementary web technologies (media, social networking, etc)[/page]
 - [page="_SEARCH:tut_seo"]Improving your search engine ranking[/page]
 - [page="_SEARCH:tut_url_schemes"]URL Schemes in Composr[/page]
 - [page="_SEARCH:tut_markup"]Guide to web technologies (including HTML, CSS, and JavaScript)[/page]
 - [page="_SEARCH:tut_browsers"]Browser version requirements[/page]
 - [page="_SEARCH:tut_website_health"]Website Health[/page]
 - [page="_SEARCH:sup_facebook"]Facebook Support / Open Graph[/page]

{$SET,tutorial_tags,core,Advice & Guidance,Introduction,regular}{$SET,tutorial_add_date,Mar 2015}{$SET,tutorial_summary,An explanation of how metadata works within Composr.}[block]main_tutorial_rating[/block]
