109
Views
2
Comments
Set OpenGraph for social media sharing with meta tags ?
Application Type
Reactive
Platform Version
11.11.0 (Build 26942)

Hello,

I would like to share content from my website to social media.

So, I need to use meta tags to snippets the text that describes a page’s content.

Also, I have already tried a few solutions by following :

- https://www.outsystems.com/forums/discussion/61536/need-help-setting-meta-tags-in-reactive-web/ 

- https://www.outsystems.com/forge/component-overview/6733/social-sharing-tags 

- https://www.outsystems.com/forums/discussion/64636/how-to-set-description-title-and-image-preview-for-reactive-website/

The result

The meta tags on my website have already shown when inspecting element on the browser (F12) 

From the above picture, I set 'og:title' = "Sphere Garage Car Details"


But when I test on Facebook Developers Tools, The data that I sent don't show on the test screen.

It show 'og:title' = "tharin.outsystemscloud.com"

(https://developers.facebook.com/tools/debug/?q= )


Could you please suggest how to config to solve this problem?

Thank you for your help.


Best Regards,

Patikorn

2023-09-26 10-34-09
Cristiana Umbelino

Hi there, 

The behavior you are experiencing is due to the underlying technology that is used to create Reactive web apps.

You can have a better explanation by reading this thread and the replies from Tiago Simões. Also take a look at the component this thread is about: SEO Utils on Steroids (if you haven't still)

UserImage.jpg
Alek Naiflatrarep

You can drop your OpenGraph meta tags into the Layout block using the Meta Tags section, or add them manually with a simple expression in the Layout’s <head> so each screen can override title, description, and image. I’ve done this by exposing variables at screen level and passing them down. While testing previews, I was also checking share performance on platforms I use, like https://famoid.com/ , and everything rendered fine.

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