Skip to main content

Adding custom <head> elements

Web pages have a <head> element that can contain the following child elements:

  • <link>—Provides links to external resources, such as CSS files.
  • <meta>—Provides the page's metadata, such as character set, keywords, and viewport settings.
  • <script>—Provides behavior, such as displaying a message after the page loads.
  • <style>—Provides styling, such as fonts, colors, and spacing.

You can create customized child <head> elements, and add them to published assets based on various criteria. Examples include the following:

  • If the asset's URL contains the word evening-edition, add a CSS file that gives a softer color scheme.
  • If the asset's content type is Gallery, add a JavaScript file that includes zoom in and zoom out behavior.
Caution

Adding incorrect <head> elements can cause your site to malfunction. Ensure you test your custom <head> elements before actually deploying them to a live site.

To add custom head elements to assets:

  1. Create and debug the custom <head> elements you want to add.

  2. Click > Admin > Sites & Settings.

  3. In the Sites widget, select site to which you want to add the custom <head> elements.

  4. From the Front-End tab, expand the Advanced cluster.

  5. Click Add Custom Head Elements.

  6. In the Internal Name field, enter a name for this customization.

  7. Toggle on Disabled to disable this custom head element from use, but not delete the custom header.

  8. Toggle on Disabled in Preview to disable the custom head element from rendering in the asset preview.

  9. From the Request Matcher list, select Path Request Matcher.

  10. Using the HTTP Methods, URL Pattern, and Content Types fields, design criteria that the asset must match to receive the custom <head> elements. For example, the following criteria match articles whose URLs contain evening-edition.

    Filter for adding a style or scripting customization

  11. If an asset matches the filter you designed in step 8, and you do not want to add any additional <head> elements, toggle on Stop Processing.

  12. Configure <head> elements added to the web page by doing the following:

    1. Under Elements, click .
    2. Select one of the available child elements.
    3. In the subsequent form, enter an Internal Name, and complete the form as necessary.
    4. Repeat steps a–c to configure more <head> elements satisfying this rule.

  13. Repeat steps 5–10 to design additional rules for adding custom <head> elements.

  14. Click Save.

See also: