Setting Meta Title, Meta Description, and Open Graph Image On A Dynamic Page

Wized
1

Hi everyone,

The answer for this may already be floating around somewhere, but I’m having trouble tracking it down lol. I’m generating dynamic pages in Wized using Xano data and was curious if there’s a way to control the Meta Title, Meta Description, and Open Graph images for each of these dynamic pages?

Ideally, I’d like to pull from one of the existing image fields in my table for the OG images.

2

Hey @lovebrian649

To update the meta tags you’ll need to use the wized js api.

For example to wait until a certain request finishes to set the content

window.Wized = window.Wized || [];
window.Wized.push(async (Wized) => {
  const result = await Wized.requests.waitFor('request_with_meta'); // This will not trigger a request execution
  // Set browser tab title
  document.title = result.title;
  // Update or create og:title - the same applies for other og tags
  let ogTitle = document.querySelector('meta[property="og:title"]');
  if (ogTitle) {
      ogTitle.setAttribute('content', 'Your New Page Title');
  } else {
      ogTitle = document.createElement('meta');
      ogTitle.setAttribute('property', 'og:title');
      ogTitle.content = "Your New Page Title";
      document.head.appendChild(ogTitle);
  }
});

However, there is a caveat in that since this is done with JS, the pages fail to index for social media sites but google does execute the page JS .