SolidJS•10mo ago

Solidjs site metadata (title, description, meta image etc.) in Javascript

I'm having difficulty with setting up metadata. My site is purely client side. When I use @solidjs/meta and publish the site, the metadata all appears to be null as seen here: https://www.heymeta.com/url/solidjs-bizcard.pages.dev/ I have been able to get successful metadata in the past by hardcoding it into the index.html file in the root folder. Such as with this page: https://www.heymeta.com/url/removeyoutube.pages.dev/. This is not ideal, I would like to be able to encode these in the jsx files so that I can populate them from a javascript object as a single source of truth from which other components draw. Is this currently possible with Solidjs?

HEY META - Website Meta Tag Check

Check and improve how search engines and social media websites see and display your website.

7 Replies

Jasmin 🌈💜•10mo ago

I'm not completely sure but I think that you need a server side part which renders the meta tags if you want to set them in your js code. If not, the metadata won't be set in the returned html:

Jasmin 🌈💜•10mo ago

This is the document from your site. Crawlers which fetch meta tags don't run any javascript and that's everything they get

lastq•10mo ago

Would a vite plugin to add a compile step be trivial to write?

Jasmin 🌈💜•10mo ago

I don't have any expierience with this, sorry <:fat_slug:1008836699192840392> But it feels like having a server side part which does this is the common way to approach this problem

lastq•10mo ago

Here is bards attempt 😆 https://g.co/bard/share/28515f53a34d

‎You are a professional javascript developer, and have cutting edge...

Created with Bard.

Jasmin 🌈💜•10mo ago

xD it tried the problem is you need a server side part if you want different meta tags for different routes. There is only a index.html to append meta tags during compiling and these would show up on every page. You need logic which returns different meta tags based on the requested route. and if you're fine with fixed meta tags, I'd suggest just adding them to the index.html file in the src dir.

lastq•10mo ago

Its fine for them fixed, but I will be doing many copies of the same template, since it is a particularly simple page with just a handful of fields I would like to have as smooth as possible a path for trading the content in and out. metatags are a hassle to edit in an index.html because its easy to miss something. Ok, I got a plugin working

 {
      name: 'html-transform',
      apply:"build",
      transformIndexHtml(html) {
        return html.replace(
          /<title>(.*?)<\/title>/,
          `<title>${content.title}</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="theme-color" content="#000000" />
          <meta name="description" content="${content.description}" />
          <meta name="robots" content="index, follow" />
          <link rel="canonical" href="${content.url}" />
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta property="og:type" content="website" />
          <meta property="og:url" content="${content.url}" />
          <meta property="og:title" content="${content.title}" />
          <meta property="og:description" content="${content.description}" />
          <meta property="og:site_name" content="${content.title}" />
          <meta property="og:locale" content="en_US" />
          <meta name="twitter:image" content="${content.metaImg}" />
          <meta name="image" property="og:image" content="${content.metaImg}" />
          <link rel="icon" type="image/x-icon" href="${content.icon}" />
          <link rel="shortcut icon" type="image/ico" href="${content.icon}" />
          <meta name="twitter:card" content="${content.description}" />
          <meta name="twitter:url" content="${content.url}" />
          <meta name="twitter:title" content="${content.title}" />
          <meta name="twitter:description" content="${content.description}" />
          <meta name="twitter:site" content="@site_account" />
          <meta name="twitter:creator" content="@individual_account" />
          <meta property="og:image:width" content="1200" />
          <meta property="og:image:height" content="630" />`,
        )
      },
    },

 {
      name: 'html-transform',
      apply:"build",
      transformIndexHtml(html) {
        return html.replace(
          /<title>(.*?)<\/title>/,
          `<title>${content.title}</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="theme-color" content="#000000" />
          <meta name="description" content="${content.description}" />
          <meta name="robots" content="index, follow" />
          <link rel="canonical" href="${content.url}" />
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta property="og:type" content="website" />
          <meta property="og:url" content="${content.url}" />
          <meta property="og:title" content="${content.title}" />
          <meta property="og:description" content="${content.description}" />
          <meta property="og:site_name" content="${content.title}" />
          <meta property="og:locale" content="en_US" />
          <meta name="twitter:image" content="${content.metaImg}" />
          <meta name="image" property="og:image" content="${content.metaImg}" />
          <link rel="icon" type="image/x-icon" href="${content.icon}" />
          <link rel="shortcut icon" type="image/ico" href="${content.icon}" />
          <meta name="twitter:card" content="${content.description}" />
          <meta name="twitter:url" content="${content.url}" />
          <meta name="twitter:title" content="${content.title}" />
          <meta name="twitter:description" content="${content.description}" />
          <meta name="twitter:site" content="@site_account" />
          <meta name="twitter:creator" content="@individual_account" />
          <meta property="og:image:width" content="1200" />
          <meta property="og:image:height" content="630" />`,
        )
      },
    },

Now the issue i'm having is how to access the images for the metadata, the routes used throughout the app dont work, I need the equivalent of the public directory or figure out how to get images into the assets folder

Gaming

Programming

Solidjs site metadata (title, description, meta image etc.) in Javascript