MetaFormat

Generate html meta tags

MODX 2.2+
PHP 5+

MODX Extras
GitHub

modx php plugin

Overview

MetaFormat generates html meta tags, social tags for Facebook Open Graph and Twitter cards, css and JS includes, and favicon links. MetaFormat is fully customisable, allowing you to mark-up your documents in a uniformed way with the minimum of fuss.

<meta charset="UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="mad about brighton" />
<meta name="description" content="A PHP MODX Revolution extra to automatically generate html meta tags" />
<meta name="author" content="Mad About Brighton" />
<title>MetaFormat | projects coded | mad about brighton</title>
<base href="https://madaboutbrighton.net/" />
<link href="https://madaboutbrighton.net/projects/metaformat"   rel="canonical"  />

[[MetaFormat]]

Options

The output of MetaFormat can be customised using the options shown below.

Property	Description	Default
`id`	The ID of the resource. If omitted, defaults to current resource.
`titleMax`	Maximum number of items to appear in the TITLE tag.	3
`titleSep`	Separator to appear between TITLE tag components.	\|
`titleItem`	Resource field from which to generate the TITLE tag from. Either pagetitle, longtitle, menutitle or description.	pagetitle
`titleHomeSuffix`	String to append to the TITLE tag of the home page.
`descriptionItem`	Resource field or template variable from which to generate the META keywords tag from. Either pagetitle, longtitle, menutitle, description, or template variable prefixed with tv.	description
`descriptionMaxLength`	The maximum length the description is to be truncated to.	150
`keywords`	Comma-separated list of keywords.
`keywordsItem`	Resource field or template variable from which to generate the META keywords tag from. Either pagetitle, longtitle, menutitle, description, or template variable prefixed with tv.	tv.keywords
`authorItem`	Resource field from which to generate the META author tag from. Either createdby, editedby or publishedby.	editedby
`charset`	Page encoding. If omitted defaults to the MODX setting modx_charset.
`legacyMode`	Internet Explorer legacy mode, e.g. IE=edge,chrome=1. However, the preferred method is to apply custom headers on the web-server.
`viewport`	Layout control setting for mobile browsers, e.g. width=device-width, initial-scale=1, user-scalable=1
`base`	Base URL. If omitted defaults to the MODX setting site_url.
`siteLive`	If site is not live (0) then all pages will have their robots meta-tag set to the `robotsNoIndex` value.	1
`hostMedia`	The host to prefix all media links with, such as style-sheets and short-cut icon. Useful if you use a separate domain for serving media files.
`hostCode`	The host to prefix all scripts with. Useful if you use a separate domain for serving JavaScript files.
`hostAll`	The host to prefix all media links and scripts with. Overrides hostMedia and hostCode.
`css`	Comma-separated list of resource ids or paths of style-sheets, to be inserted as LINK tags. Each path automatically prefixed with `hostMedia` or `hostAll`, if set.
`js`	Comma-separated list of resource ids or paths of JavaScript files, to be inserted as LINK tags. Each path automatically prefixed with `hostCode` or `hostAll`, if set.
`rss`	Comma-separated list of resource ids or paths of RSS files, to be inserted as LINK tags.
`rssType`	RSS mime-type used in RSS LINK tags.	application/rss+xml
`preMain`	Comma-separated list of chunk names to be inserted before MetaFormat output.
`postMain`	Comma-separated list of chunk names to be inserted after MetaFormat output.
`preCSS`	Comma-separated list of chunk names to be inserted before CSS LINK tags.
`postCSS`	Comma-separated list of chunk names to be inserted after CSS LINK tags.
`preJS`	Comma-separated list of chunk names to be inserted before SCRIPT tags.
`postJS`	Comma-separated list of chunk names to be inserted after SCRIPT tags.
`social`	Comma-separated list of chunk names, which contain social tags like Open Graph. Several chunk properties are made available to these chunks, such as `socialImage`, `socialTwitter` and `socialFacebook`.
`socialItems`	JSON formatted string specifying the properties to pass to `social` as placeholders.
`icon`	Name of chunk containing icon tags. Useful if you have a lot of icon tags.
`favicon`	Path to favicon. Path automatically prefixed with `hostCode` or `hostAll`.
`robotsIndex`	The robots META tag to apply to a resource when their searchable property set to true.	index, follow
`robotsNoIndex`	The robots META tag to apply to a resource when their searchable property set to false.	noindex, follow
`excludeBase`	Whether to exclude the BASE tag.	0

Examples

Including JS and CSS

The js and css properties allow you to include JavaScript and style-sheets.

Each property is a comma-separated list that can include a combination of resource ids and URLs.

