Skip to main content

Integrating Yoast SEO

This documentation is a hub for describing the technical specifications and requirements for integrating Yoast SEO.

Automatic optimization​

The following standards must be met, automatically and without user intervention, when the software is installed and activated.

System behavior​

  • The site must output and use 'pretty permalinks' (human-readable, structured URLs).
  • All public-facing URLs, meta tags and content must be rendered server-side, in the initial response from the server. Client-side rendering solutions are not supported.
  • The site must output a complete and valid XML Sitemap.
  • The site must generate (or alter) a robots.txt file.

Integrations​

  • Creating, updating or publishing content should ping IndexNow (and ping the XML Sitemap to Google).

Metadata & output​

Meta tags​

All pages and content types should output metadata in line with the following standards:

Structured data​

All pages should output structured data in line with the following standards:

Controls & Analysis​

For all posts, pages and content types, users must:

  • Be able to Analyze their content.
  • Be provided with Controls.
  • Be able to edit page titles and descriptions in bulk (without needing to visit/open each individual page).

Integrating with our Yoast SEO content analysis​

Current set-up​

At the moment, much of our analysis is tied deeply into either our WordPress or Shopify integrations. Here, we specify how our Yoast SEO plugin integrates with the (default) block editor, the Classic editor, and Elementor. For understandable reasons, we focus on the parts of our free open-source WordPress plugin Yoast SEO.

PHP integration​

On the PHP side, we work with the concept of Metaboxes for the different parts of our content analysis. This is a slight misnomer, as these are used as parts of both our Yoast SEO metabox (in the classic and block editor) and Yoast SEO sidebar (in the block editor, Elementor editor, and Shopify app). Refer to the code for posts and for taxonomies for more details. We are currently working on decoupling the metabox and the sidebar, so please stay tuned for updates on that front.

The Elementor integration shows how these Metabox units can be integrated (implements Integration_Interface) on other pages, in this case, the Elementor edit post page (see Elementor_Edit_Conditional). It also shows how we can enqueue additional scripts and styling (see register_hooks).

JavaScript integration​

On the JavaScript side, the starting point is packages/js/src/post-edit.js (here on GitHub), which initializes the metabox and its behaviour (initTabs, initAdminMedia, initAdmin, initializeInsights, initializeAiGenerator), the initialization of the Redux store (initEditorStore), and the integration with various parts of the editor:

  • an integration with the editor as a whole (initEditorIntegration). Here, there are implementations for the default block editor and the Classic Editor. These integrations make sure the sidebar is displayed and the highlighting functionality is activated.
  • a scraper that updates the editor data and links the Yoast SEO content analysis (initPostScraper)
  • an integration with the primary category element (initPrimaryCategory)
  • an integration with the featured image element (initFeaturedImageIntegration)

In term-edit.js (here on GitHub), we have a very similar integration for terms, without integrations for elements that do not appear on terms.

For integrations with other editors, like Elementor in packages/js/src/elementor.js, we use a very similar approach (cf. this code). There are some small differences though:

  • Instead of a scraper, we work with a watcher (initElementorWatcher) to update the editor store.
  • The setup of the YoastSEO analysis app (see initializePostAnalysis in the post scraper) is done in the integration instead of in the watcher.
  • There is some extra code to introduce the Yoast SEO integration to new users (initializeIntroduction).
  • The rendering of the sidebar is taken care of through initElementorEditorIntegration.

Future set-up​

In the (hopefully near) future, we hope to increasingly de-couple our analysis tools from their respective back-ends, and to create a 'standalone' editor. We aim to make this easy to implement in any content editing context, simply by "pointing" it at the relevant fields (and "hooking up" relevant back-end behaviour based on user settings and controls).

Resources​

  • A simple example standalone app, which includes readability and SEO analysis (for multiple keyphrases and synonyms) as well as a working snippet preview (with replacemant variables)
    • Note that this currently excludes our inclusive language, insights, and social previews checks/features.
  • Documentation on how to configure and integrate the standalone app.

Note that these resources should be considered a work in progress, and might not be stable in production environments. If you encounter problems or errors, we encourage you to create issues on the respective repositories, and/or to contribute fixes and patches.