Hello,
I am having some trouble to use this component on react application.
The metadata is indeed added to the page, but i am afraid that, either it is added to the page too late, or the facebook crawler engines don't allow javascript execution (discussed on this post https://stackoverflow.com/a/7623986)
Any idea on this? From what i read, the only way to do this was if we had the "Escaped content" feature of the traditional web expressions, or if outsystems HTML element allowed the "meta" name.
Thank you,
Vasco Mendes
Hi Vasco,
Thanks for bring this situation to our attention.
I checked with other crawlers and indeed the metas are not fetched.I guess because when the request is not run with a client browser, the OnInitialize and OnReady events do not run. The same thing happens calling the page via PostMan for instance.
I am going to investigate other ways in which this can be achieved and will let you know.
Best regards,
João
Hi João, Vasco,
Reactive apps work as Single Page Applications, where most of the content is created by JavaScript in the browser. Some crawlers, like google search engine, work correctly with this (they use browser-like JavaScript engines to run the code on the page on their side). Others, like Facebook (which ironically created React) do not yet support that.
At OutSystems we are currently investigating the possibility of having SEO Friendly URLs available in reactive apps. We'll also take a look into this scenario to see if there is any possible workaround for these crawlers shortcomings, although at this point in time we can't promise anything.
Cheers,Tiago Simões
Hi! Any updates on this issue? I was thinking about using the same component but I'm afraid I will run into the same error...
Hi LuÃs,
The team is currently working on making it easier to change the URLs of the screens. Regarding optimizing for crawlers other than google, there are some external services (e.g. https://www.prerender.cloud/, https://prerender.io/) that you might be able to use to help on that.
Just to be more clear (sorry for my previous short comment), I ran into this issue when trying to improve the looks of my application's links, when shared via social networks (Facebook, Whatsapp, etc).
I was specifically trying to add an image preview, but then noticed the other meta tags aren't working either (according to: https://developers.facebook.com/tools/debug/), despite when inspecting the page (via chrome dev tools), I am able to see them.
I am currently not using any plugins or components, I am simply appending the meta tags using a set of client actions that run inside the 'OnReady' event of the page's screen (Reactive Web Application).
"Reactive apps work as Single Page Applications, where most of the content is created by JavaScript in the browser. Some crawlers, like google search engine, work correctly with this (they use browser-like JavaScript engines to run the code on the page on their side). Others, like Facebook (which ironically created React) do not yet support that."
Are you telling me that SEO Friendly URLs are not yet available in reactive apps in Outsystems? I have run into several react-based solutions that use the 'react-helmet' package, don't know if you have considered this. Are there any known workarounds other than the one you mentioned (https://www.prerender.cloud/)? I am not interested in using external services. Thank you in advance.
Yes, SEO Friendly URLs are not yet available in reactive, but will be available soon as a technical preview. We'll also investigate further yours and other similar scenarios related to crawlers, but to be honest we can't yet promise anything on that area.
Thanks,Tiago Simões
Meantime is this a solution to create a Standard Web Application for such a purpose?
Is there any update on the same?
I am building a B2C application that requires SEO.
I m having the same problem, I m not able to add metadata to our page.
So far the solution is to use a pre-render service that can serve a statically generated page to crawlers. The problem comes from how single page applications work. This article gives a good overview of the challanges while optimizing SPA pages for SEO (where metadata plays a big part).
I did a few tests with google console and bing webmaster tools. While google can handle the JS generated pages, bing won't see any content. Crawlers from social media platforms (Linkedin, FB, instagram, printerest, whatsaap, etc) cannot interpret JS built applications. In essense, most of the crawlers interpret only the first http 200 ok response they get. before the JS kicks in and starts filling up the web application. Because of that they won't see any content (including meta data).
IG
Hello, I need to create SEO metadata for dynamic sharing with social networks, I used the forge component Seo_Utils steroids, they add the tag in the head of the HTML but it does not work when testing on the Facebook tool, does anyone know how to solve it?I already made inclusion via javascript and also happens the same.I'm using reactive page
Hi Luciano,
It won't work unless you serve a server side rendered page to the sharing bot.
OutSystems reactive compiles into a Single Page Application, which poses a challenge when optimizing the page for SEO (sharing into social media fits into the SEO thread). When you paste the link to share, Facebook bot will try to crawl your webpage, read its content (which includes the meta tags) and generate the sharing tile based on read data.
Most bots are unable to handle JavaScript. So what happens is, the bot reaches your SPA, sees the 200 OK as response and assumes the page was fully rendered. Unfortunately this is not true, since the content will be rendered when the JS kicks in. All the bot sees is a page without any content, thus is unable to generate the sharing tile.
In order for this to work, with OutSystems reactive, you need to serve a server side rendered page to bots. You can have a look to prerender.io, which works very well for this kind of scenarios.