<meta charset="UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="mad about brighton" />
<meta name="description" content="A PHP MODX Revolution extra to automatically generate html meta tags" />
<meta name="author" content="Mad About Brighton" />
<title>MetaFormat | projects coded | mad about brighton</title>
<base href="https://madaboutbrighton.net/" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"  media="all" rel="stylesheet" type="text/css" />
<link href="https://madaboutbrighton.net/files/css.css"  media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://madaboutbrighton.net/files/js.js"></script>

[[MetaFormat?
  &css=`//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css, 7`
  &js=`//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js, 6`
]]

Responsive design

The legacyMode and viewport properties make it easy to include mark-up for responsive design.

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="mad about brighton" />
<meta name="description" content="A PHP MODX Revolution extra to automatically generate html meta tags" />
<meta name="author" content="Mad About Brighton" />
<title>MetaFormat | projects coded | mad about brighton</title>
<base href="https://madaboutbrighton.net/" />
<link href="https://madaboutbrighton.net/projects/metaformat"   rel="canonical"  />

[[MetaFormat?
  &legacyMode=`IE=edge,chrome=1`
  &viewport=`width=device-width, initial-scale=1, user-scalable=1`
]]

Social tags

The social property allows you to add multiple templates that contain your social mark-up, like Twitter or Open Graph tags.

The property accepts a comma-separated list of template names. You can use a couple of MetaFormats helper-templates or create your own ones.

socialItems property is a JSON formatted string that contains your social properties. These are passed to the social templates as placeholders. For example, og:image would become a placeholder named metaformat.og.image.

<base href="https://madaboutbrighton.net/" />
<meta property="og:title" content="MetaFormat" />
<meta property="og:type" content="article" />
<meta property="og:description" content="MetaFormat is a PHP MODX Revolution extra that generates the mark-up for your HTML resource header . MetaFormat is fully customisable, allowing you to mark-up your documents in a uniformed way with the minimum of fuss." />
<meta property="og:site_name" content="mad about brighton" />
<meta property="og:locale" content="en_GB" />
<meta property="og:url" content="https://madaboutbrighton.net/projects/metaformat" />
<meta property="og:image" content="/assets/images/my-image.jpg" />
<meta property="fb:app_id" content="mySiteFacbookID" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mySiteTwitter" />

[[MetaFormat?
  &social=`MetaFormatSocialOpenGraph, MetaFormatSocialTwitter`
  &socialItems=`{ "og:image" : "/assets/images/my-image.jpg",
                  "og:type" : "article",
                  "fb:app_id" : "mySiteFacbookID",
                  "twitter:site" : "@mySiteTwitter",
                  "twitter:card" : "summary_large_image"}`
]]

The favicon

The favicon property can be used to specify the location of your favicon.ico

However, there are lots of different ways to display icons on your website, sometimes for different devices with the need to specify a variety of sizes. To accommodate this, you can use the icon property to specify the name of a template that contains your icon mark-up.

<meta charset="UTF-8" />
<meta name="description" content="A PHP MODX Revolution extra to automatically generate html meta tags" />
<title>MetaFormat | projects coded | mad about brighton</title>
<base href="https://madaboutbrighton.net/" />
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/s57-Ic42.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/s114-Ic42.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/s152-Ic42.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/s96-Ic42.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/s16-Ic42.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/s32-Ic42.png" />

[[MetaFormat?
  &icon=`myIconChunk`
]]

Templates

MetaFormat makes some helper-templates available. Hopefully they will make things easier for you.

MetaFormatJsStandard

This template is useful when used with the preJS property.

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

MetaFormatSocialTwitter

This template is useful when used with the social property.

<meta name="twitter:card" content="[[+metaformat.twitter.card:default=`summary_large_image`]]" />
[[+metaformat.twitter.site:notempty=`<meta name="twitter:site" content="[[+metaformat.twitter.site]]" />`]]
[[+metaformat.twitter.creator:notempty=`<meta name="twitter:creator" content="[[+metaformat.twitter.creator]]" />`]]

MetaFormatSocialOpenGraph

This template is useful when used with the social property.

<meta property="og:title" content="[[+metaformat.og.title:default=`[[*pagetitle]]`]]" />
<meta property="og:type" content="[[+metaformat.og.type:default=`article`]]" />
<meta property="og:description" content="[[+metaformat.og.description:default=`[[*introtext]]`]]" />
<meta property="og:site_name" content="[[+metaformat.og.site_name:default=`[[++site_name]]`]]" />
<meta property="og:locale" content="[[+metaformat.og.locale:default=`[[++locale]]`]]" />
<meta property="og:url" content="[[+metaformat.og.url:default=`[[+metaformat.canonical]]`]]" />
<meta property="og:image" content="[[+metaformat.og.image]]" />
[[+metaformat.fb.app_id:notempty=`<meta property="fb:app_id" content="[[+metaformat.fb.app_id]]" />`]]

Licence

MetaFormat by mad about brighton is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Permissions beyond the scope of this licence may be available by contacting me.