Log in to AnswerLog in to Follow
Agnes Marcella
72Views
10Comments
How to set description, title, and image preview for reactive website?
Question

So I have a problem setting up title, image, and description preview for my reactive website. I've tried making this in traditional web app, I used Open Graph plugin and it worked just fine, the meta tags were appended nicely and the preview appeared.
I've tried using the very same plugin and HTTP request handler (AddMetaTag and AddPostProcessingFilter) on the reactive version. However to no avail, they didn't add anything to the head section.

Lastly, I tried using Javascript and the meta tags get appended to head section but the preview still does not show up.

Above is the attachment of result from inspect element of traditional web

TraditionalWeb.jpg

0
0
16 Sep 2020

Here is the result for reactive web

1
0
16 Sep 2020

Hi! Were you able to solve this issue?

0
0
02 Mar
João Marques
mvp_badge
MVP

Hi Agnes and Luís,


There is a component called SEO Utils on Steroids which already provides functions to set tags like the ones you mentioned. Perhaps you want to use it, instead of reinventing the wheel, for this purpose.


Kind Regards,
João

1
0
02 Mar

Thanks!
Seems like a good solution.
But I am adding it to my Screen > OnInitialize and it does not really work.

What am I doing wrong?

ScreenShot20210705at15.46.35.png

0
0
05 Jul
João Marques
mvp_badge
MVP

Hi Iaroslav,


What exactly "does not really work"?

I have tried an example with the same thing and it works, I see the tags in the HTML:


Kind Regards,
João

0
0
05 Jul

Hello João!

It is not working in source code (HTML).
You can see this by think link https://personal-mbj3bpkb.outsystemscloud.com/BracketApp/Online
Or check the screenshot attached.

The title is OK when you hover the mouse on the tab in the browser.

ScreenShot20210709at11.23.14.png

0
0
09 Jul
João Marques
mvp_badge
MVP

Replying to Iaroslav Glodov's comment on 09 Jul 2021 08:25:43

Hi Iaroslav,


The tags are added to your page, as we can see by inspecting the HTML of your page:


The fact that you are not seeing them, is related to the fact that you're running the request without a client browser, and therefore the OnInitialize and OnReady events do not run. The same thing happens calling the page via PostMan for instance.

This is because Reactive apps work as Single Page Applications, where most of the content is created by JavaScript in the browser. Check out the full explanation by Tiago Simões here and the suggested alternatives.


Kind Regards,
João

1
0
09 Jul

Replying to João Marques' comment on 09 Jul 2021 08:50:12
  1. Should I create a web application page (application) for such a purpose?
  2. The link with the full explanation is incorrect (not link at all), can you provide a correct one?
0
0
09 Jul
João Marques
mvp_badge
MVP

Replying to Iaroslav Glodov's comment on 09 Jul 2021 13:29:36

1. I am not sure you can do this with Reactive but haven't tried Tiago's suggestion to be honest;
2. Thanks for pointing it out. I corrected the link on my previous comment.

1
0
09 Jul
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.