ExpressionEngine - how to add meta data to entries

This applies to ExpressionEngine 4 and 5. Earlier versions don’t allow you to share fields across multiple channels.

This quick tutorial will allow you to:

Add a custom page title value with a fallback
Add a meta description
Add other meta data as required
Keep your templates DRY

Create custom fields for your meta data

For simplicity we’ll just add the two basic ones.

Type: Text input
Field name: SEO page title
Short name: seo_page_title
Maximum characters: 65
Text formatting: none

Type: Text input
Field name: SEO meta description
Short name: seo_meta_description
Maximum characters: 165
Text formatting: none

You can of course name your fields however you want.

Create a Field group

Name: SEO (or whatever suits you)
Check the meta fields you want to include in the group

Now when you assign the field group to a channel all checked fields will be included on your publish page. If you add new fields to this field group they’ll automatically be added to all your selected channels.

Assign the field group to one or more channels

Locate and edit a Channel you want to assign the field group to. Click the “Fields” tab and check the group name. Repeat for each Channel as needed.

Create a "partial" template

Partial template name: part_meta

Now add the tags you want to include, for example:

{!-- use the 'seo_page title' value if it exists, else provide a fallback --}
<title>{if seo_page_title}{seo_page_title}{if:else}{title} | {site_name}{/if}</title>

{!-- use the meta description if it exists --}
{if seo_meta_description}<meta name="description" content="{seo_meta_description}">{/if}

{!-- optionally add the author name meta value --}
<meta name="author" content="{author}">

Add the partial tag to your single entry template(s)

Add the template partial tag in a layout:meta tag, we’ll add this later to your layout template.

{exp:channel:entries channel="mychannel"}

{layout:set name="metatags"}
{part_meta}
{/layout:set}

{title}

...

{/exp:channel:entries}

Add the layout set tag to your layout template

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {layout:metatags}

</head>

Now go and test it. When you view source you should see your meta data in place.

Extending

There’s nothing stopping you adding extra meta information to the partial template, either hard coded, or populated from another custom field. Common uses such as Open Graph and Twitter data.