↓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):
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
*\, 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):
|Title||Title: A Web Page Title||
||Sets the web page title (see above).|
|Description||Description: Article on HTML||
||Sets the web page description
||Sets the web page author
|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
|Syntax||Syntax: Yes||Enables syntax highlighting of Markdown code sections (using tab indented text).||Set to
|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 -->
- Articles to Build a Website from Scratch with ↓markdown↓ CMS.
- Web Page Title Tag in ↓markdown↓ CMS.
- Configuring a md-CMS Feedback Form.
- The Code Highlighter article shows how to color code listings.
- The article Third Party Meta Tags in ↓markdown↓ CMS shows how to use some extra HTML
- For a full list of all the articles in Tek Eye see the full site Index.
Author:Daniel S. Fowler Published: