Facebook preview showing code

Wappler General Need Help
1

If someone links to our ticket page in Facebook, the preview shows code. Is there some way to show actual data or not show anything at all?

Screen Shot 2020-12-02 at 6.50.41 PM
Screen Shot 2020-12-02 at 6.50.41 PM686×504 179 KB

Oh, and maybe I have had too much coffee today but the Wappler UI (server Connect especially) looks ultra crisp and clean today.

2

You can use OpenGraph meta tags to control the output on social media sites. An example-

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">

You can find the full list on the OpenGraph website

3

Thanks Max, I assume you have to add that on every page you expect to be shared?

1 Like
4

Thanks Max, just found that you can actually add that info right in the Wappler UI.

1 Like
5

Facebook cannot render {{dynamic data}} in the og tags / meta tags, unlike Google.
You need to use PHP code for this on the page (as long as I remember you are using PHP Brad) and I believe it was @psweb who posted a how-to topic about this in the forum.

Currently dynamic meta tags can be rendered on the serverside only using NodeJS, then Facebook sees them.

1 Like
6

Thanks Teodor, I will look for Paul’s post.

In this particular use case adding dynamic content to the Facebook preview isn’t a requirement. I can use static info for this project.

1 Like