Head Tags not working

🙋Get Help
1

Hello,

I am totally new to frontity and today I am trying my first project on it. I have successfully set up everything as per the guide and also installed WordPress head tags plugin as well as a package at the root of my project. But, when I place the code in frontitysettings.js, It not working.

I have placed @frontity/head-tags" under “@frontity/tiny-router”, and getting internal server error.

     "packages": [{
            "name": "@frontity/mars-theme",
            "state": {
                "theme": {
                    "menu": [
                        [
                            "Home",
                            "/"
                        ],
                        [
                            "menu",
                            "/menu/"
                        ],
                        [
                            "menu",
                            "/menu/"
                        ],
                        [
                            "menu",
                            "/menu/"
                        ],
                        [
                            "menu",
                            "/menu/"
                        ]
                    ],                  
                    "featured": {
                        "showOnList": true,
                        "showOnPost": false
                    }
                }
            }
        },
        {
            "name": "@frontity/wp-source",
            "state": {
                "source": {
                    "api": "https://www.mydomain.com/wp-json"
                }
            }
        },
        "@frontity/tiny-router",
        "@frontity/html2react",
        "@frontity/head-tags"
    ]

But, I place code like below the site renders but head tags not rendering.

     packages: [
    "@frontity/mars-theme",
    "@frontity/tiny-router",
    ...
    "@frontity/head-tags"
],
"packages": [{
            "name": "@frontity/mars-theme",
            "state": {
                "theme": {
                    "menu": [
                        [
                            "Home",
                            "/"
                        ],
                        [
                            "menu",
                            "/menu/"
                        ],
                        [
                            "menu",
                            "/menu/"
                        ],
                        [
                            "menu",
                            "/menu/"
                        ],
                        [
                            "menu",
                            "/menu/"
                        ]
                    ],                  
                    "featured": {
                        "showOnList": true,
                        "showOnPost": false
                    }
                }
            }
        },
        {
            "name": "@frontity/wp-source",
            "state": {
                "source": {
                    "api": "https://www.mydomain.com/wp-json"
                }
            }
        },
        "@frontity/tiny-router",
        "@frontity/html2react"
    ]
2

Hi @thetechexpresscom
Welcome to the Community!

Here you have all the details of the package head-tags → https://docs.frontity.org/api-reference-1/frontity-head-tags

To make it work you need to have…

In your WP installation:

  • having the proper WP plugin installed

In your Frontity project:

  • Install the package → npm i @frontity/head-tags
  • Add it in your frontity.settings,js 
...
packages: [
    "@frontity/mars-theme",
    "@frontity/tiny-router",
    ...
    "@frontity/head-tags"
]
...

Please, review you have properly applied these instructions in your project. If it’s still not working please share a repo with the code of your project so we can check your code

Hope this helps!

3

Thanks for reply.

I have applied the changes as you suggested and worked but not fetching head tags on all pages.

4

Hi @thetechexpresscom

Once you have this package properly installed, you can use the headTags.get() method to access the meta-data of any link

You can check this for example by going to https://frontity.org/blog/ and doing from the browser’s console…

frontity.state.headTags.get('/blog/')