WordPress plugin for Head Tags

👨‍💻 Framework Development » Framework Design
1

Description

We are creating a plugin that adds all the HTML tags inside <head> to the REST API, very useful specially for SEO tags.

It will be both a separate plugin and part of the main Frontity plugin.

The @frontity/head-tags package will integrate any Frontity project with this plugin without any extra configuration or development.

How this plugin works

The plugin adds a head_tags field to each entity fetched from the WordPress REST API. This field would be an array of objects representing the tags that WordPress would include normally inside the html <head> element.

:bulb:Note: by default, stylesheets, style tags and JavaScript code would be removed.

The entities in which this field would be included are the following:

  • Posts, pages, attachments and custom post types
  • Post types: for archive pages
  • Categories, tags and custom taxonomies
  • Authors

The objects inside head_tags field would have three properties:

  • tag: the tag name (e.g. "title", "meta", "link")
  • attributes: an object with the attributes
    (eg. { "rel": "canonical", "href: "http://..." })
  • content: the text inside the element
    (e.g. inside <title> could be "Hello world! - My Site")

Here is an example of what could be the content of the head_tags field:

"head_tags": [
  {
    "tag": "title",
    "content": "Hello world! - My Site"
  },
  {
    "tag": "meta",
    "attributes": {
      "name": "robots",
      "content": "max-snippet:-1, max-image-preview:large, max-video-preview:-1"
    }
  },
  {
    "tag": "link",
    "attributes": {
      "rel": "canonical",
      "href": "http://mysite.com/hello-world/"
    }
  }
]

This head_tags object is cached using transients so there would be a button on the plugin’s GUI to clear that cache. Also, for specific entities (posts, pages, custom post types, authors and taxonomies) this would be done automatically.

It will have a setting to activate or deactivate it. If it is activated, the head_tags field will be shown. If it is deactivated, the head_tags field can be shown using the query.

This behavior could be overriden using a head_tags param in the query:

  • ?head_tags=true/false: this query should override the setting.

In the future, @frontity/head-tags could add params: { headTags: true } to the settings of @frontity/wp-source to make sure it always gets the head tags.

Details

Name of the solo plugin: REST API - Head Tags by Frontity.
Name in the Frontity plugin: Head Tags.
Class name: Frontity_Headtags_Plugin.
Activation function: Frontity_Headtags_Plugin->activate.
Deactivation function: Frontity_Headtags_Plugin->deactivate.
Uninstall function: Frontity_Headtags_Plugin->uninstall.
Settings name in MySQL: frontity_headtags_settings.
Settings name in JavaScript: window.frontity.settings.headtags => state.headtags.

Settings:

  • active: boolean (default: true)

Activation:

  • create frontity_headtags_settings settings if they don’t exist.

Deactivation:

  • nothing

Uninstall:

  • delete frontity_headtags settings.
  • delete all saved transients
2 Likes
2

@david could you please update this post with a brief summary of the new approach?

7

The original post was edited to match the current implementation details.

This plugin was published and announced here: Frontity release: REST API - Head Tags plugin and package

For more info, you can take a look at the plugin documentation and the code.

1 Like