This package is designed to automatically get and render all the tags exposed in the REST API by the Yoast SEO plugin for WordPress. It works with Yoast SEO version 14.0 or later.

Table of Contents

• ​Installation​

• ​Settings​

  • ​state.yoast.renderTags​

  • ​state.yoast.transformLinks​

• ​Usage​

  • ​Adding the Yoast meta to archive pages​

• ​Video​

Installation

Add the @frontity/yoast package to your project:

npm i @frontity/yoast

NOTE: This package requires the Yoast SEO plugin (v14.0 or above) to be installed and activated on the WordPress site in order to function.

Once installed it should be included in your frontity.settings.js

export default {
  packages: ["@frontity/yoast"],
};

Settings

The namespace for this package is yoast

state.yoast.renderTags

Possible values:

• both (default) - Render the Yoast meta tags in both the server and the client

• server - Render the Yoast meta tags only in the server.

With the "server" option active, the Yoast meta tags are only included in the HTML generated by the Frontity server and so the tags are only generated if you go to the page source.

With the "both" option active, as well as being rendered in the server, the Yoast meta tags are rendered in the client as the site is navigated.

Selecting "server" shouldn’t affect the SEO of your site as Google does not do client-side navigation, Google is only concerned with server side page rendering .

The "server" option can be used to improve the client-side perfomance, as the <Html2React> component which is used to render the meta tags can be processor intensive.

Even if "server" is selected, thereby causing the rest of the meta tags to only be rendered in the server, the <title> tag continues to be rendered in the client while the site is being navigated so that the current page/post title will be displayed in the browser tab. Althougth the <Html2React> is processor intensive it is not used to render the title tag, so client-side performance will not be impacted.

state.yoast.transformLinks

Defaults to false.

Used if you are using Frontity in decoupled mode. If you are using Frontity in embedded mode this property must be set to false.

If you are using Frontity in decoupled mode this setting defines a set of properties to transform links present in the yoast_head field.

Example:

{
  ignore: "^(wp-(json|admin|content|includes))|feed|comments|xmlrpc",
  base: "https://wp.mysite.com"
}

Usage

The @frontity/yoast package also requires two Frontity parameters in order to work:

• state.frontity.url : The URL of your site. Usually defined in the frontity.settings.js file.

• state.source.url: The WordPress API that is the source of your data. Defined at @frontity/wp-source.

Adding the Yoast meta to archive pages

As it stands the @frontity/yoast package adds the Yoast meta to pages, and to single posts and CPTs. In order to have the Yoast SEO meta on post/CPT archive pages the following PHP code snippet should be added to the WordPress installation. It can be added either in the active theme's functions.php file or by using a plugin such as Code Snippets.

add_action( 'rest_api_init', function () {
  foreach ( get_post_types( array( 'show_in_rest' => true ), 'objects' ) as $post_type ) {
    if ( 'post' === $post_type->name || $post_type->has_archive ) {
      add_filter( "rest_prepare_{$post_type->name}", function ( $response ) {
        $type      = $response->data['type'];
        $types_url = rest_url( "wp/v2/types/$type" );
​
        $response->add_links(
          array(
            'type' => array(
              'href'       => $types_url,
              'embeddable' => true,
            ),
          )
        );
​
        return $response;
      } );
    }
  }
} );

This snippet embeds the post types – i.e. the entities that contain the yoast_meta field for post/CPT archives – in the REST API responses. It adds the type property inside the \_links field of post entities when the ?_embed=true query parameter is used.

note: Frontity always uses the ?_embed=true query parameter when making requests to the WP REST API.

Video

This short video demonstrates the usage of the @frontity/yoast package.