↓markdown↓ CMS Page Header and Meta Tags

The ↓markdown↓ Content Management System (md-CMS) allows for quick and easy web content creation, (see the article About ↓markdown↓). Unlike many other CMSs that use a database, web page content is simply stored in Markdown format files within folders on the web server. Not using a database means md-CMS requires fewer web server resources and serves up web pages quickly. The md-CMS Markdown format files (with a file extension of .md) can have a header section. This header can enable extra features for the web page sent to the user's web browser. E.g., the header can set the <title> tag or add metadata elements. This tutorial article shows how to use the header section to set up different web page features for md-CMS web pages.

A Simple md-CMS Header Example

The article Web Page Title Tag in ↓markdown↓ CMS introduced the md-CMS header section. That article shows how to set a web page title. The web page <title> tag is set with the Title attribute in the md-CMS header. The header is at the start of the Markdown file and is indicated with the  markers. These markers are familiar to HTML coders, they are used to add comments inside a web page's HTML code. In md-CMS the HTML comment tags at the start of a Markdown file indicate a md-CMS header section. Here is a simple md-CMS web page that sets the web page title:

<!--
Title: A Web Page Title
-->

A Website Page
--------------

This is a simple web page that has some simple text content.

Here is the resultant web page. The title is seen on the browser tab, along with the website name if it has been set (see the Website Home Page article on configuring a md-CMS site name):

md-CMS Title page

This is equivalent to setting the <title> tag in the <head> section of a web page:

<html lang="en-GB">
    <head>
        <title>A Web Page Title | Web Site Name</title>
    </head>
    .
    .
    .

Two types of md-CMS Header Markers

As shown above lines between the  markers are md-CMS header indicators. The header markers can be \* and *\, familiar to programmmers as they are used as comment markers in source code. Therefore, the header in the example above could have been:

/*
Title: A Web Page Title
*/

Pick the style of header markers that you are comfortable with.

md-CMS Web Page Attributes

The md-CMS header markers are used to control different aspects of the web page displayed in the destination browser. This is done using name-value pairs, as for the Title attribute shown above. The Title attribute is the name and the value can be set as required (e.g., as in A Web Page Title above). Other name-value pairs can be set for a md-CMS web page. They follow the same format of attribute name then a : (colon) then the value to be assigned to the name (any spaces between the colon and the value are ignored).

The following attributes are supported for a md-CMS header section, some useful for help with Search Engine Optimization (SEO):

Attribute	Example	Result	Note
Title	Title: A Web Page Title	`<title>A Page \| Web Site Name</title>`	Sets the web page title (see above).
Description	Description: Article on HTML	`<meta name="description" content="Article on HTML" />`	Sets the web page description `<meta>` tag.
Author	Author: A.N.Other	`<meta name="author" content="A.N.Other" />`, plus, Author:A.N.Other is shown on the last line of the web page article.	Sets the web page author `<meta>` tag and displays the author towards the bottom of the web page.
Published	Published: 2020-12-25	Published:2020-12-25 is shown on the last line of the web page article.	Adds a published date towards the bottom of the web page.
Updated	Updated: 2021-01-01	Updated:2021-01-01 is shown on the last line of the web page article.	Adds an updated date towards the bottom of the web page.
Comments	Comments: Yes	Appends a HTML form for comments to a web page.	Set to `yes` to enable a feedback form for a web page, additional settings required, see the Feedback Form article.
Syntax	Syntax: Yes	Enables syntax highlighting of Markdown code sections (using tab indented text).	Set to `yes` to color code sections, see the Code Highlighter article (with information on non-CDN use).
SynStyle	SynStyle: github	Set the code section highlighting Cascading Style Sheet (CSS).	Sets the syntax CSS, see the Code Highlighter article for further information.

Here is an example of a md-CMS header section using some of attributes shown in the table above:

<!--
Title: What is HTML?
Description: Article on HTML.
Author: A.N.Other
Published: 2020-12-25
Updated: 2021-01-01
Syntax: Yes
SynStyle: github
-->

Tek Eye

↓markdown↓ CMS Page Header and Meta Tags

A Simple md-CMS Header Example

Two types of md-CMS Header Markers

md-CMS Web Page Attributes

See Also

Do you have a question or comment about this article?