Add description meta to HEAD Mars Theme

Baby steps…I modified /packages/mars-theme/src/components/theme.js and just before line 34 with:

I added a new line:
<meta name="Description" content={state.frontity.description}>

and tried with and w/out wrapping in double quotes but after running npm run build and restarting the app, there is no change.

I then removed this and simply changed the original title tag to <title>{state.frontity.description}</title> just to see if the output text changes from the title to my description (set in frontity.settings.js) but same thing, there is no change to the rendered output after running the build and restarting the node app.

In the docs on theme.js the comments mention React-Helmet. Looking at the react-helmet github it is not clear why this is not working. Thx

update: I also verified if I check frontity.state in the console, I can see title, description etc. is all there.

Hi @pingram3541!

We have added the meta description tag in the last version of mars-theme and it’s working. Check how we did it and see if there is anything different to your implementation :slight_smile:

Here is where we are using react-helmet to render the meta element:

And here is where we define the description field on the settings file:

Let us know if this implementation works for you!

Does this mean I need the latest version for my code above to work? i.e. Mine looks identical to your example except for self-closing slash at end of the meta tag.

Yes, this matches what I have too, default from installation o/c.

I checked my version is 1.0.3 and the structure is slightly different, for example I do not have an index.js in the /components directory but rather a theme.js of which I add the exact same code on the same line matching your example then executed npm run build and still the meta tag does not render.

I found this:

npx frontity create will install the mars-theme in packages/ so the theme can be edited by the developer. However, this theme doesn’t need to reside in packages/ if you don’t want to edit it. It can be installed directly with npm inside node_modules/ and it will work exactly the same.

I think the issue is my theme is not being used at all from the /packages directory even though my package.json file points @frontity/mars-theme to ‘./packages/mars-theme’ but instead the theme from /node_modules/. I have installed Frontity in a cpanel environment for production and I think I still have the structure misconfigured.

First, npx does run in my cpanel environment (but I think I need to know the proper npm method w/ package.json), if I install after executing the virtual environment, node_modules installs inside a /nodevenv/myproject/10/lib/node_modules/ path while another /nodevenv/myproject/10/bin/ provides the node environment scripts while /myproject/ has a node_modules symlink and a /build folder of which I execute via an app.js file.

var frontity = require("./build/server").default;
var http = require(“http”);
var server = http.createServer(frontity);

This works but is loading the core theme. I’m going to play around with install methods in cpanel until I get this nailed.

Ok, it’s working now that I’ve re-installed and I can now see meta description tag just below the title.

I’m glad it’s working now!

I’ll check what the default behaviour of Frontity is when you have the same theme installed in node-modules and packages, as it feels like the natural behaviour should be to use the one in packages over the one in node_modules.