zesty.io

Product

Use Cases

Integrations

Learn

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:

  1. Create a text setting in the category developer with the key overwrite_head (see API Docs)
  2. In the code editor, create a new snippet file , lets call it "custom_head" (you can call it anything)
  3. In settings, change the new setting's (overwrite_head) value to "custom_head", save the setting.
    This turns on the overwrite.
  4. 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

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo