Head tags can be added to content models, views, the instance (global), or content items. They can be used to set facebook open graph tags, twitter cards, script links, css links, favicons, etc.. This document will explain how they works, what they are for, and how to create them with the API.

There are 5 different types of head tags available in Zesty.io.
Here is a list of each one with example output:

1. Meta e.g. <meta name="description" content="my page description" />
2. Link e.g. <link rel="stylesheet" type="text/css" href="/site.css" />
3. Script e.g. <script type="text/javascript" src="/site.js?v=43"></script>
4. Title e.g. <title>My Page Title</title>
5. Style e.g. <style>body { background: orange } </style>

We are going to go through each one, with a couple example output and how to create them with the API POST calls to the API.

Meta, Title, Script, and Link tags may use dynamic reference to globals, settings, and content values.

Even though values shown below use curly braces { } these are not Parsley references.

• Settings are accessed like {settings.general.site_protocol}
• Content item values are accessed like {this.my_title}
• Globals are accessed like {globals.site_name}
• Query Params are accessed like {query_param.key} or {get_var.key}
• Path Parts accessed like {path_part.0} e.g. /first/part/ {path_part.0} returns 'first'
• Multiple like this "my page is {this.title} from {globals.site_name}"

Examples

Custom Head Tag Loading

Custom head tags load based on their resource type in this order:

1. Instance Level
2. View Level
3. Model Level
4. Item Level

At each level they ordered in ascending order by their sort_order

Bad Tag References

If a bad tag reference is used, a reference to a global, setting, or content item that doesn't exist, then a warning (#bad reference {this.ref} #) will be output in preview in the tag, on production sites an empty string will be returned.

A simple post request to your instances REST API will create a head tag.

Head Tag Creation

Meta tags are for search engines, social media, browser compatibilities, viewport info, etc. "Meta" tags are essentially became a catch all for all sorts of configuration information. Zesty.io has no restriction on what type of meta tags you can add. Zesty.io also auto generates meta tags for social sharing and search engines based on your content, learn more about that here

As you can see in the example, meta tags are versatile, everything from search engine info to hidden configurations for iPhone rendering. Meta tags are hidden and are low weight so they minimally affect page load time.

Meta Tag Post Body Examples for the Rest API

Attributes are open ended for meta tags, so any key:value pair can be added. Here are a few post body example to create a few of the examples above.

Script tags a used to load javascript files on page. Since head tags can be applied to content models, views, items, or globally, this enables you as the developer to optimize what you load per page.

Example Head Output

Example Post Body to create script head tags with the Rest API

Link head tags a used to load CSS files, Icons, Alternate Language URLs, etc.. Like general meta tags, link tags feel like open ended configuration tags, as shown in the example head output. Since head tags can be applied to content models, views, items, or globally, this enables you as the developer to set specific link tags to configure page differently and optimize them for search engines and mobile rendering.

Example Head Output

Example Post Body to Create Links with the Rest API

Attributes are open ended for link tags, so any can be added. Here are a few post body example to create a few of the examples above.

Title tags are linear, and offer one type. Title tags only accept one key value attribute "value".

Example Head Output

Example Post Body to create a head tags with the Rest API

Style tags are linear, and offer one type and way to use them. Style tags only accept one key value attribute "value".

Example Head Output

Example Post Body to create a style tag with the Rest API

How to See all the Head Tags on a Content Instance

To see all the head tags on a content instance, make a Get request to the REST API endpoint /v1/web/headtags
GET Head Tags

Updating a Head Tag

To get a head tag ZUID, call the get endpoint to see all the head tags and their ZUIDs.
PUT Head Tag

Deleting a Head Tag

DELETE Head Tag