MetaFormat

MetaFormat

Generate html meta tags

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.