What Am I Doing Wrong With My Dynamic Meta Tags?

Wappler General How To
#1

Hi there @teodor…

I’m trying to use dynamic OG meta tags and things aren’t working so well… the OG data is not appearing when the page url is shared in an app like whatsapp.

Here is the relevent part of my header code:

<!doctype html>
<html is="dmx-app" dmx-on:load="flow_page_loaded.run()">

<head>
  <base href="/">
  <script src="dmxAppConnect/dmxAppConnect.js"></script>
  <meta charset="UTF-8">
  <!-- Title and OG Information -->
  <title dmx-text="get_activity.data.activity.title_external">Booking Form</title>
  <link rel="icon" type="image/x-icon" href="images/favicon.png">
  <meta property="og:title" dmx-bind:content="get_activity.data.activity.title_external" />
  <meta property="og:image" dmx-bind:content="header_image_url.value" />
  <meta property="og:site_name" dmx-bind:content="brand_name.value">

  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.workshop-angel.com" />
  <meta name="twitter:card" content="summary_large_image">
  <meta name="og:description" content="">

Am I correct in using the dmx-bind:content structure?
I am still using Wappler 3.9.7 for my app here… am currently testing the port to v5!)

The respective dynamic content has values which I’ve checked are correct:

og
og953×103 24.7 KB

However when the page is shared on whatsapp for example, the OG title and image data is not visible:

wa

This is the page url for you to take a look at:

http://walocal/form.php?h=1&t=1&e=e5c8ba74306878a3

And this is the image:

https://files.workshop-angel.com/94_94b0f00944f59cde_HAPPY%20VALENTINE%27S%20DAY%20%28Facebook%20Cover%29%20%28Email%20Header%29.jpg

Thank you!
Antony.

#2

Hi Antony,

Try this structure for the Facebook Meta Tags. Replace the dmx content to match your dynamic links. For the images to appear in the messages when shared in apps like WhatsApp, the image url has to be defined with a full path to the image with width & height. I have used image size as recommended for an advertisement image.

    <!--  Facebook Meta Tags -->
    <meta property="og:title" content="" dmx-bind:content="dataviewMetaTags.data[0].title">
    <meta property="og:description" content="" dmx-bind:content="dataviewMetaTags.data[0].description">
    <meta property="og:url" content="" dmx-bind:content="dataviewMetaTags.data[0].id != '/' ? 'https://suryabusiness.com.au'+ dataviewMetaTags.data[0].id : 'https://suryabusiness.com.au'">
    <meta property="og:locale" content="en_AU">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Surya Business Solutions, Carrum Downs">
    <meta property="og:image" content="https://suryabusiness.com.au/assets/img/SuryaBusiness-web-apps-og_v1.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:secure_url" content="https://suryabusiness.com.au/assets/img/SuryaBusiness-web-apps-og_v1.png">
1 Like
#3

There’s no guarantee the third-party services you use attempt to parse the page with JavaScript enabled as that’s a costly operation. dmx-bind is only valid when JavaScript is enabled

You need to use server-side binding, example for NodeJS here:

Server-side binding makes so the HTML that comes out of your server already has those meta-tags filled with data, instead of filling them at run-time through dmx-bind

2 Likes
#4

Hey @guptast and @Apple, thank you sooo much for your feedback!

I’m using PHP rather than node… @Teodor, do the server side bindings work with PHP?

#5

Server side rendering as in nodejs is not available for PHP.
You need to add such a code by hand or use static values there instead, if you want to share them on Facebook, Whatsapp or any platform that can’t render them.

1 Like
#6

Thanks @Teodor… that in itself is a reason to move to nodejs!

1 Like
#7

It’s all here

2 Likes