API Reference
  • Introduction
  • 💻CLI Commands
    • Create commands
      • create
      • create-package
    • Run commands
      • dev
      • serve
    • Build commands
      • build
    • Extra commands
  • 🍱Packages
    • 💙Core package
      • frontity
    • ⚡Features packages
      • @frontity/wp-source
      • @frontity/tiny-router
      • @frontity/html2react
      • @frontity/head-tags
      • @frontity/yoast
      • @frontity/google-ad-manager
      • @frontity/smart-adserver
      • analytics packages
        • @frontity/google-analytics
        • @frontity/google-tag-manager-analytics
        • @frontity/comscore-analytics
      • @frontity/wp-comments
    • 📚Collections packages
      • @frontity/components
      • @frontity/hooks
        • Infinite Scroll Hooks
        • Intersection Observer Hooks
    • 🎨Themes Packages
      • @frontity/twentytwenty-theme
      • @frontity/mars-theme
  • 🔌WordPress Plugins
    • REST API - Head Tags
    • Frontity Embedded Mode
Powered by GitBook
On this page
  • Table of Contents
  • Installation
  • Settings
  • How to use
  • API Reference
  • State

Was this helpful?

  1. Packages
  2. Features packages

@frontity/head-tags

API reference of `@frontity/head-tags` package

Previous@frontity/html2reactNext@frontity/yoast

Last updated 3 years ago

Was this helpful?

This package is designed to get automatically all the metadata that the exposes in the REST API (SEO metadata from plugins like Yoast SEO or All in One SEO), and add them as meta tags in the <head> section of the rendered page.

This package won't work without installed and activated in your WordPress backend, so make sure you have it before using this package.

If you are using Yoast SEO >v14.0 we recommend that you instead use the package which does not require an additional plugin to be installed in WordPress.

Table of Contents

Installation

Add the head-tags package to your project:

npm i @frontity/head-tags

Do this in your root and include it in your frontity.settings.js file:

...
packages: [
    "@frontity/mars-theme",
    "@frontity/tiny-router",
    ...
    "@frontity/head-tags"
]
...

Settings

As it works automatically, It doesn't have settings itself, but it requires two Frontity parameters to work:

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

It needs @frontity/wp-source installed and updated to at least the 1.5.0 version.

How to use

This package will automatically add all the meta tags defined in WordPress for the page (through plugins like Yoast SEO or All in One SEO) in the <head> section of the rendered page. So there are no additional steps to do. Just install the package and everything will work out of the box.

API Reference

State

headTags.get

It is a function that accepts a linkas parameter and it returns an array with the head_tags field of that link.

state.headTags.get("/blog/hello-world/");

will return something like

[
  {
    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/",
    },
  },
];

If you have an existing project make sure your package is at least on the 1.5.0 version. If not, update it using this command: > npm install @frontity/wp-source@latest.

state.source.url or state.source.api: The API where your project is pointing. Defined at if you haven't changed your Source.

Remember that you'll need the installed in your WordPress. With that, this package will take care of the rest.

If you want to access the metadata available for a specific link you can use the method.

🍱
⚡
@frontity/wp-source
REST API Head Tags plugin
REST API Head Tags plugin
REST API Head Tags plugin
@frontity/yoast
Installation
Settings
How to use
API Reference
State
headTags.get
headTags.get
@frontity/wp-source