Adding Content To Yoast SEO Analysis Using YoastSEOJS

I recently received a request from a previous client asking if I could debug why their custom field content had stopped being analysed by their Yoast SEO plugin. It turns out they had updated the plugin and Yoast made a breaking change in regards to adding content to be analysed. To quote Yoast directly:

In the upcoming 3.0 release of Yoast SEO (for WordPress), we’re moving the entire content analysis from the server to the client side. This way our users can get instant feedback on the content they’re writing, while they’re writing it.

With the moving of content analysis to the client side Yoast removed the WordPress hook previously used to add content for analysis. This was obviously the cause of the issue the client was experiencing. To fix this you must create a plugin using Yoast’s new YoastSEOJS system. At the time of creating the plugin there wasn’t much in the way of documentation on how to do it, so I figured I would share my experience to help anyone else having issues.

The short version of what you need to do is register a plugin with YoastSEOJS and have your plugin return the modified content. Unfortunately this plugin is not a standard WordPress plugin and is a special one used by Yoast.

The code for the client was quite specific so I’m instead going to show an example I put together on my local install. First let’s attach our JavaScript file, we haven’t wrote it yet but we can still enqueue it first without any issues.

In your theme’s functions.php file add the following:

Feel free to change the prefix on the function and also the path as needed. Even better add it to a Theme Setup Class but that is outside the scope of this tutorial. The dependency is required and was previously yoast-seo but I recently couldn’t get it to work until I changed it to yoast-seo-admin-script, YMMV.

Note: If the fields are only available on a specific post type, then feel free to add in a conditional to only enqueue the script when it will be needed.

Now for the JavaScript code. Make you JS file and store it where ever you pointed to when en-queuing the script. Now add the following code:

Now there are a lot of areas where they will be specific to the project you are working on, however I know a lot of developers like to use Advanced Custom Fields so I went with that as an example. I’m not going to go into massive detail here since the code is pretty simple (except maybe the use of Prototypes).

Anyway. Here we are registering a plugin with Yoast SEO using a method called registerPlugin. The plugin is called myYoastPlugin, feel free to change the name as you wish. Note that the name of your JavaScript Object (MyYoastPlugin) does not have to match this, but it would be best to keep them at least related if not the same. We then execute a method to grab the data we want to analyse, I’ve just called it getData.

getData should do whatever you need to grab the data. If you need to call something via AJAX, say from an external service, that is fine. If the content is on the page you can just grab the text via JavaScript. Here I have two example Advanced Custom Fields set up. One is a simple text field, the other a TinyMCE editor. Getting content from the text field is easy. Just use a jQuery expression to select it, in ACF’s case it uses acf-field-{field_name} for its IDs, where field name is the name (not label) you gave the field. We assign this to a object variable called custom_content, tell the plugin we are ready and the register our modification method, which will finally add our extra content to the default content area, with Yoast.

Now you might be wondering why we don’t get the TinyMCE field data there. Well from my experience, you cannot. TinyMCE appears to not be initialized at that point and so we instead do it when the getCustomContent method is called. In the case of the ACF TinyMCE field, we need to know its name so we can get the content from the global tinymce object. To do that we target the placeholder textarea that TinyMCE hooks to and get its ID as that happens to be the ID used to in the editors array.

If you are registering the field yourself, the principle should be the same. The only difference would be you wouldn’t need to grab the ID for your TinyMCE field as you’ll have registered it so you would be able to hard-code the name. You could hard-code it with ACF too, but if you change the name via the interface this way it should automatically change in the JS code too.

One last thing we do is actually instantiate our Yoast Plugin, to do that we have to wait until Yoast is initialized. So we listen for Yoast firing its ready event and then instantiate.

That’s it. This tutorial has been rewritten as it was far to specific to my clients needs, thanks to Kevin in the comments below for pointing it out and for help with cleaning up the code. Also the documentation on how to use the Yoast JS system was pretty lacklustre at the time of writing so there may well be better ways to do this, but this seems to work well enough.

If you have any questions, just let me know in the comments below and I will help however I can. Also if you can fit it into 140 characters you can ask me on Twitter @paulbrobinson.

JavascriptPHPWordpressYoastYoastSEO