A PHP MODX Revolution extra to automatically generate html meta tags

Last modified: 22/07/2015 - 2 years ago

Requirements: MODX Revolution 2.2+ | PHP5+

Download: MODX Installer | MODX Extras Repository | GitHub

A project tagged as: modx, plugin

Twitter Google+ Facebook Reddit

Overview

MetaFormat generates the head tags for an HTML resource.

These days there can be an awful lot of information that is required within the HTML header, especially when you start including social tags like Open Graph, multiple favicon sizes and all the additional CSS and JS files required to make a modern website.

MetaFormat allows you to generate these tags in an easy and uniformed way. By including a basic snippet call in your resource header, all the required tags will be generated for you.

Snippets

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, 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

The MetaFormat snippet generates the tags within the HEAD of an HTML resource.

Default example

By default, MetaFormat outputs the key HEAD tags for the current resource.

<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]]

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="https://madaboutbrighton.net/projects/metaformat"   rel="canonical"  />
<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 chunks that contain your social mark-up, like Twitter or Open Graph tags.

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

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

<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"  />
<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 chunk that contains your icon mark-up.

<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"  />
<link rel="apple-touch-icon" sizes="57x57" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s57-Ic42/icon.png" />
<link rel="apple-touch-icon" sizes="114x114" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s114-Ic42/icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s72-Ic42/icon.png" />
<link rel="apple-touch-icon" sizes="144x144" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s144-Ic42/icon.png" />
<link rel="apple-touch-icon" sizes="60x60" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s60-Ic42/icon.png" />
<link rel="apple-touch-icon" sizes="120x120" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s120-Ic42/icon.png" />
<link rel="apple-touch-icon" sizes="76x76" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s76-Ic42/icon.png" />
<link rel="apple-touch-icon" sizes="152x152" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s152-Ic42/icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s196-Ic42/icon.png" />
<link rel="icon" type="image/png" sizes="160x160" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s160-Ic42/icon.png" />
<link rel="icon" type="image/png" sizes="96x96" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s96-Ic42/icon.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://lh3.googleusercontent.com/-dwiQyGKMQSA/Va-q8XcLVrI/AAAAAAAAAQ0/b5Kor5JKfEU/s16-Ic42/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://lh3.googleusercontent.com/-OahTDBtJNvo/VaU7cH2topI/AAAAAAAAAMc/-kgDHiT2zF4/s32-Ic42/icon.png" />
[[MetaFormat?
  &icon=`myIconChunk`
]]

Chunks

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

MetaFormatJsStandard

This chunk 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 chunk 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 chunk 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 license may be available by contacting me.