How to set html meta

UI Builder
1

How can i change this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2

Hello @mohammad_altoiher

For this moment we haven’t the right way to set meta-tags for your apps, but I can offer a workaround:

After each container publishing - you should change index.html file as you need in the directory where you publish this container.

Also, we already have a ticket(BKNDLSS-24435) to implement it, and we notify you when it will be released.

Regards, Dima.

3

Hello, was wondering if this has been implemented yet?

4

Hello @Hezzron_Austin,

The ticket @Dima mentioned is still opened. This feature is on our roadmap but unfortunately I cannot provide you any estimates.

Regards,
Olha

5

@mohammad_altoiher @Hezzron_Austin here’s how you can modify viewport in UI Builder:

  1. Add the Custom Code block in the Page Enter handler:
    UI Builder - ConsoleDemo - Backendless 2022-08-25 12-09-49
  2. Click the gear icon and add the following code:
const metaViewPort = document.querySelector("meta[name=viewport]")
metaViewPort.setAttribute('content', 'width=600, initial-scale=1')

Modify the content as you see fit. Click the Save and Close button.

UI Builder - ConsoleDemo - Backendless 2022-08-25 12-11-02
UI Builder - ConsoleDemo - Backendless 2022-08-25 12-11-021114×713 59.6 KB

That should do it. I tried it in my page and it worked just fine.

Regards,
Mark

6

Hello Mark,

I did try this and although I got the tags to render on the page, they are not getting picked up via the facebook url debugger.

This is the code I am using

var link = document.createElement(‘meta’);
link.setAttribute(‘property’, ‘og:image’);
link.setAttribute(‘content’, ‘https://nctrl.imgix.net/DB-TAPES.jpg’)
link.setAttribute(‘prefix’, ‘https://ogp.me/ns#’);
document.getElementsByTagName(‘head’)[0].append(link);

const htmlTag = document.getElementsByTagName(“html”)[0];
htmlTag.setAttribute(‘prefix’, ‘og: https://ogp.me/ns#’)

Is there something I am doing wrong?

Thank you for your help
Hezzron

7

Hello @Hezzron_Austin

For me your code works good. I could find elements which you create in devtools.

Maybe problem related to facebook debugger, but unfortunately we couldn’t help with them.

1 Like
8

Hi @mark-piller ,
This works very well. Saves a litte bit of manual work for tweaking the published index.html. However, this does not work for search engines meta-tags which must be part of the static content. So, we still need the feature to maintain an html header section which is merged into index.html when publishing the app.

Regards,

9

@mark-piller this doesn’t work with Open Graph

10

Hi @mohammad_altoiher ,

For “Open Graph” the only way to add tags is manually edit each index.html file after each publish. Unfortunately there is no other way at the current moment.

Regards, Andriy