@frontity/yoast

API reference for the `@frontity/yoast` package

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.

Please note that this package will not work with versions of the Yoast SEO plugin prior to version 14.0.

If you have an earlier version of the Yoast SEO plugin (i.e. < 14.0) installed in WordPress, or you have installed another SEO package that doesn't add head tags to the REST API, then you should use the @frontity/head-tags package instead. In this case you will also need the REST API Head Tags plugin.

See the @frontity/head-tags documentation for more information.

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:

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

Name	Type	Required	Description
ignore	string	optional	RegExp in string format that defines a set of links that must not be transformed.
base	string	optional	WordPress URL base that must be replaced by the Frontity URL base (specified in state.frontity.url). If this value is not set, it is computed from state.source.api.

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.