How to Add Custom Fields to Yoast SEO Meta Tags

Yoast SEO plugin allows you to set dynamic variables for its meta tags, such as %%title%% for post title or %%excerpt%% for post excerpt. If you're advanced WordPress users, who use custom fields to storing data or custom content, you might want to add these custom fields to Yoast SEO meta tags. How to do that with normal custom fields and Meta Box custom fields?

Using Yoast SEO Template Variables

For most cases, the custom field you want to add content to Yoast SEO meta tags are text, or textarea fields. To get them, Yoast SEO provides template variables. These variables will be replaced by their value when viewing on the front end.

For custom fields, the template variable is %%cf_<custom-field-name>%%, where <custom-field-name> is replaced by your custom field key.

For example, if you have a custom field brief_description, then you can enter %%cf_brief_description%% to the post meta description. See the screenshot below:

Note that after entering the text, Yoast SEO automatically transforms it into a highlighted term with purple background. Don't worry if you don't see the %% at the beginning and the end of the term. It's already there, it's just hid by Yoast SEO to make the term easier to read.

Now go to edit a post and enter something into the Brief Description field, and you'll see it appears in the snippet preview after you save or update the post:

Unlike other template variables, Yoast SEO doesn't automatically render the value of custom field into the snippet preview in real-time. You need to save or update your post to see it.

In addition, you can use multiple custom fields for the meta tags if you want. So, you can enter something like this: %%brief_description%% - %%review_count%% stars.

Creating Custom Template Variables

The method above works in 90% cases. However, if your custom field has complex data such as a list of text (cloneable text field) or a sub-field of a group, then the default template variable won't work.

In that case, it's best to create a custom template variable to get the custom field value and use it in Yoast SEO meta tags.

Before going into the coding part, let's create a meta box with some custom fields for the demonstration purpose.

Creating Custom Fields

In the example below, we'll create a custom meta box with some custom fields for a custom post type Product, like below:

I use Meta Box Builder to create these fields to save time coding. I also use Meta Box Group to create groups of custom fields. You can copy the exported code to create the custom fields on your localhost.

If you don't want to spend money on Meta Box Builder, you can try the free Online Generator tool to auto-generate code for custom fields.

Here is the preview of the edit Product screen:

The task is getting the product brief description and rating from the Product Settings group and output them to the post description meta tag. Follow the steps below.

Registering a Custom Template Variable

The first step is registering a custom template variable for Yoast. Use the following code:

add_action( 'wpseo_register_extra_replacements', function() {
    wpseo_register_var_replacement( '%%my_var%%', 'my_callback_function', 'advanced', 'Some help text' );
} );

The hook wpseo_register_extra_replacements is used to register a custom variable replacements (template variables). Inside the callback function, we use Yoast SEO's function wpseo_register_var_replacement() function to register a new variable. This function has 4 parameters:

• Variable name: The name of the variable to replace, i.e. '%%var%%', the surrounding %% are optional, name can only contain [A-Za-z0-9_-]. Note that your variable cannot start with cf_ or ct_ as they're used by Yoast SEO for custom fields and custom taxonomies.
• Callback function: Callback function to retrieve the replacement value for the variable.
• Type of variable: 'basic' or 'advanced', defaults to 'advanced'.
• Help text: Help text to be added to the help tab for this variable.

Here is the callback function to retrieve the replacement value for the variable:

function my_callback_function() {
    $value = '';

    // Get product settings.
    $settings = rwmb_meta( 'settings' );

    // Get brief description.
    $value .= isset( $settings['brief_description'] ) ? $settings['brief_description'] : '';

    // Get ratings.
    $value .= isset( $settings['ratings'] ) ? " {$settings['ratings']} stars" : '';

    return $value;
}

This function gets the product settings using rwmb_meta() helper function. As it's a group, we have to get the group value and from that, get the values of sub-fields (brief description and ratings). Then it returns the value.

Using the Custom Template Variable

After registering the custom template variable, go to SEO → Search Appearance and enter the new variable into the Meta description box:

Then go to edit a product, enter all the information for custom fields:

Unfortunately, Yoast SEO does not render custom template variables in the snippet preview. So, the only way to check it is viewing the source code of the page on the front end.

Hopefully, Yoast team can resolve this issue in the future.

So, these are 2 methods to add custom fields to Yoast SEO meta tags. The conclusion is: use built-in template variable for text and textarea custom fields and use a custom variable for complex fields. Hopefully the article is useful for you and can help you rank higher in search results.

PS: If the settings of SEO plugins make you exhausted, and you want something simple and just works, then try our brand new plugin Slim SEO. It does all the SEO jobs for your WordPress websites automatically without getting lost in the configuration.