Custom Head Overwrite
Developer option to overwrite the automated meta, title, and og:tags <head> tags with a Parsley snippet file.
What is an Automated Head?
#Zesty.io automates the creation <head> tags, which include <title> <meta> and <og:title> like tags to automate the optimization of search engine indexing. There are times when you may want to customize these tags and not rely on Zesty.io to produce them. If you want to overwrite the automated head tags, follow this tutorial.
How to Setup a Custom Head File and Overwrite the Automated Meta
Four steps to overwrite the head:
- Create a text setting in the category developer with the key overwrite_head (see API Docs)
- In the code editor, create a new snippet file , lets call it "custom_head" (you can call it anything)
- In settings, change the new setting's (overwrite_head) value to "custom_head", save the setting.
This turns on the overwrite. - In the code editor, add your custom tags to the "custom_head" snippet you created in step 2, and then save and publish it.
Important: add a value to the developer.head_overwrite will immediately switch your WebEngine pages renders over to using a custom head. You can prepare the snippet before editing your setting. Once setup, overwriting automated head tags lets you control this portion of the <head> through a versioned view snippet, this means you need to publish the snippet to see changes to a production site.
Example Custom Head File
Custom head files give you access to Parsley logic and data access, this allows for a dynamic custom head per page.
What Does this Overwrite?
Zesty.io automates the following tags in the head:
- <title> My Title </title>
- <meta name="description" content="my description">
- <meta name="keywords" content="my, keywords"> (typically omitted)
- <link rel="icon" href="/path/to/favicon.png">
- Apple oriented icons: apple-touch-icon-precomposed .. sizes="72x72",144x144","114x114"
- Open Graph and Twitter Card Tags (when content is available)
- <meta property="og:title" content="">
- <meta name="twitter:title" content="">
- <meta name="twitter:site" content="">
- <meta name="twitter:creator" content="">
- <meta property="og:description" content="">
- <meta name="twitter:description" content="">
- <meta property="og:url" content="">
- <meta property="og:site_name" content="">
- <meta property="og:image" content=""> (if an image is available)
- <meta property="twitter:image:src" content=""> (if an image is available)
What is Still Automated?
Even when overwriting, Zesty.io will still automate the following tags:
- Language specific tags that point to alternate locales of content
- main.css link to the auto transpiled css file (settings can overwrite this)
- main.js link to the auto transpiled javascript file (settings can overwrite this)
- Single head tags resources specific to the page scope Custom Head Tags
- RSS feed links
- Google analytics script tags
- UI selected Google Fonts
- HTML Doc Types and Encodings
Connect with Content Experts
Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.
Trusted By
G2 MOMENTUM LEADER
