Shared Titles Showing Bind Data rather than Actual Title

Wappler General How To
#1

Hi there,

I am having difficulties with the users sharing pages generated with Wappler, I realize that it renders the page client-side and most Facebook, Twitter share modules use the html part to pull titles from before the page is populated - in my case the titles in shares become: {{getPosts.data.query1[0].actualTitle}}
Not very pretty or informative to the user.

I have tried setting up prerender.io as a worker on Cloudflare to show prerendered pages so it brings in the content like a server-side rendered page rather than client-side, but that doesn’t seem to be working either.

Any other tricks I could use to allow users to share pages with nice titles and potentially images from the loaded dmx-binds.

Also while we are at it, any tricks to load the entire page server-side rather than client-side, so the page doesn’t populate on load.

P.s I wanted to point out that the SEO in terms of google bots is working, as google renders the javascript and the titles correctly, but for more user-oriented actions like sharing it requires the page to be rendered before the client sees it.

Thanks for the help! I really appreciate it.

#2

I’m not at my computer so don’t have a screenshot for you but in your App connect panel select App them in the properties select page instead of body.

#3

Hi @brad yes this is what I have done already, it loads correctly for example… say the title is “My Article” it will load that correctly in the page no problems.

But if someone shares an article on Facebook or Twitter, it defaults back to the code binding that created the title in the first place.
{{getPosts.data.query1[0].actualTitle}}

I hope that provides more information into what’s happening

EDIT: seems to be related to this post Sharethis facebook here.

#4

Yes, sadly Facebook, Twitter, Googles Schema all seem to read the page information incorrectly, the App to body or Page is what makes it render in the Google and other SERPs however the others can not parse the JavaScript, they read the page source before the JavaScript is rendered client side.

Only option are to use a service like prerender.io, which I realise you have not managed to get working, and to be honest I am having some trouble with it myself, and about to switch over to method 2

Method 2 is to manually access your database like you used to before Wappler and then use the data returned to populate anything related to Schema, OpenGraph, and Twitter.
There are multiple sources of information on how to make a database connection manually through php and retrieve the database stored information, such as StackPath.

I honestly do not think there are many other options we have with this particular issue, and I assume Vue and React and any other JavaScript system will have the same issue, this trouble began with Ajax many many many years ago.

#5

Yes @psweb I was reading through your guide on getting Stackpath working a while ago, sadly I didn’t have any luck getting it to let my connections through - it seemed to block everything related to dmxConnect. Did you have luck in the end setting up Stackpath as a CDN, I heard it has prerendering built into their stacks. This was the post: For those having Database Connectivity Issues

#6

I did manage to get it working, however I had to go through their support department, and they had to make some alterations to unblock things, that was my biggest issue with stackPath when I used it last.

Really was a nightmare with the blocking stuff. Tell their support what is happening and see if they can guide you through unblocking everything.

#7

Hmm yeah, I might give it another shot then, although did it actually help in terms of prerendering at all for you? Is it worth the trouble? If it worked for you then I’ll go through the hassle haha. :grinning:

#8

@psweb Going to give Stackpath another shot, waiting on hearing back from support now… fingers crossed.

1 Like
#9

Let me know how you go, I still have my StackPath Account running currently, so I can try look at or compare settings with you.

#10

Well at the moment, Stackpath is online as a CDN, and it’s loading everything except for database connections to the mySQL server. It’s basically just pending until a 504. They are investigating, but I shouldn’t have to change anything in Wappler, surely it would be on their end.

#11

Its going to probably be a 2 part thing

  1. StackPath need to make some alterations to whitelist certain things

  2. In your cPanel you may need to whitelist a SQL connection from StackPath

The only horrid thing about the entire setup is that when you make alterations to your online files you need to clear the StackPath cache or you do not see the alterations, but rather see their cached version which can be a bit of a pain.
In Wappler you should not need to alter anything.

#12

Ah okay, they came back saying it’s probably due to a database connection issue - which I said can’t be right as it was working before the CDN. I haven’t tried clearing the cache, let’s see how that goes.

#13

Make sure you look at your cPanel too, look under Remote MySQL to see if you need to add an Access Host.

Keep in mind 99% of what you normally do, you use a connection to “localhost” which is the local loopback address of your server, therefore you have access, because your web hosted files and your MySQL database are on the same server and the server has security clearance to access its own SQL database.
That is not to say that StackPath can though.

Best backend/server support for wappler?
#14

The clear cache was a bust, still no progress.

So does this mean, with my current setup:
Initial Nameservers point to > Domain Host (files & mySQL) point to > @ and www records at StackPath. goes to > The Web

When I setup the StackPath account they wanted the @ and www records pointed to them.
Will this affect the current database connection setup in Wappler, or should it still connect to Domain Host.

#15

Take a look at


and this