Schema.org structured data not working

Wappler General
#1

hello Everyone, I trying to get schema.org structured data formats working for a news page.
The code below is the main code for the News Article as produced in Wappler. Everything works fine for me except when I test the page here( structured testing tool) I get the Wappler bindings code like {{newsDetail.data.newsDetail[0].title}}
instead of the actual information from the Db. Kindly see the attached Image. The actual article title did not show up, the datePublished even though displays correctly in the browser is not being recorgnised by the testing tool etc. Any ideas what I am doing wrong?

@Teodor @Hyperbytes @brad @George

<article itemscope itemtype="http://schema.org/NewsArticle">
				<h1 itemprop="headline" class="newsHeadline">
					{{newsDetail.data.newsDetail[0].title}}</h1>
				<p class="text-muted articleMeta" id="articleMeta">Story By : {{newsDetail.data.newsDetail[0].author}} | Date: {{newsDetail.data.newsDetail[0].datePublished.formatDate("yy-MM-dd")}} | Genre:
					{{newsDetail.data.newsDetail[0].category}}</p>
				<img itemprop="image" dmx-bind:src="newsDetail.data.newsDetail[0].image" class="img-fluid" dmx-bind:alt="newsDetail.data.newsDetail[0].title" dmx-bind:title="newsDetail.data.newsDetail[0].title">
				<p dmx-html="newsDetail.data.newsDetail[0].intro"></p>
				<p itemprop="articleBody" id="newsBody" dmx-html="newsDetail.data.newsDetail[0].newsBody" class="mb-4"></p>
				<p class="display:none" itemprop="datePublished">{{newsDetail.data.newsDetail[0].datePublished}}</p>
				<p class="display:none" itemprop="dateModified">{{newsDetail.data.newsDetail[0].datePublished}}</p>
			</article>

Screenshot (5)
Screenshot (5)815×339 30.3 KB

#2

Hello,
yes this might be because of the page
‘https://search.google.com/structured-data/testing-tool’
can not ‘understand’ the code.

This has happened to me when I try to audit for SEO pages created with Wappler. Although pages rank well it is not possible to audit them

POSSIBLE SOLUTION - AT LEAST THIS WORKS FOR ME
(1)Open your webpage in a browser
(2)Save as html
(3)Upload the html on your server
(4)Validate the html page with Google
If everything is validating ok then your ‘Wappler created page’ will work nicely.
If it is not validating, make changes you need on your ‘Wappler created page’ and repeat from step (1).

Hope it helps.
Thank you!

2 Likes
#3

Thanks @t11.
indeed, when I do it in HTML, it works fine but that is not what I want unfortunately. I suspect I’m missing something. I have just tried using the JSON-LD format but that also did not render the bindings. Hoping @Teodor has an work around or tip for this… keeping fingers crossed. :grin:

<script type="application/ld+json">
	{
			"@context": "http://schema.org",
			"@type": "NewsArticle",
			"headline": "{{newsDetail.data.newsDetail[0].title}}",
			"author": "{{newsDetail.data.newsDetail[0].author}}",
			"datePublished": "{{newsDetail.data.newsDetail[0].datePublished}}",
			"datePublished": "{{newsDetail.data.newsDetail[0].datePublished}}",
			"image": 
		{
			"@type": "imageObject",
			"url": "{{newsDetail.data.newsDetail[0].image}}",
			"height": "700",
			"width": "407"
		},
		publisher":{
		"@type": "Organization",
		"name": "Demo Org",
		"logo": {
		"@type": "imageObject",
		"url": "http://example.com/images/logo.png"
		}
	}
}
</script>
#4

If you want the JSON validated

On your Wappler Created page debug it.
From the response tab copy the json result.
Paste the copied json structure where you want to validate it (I use JSON lint)
And validate it.

1 Like
#5

This sadly happens with a few systems even the Facebook debugger tool can not read the data bindings inside the OpenGraph tags.
Pretty much anything that crawls a page that can not parse the javascript entries is going to produce this type of result.
The only real way around this is using a service like https://prerender.io/

2 Likes
#6

If you want the JSON validated

please elaborate this for me. I dont get it

#7

From what I have read is that the testing tool for structures data doesn’t render javascript, but the google bot does. So it should index it correctly.

#8

Thanks @patrick I understand this now. I am worried though about sharing. I tried sharing a page on Whatsapp and instead of the headline, the Wappler binding was rather picked up.

#9

Yes sorry. I mean if you want to check if your json structure is valid.

#10

Yes this also happens.For example same goes for FB sharing but there is a workaround.
The most safe solution is to use ‘normal’ php for metatags which is always rendered.

1 Like
#11

@t11 Nico, do you have a standard way you are achieving this.

Are you using a server connect database query and then pulling the data into app connect first and then parsing it using php, or are you somehow accessing the results of the server connect query bypassing App Connect to echo the data into the meta tags.
I have to admit I haven’t played with it too much, so i am being a little lazy just asking, but being hopeful I can save some time.

#12

@t11 can you please do like a step by step guide for this or describe the process a bit more here?

#13

Since most front-end pages are filtered through GET_variables
(1) I create a normal PDO connection
(2) Create the query needed
(3) Apply the meta-tags inside the <head>

If you want more information just let me know.

Thank you!

2 Likes
#14

Ok, that makes sense, so just for that one part you are just using php fully for the database connection and query and echo of the results.
I kind of imagined that would be the easiest way too, but I have become used to my lovely Server Connect, so was wondering.
Your way also makes it that I probably wouldn’t even need to change my App Root from body to page if php is taking care of the head section stuff.

Thanks Nico, for confirming, I would have been sad if I had done that and everyone else was accessing the Server Connect query results in an easier way.

1 Like