Need Help Setting Meta Tags In Reactive Web

We utilize Reactive Web.   We want to add meta tags for title, description, and other meta tags.    This is  straightforward to do in Traditional Web with HTTP Handler.   However that does not work with Reactive.

Has anyone figured out how to do meta tags with reactive.   In looking at the page source on a simple page from reactive there appears to be java script running that we did not put into the app.  See highlighted javascript.

We have tried the following with no results to get meta tabs for reactive

1. java script

2. HTTP Handler

3. Creating a Service and Assigning the Metatag in the service and then inheriting the service to the reactive web app

4. HTML Injection forge component.

We may not be doing everything correct on those options but we tried.

We look forward to your feedback.

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="format-detection" content="telephone=no" />

<meta http-equiv="Strict-Transport-Security" content="max-age=31536000;includeSubDomains" />



        

        

        

        <script type="text/javascript">

            (function () {

    function appendMetaTag(name, content) {

        var e = document.createElement("meta");

        e.setAttribute("name", name);

        e.setAttribute("content", content);

        document.head.appendChild(e);

    }

    var shouldShrink = false;

    var shouldInjectViewport = false;

    if (/(iPad)|(iPhone)/i.test(navigator.userAgent)) {

        var version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);

        shouldShrink = version && version[1] === "9";

        shouldInjectViewport = version && version[1] === "11";

    }

    appendMetaTag("viewport", (shouldInjectViewport ? "viewport-fit=cover," : "") + "width=device-width,initial-scale=1,user-scalable=no, minimum-scale=1.0" + (shouldShrink ? ",shrink-to-fit=no" : ""));

})();

        </script>

        <script type="text/javascript" src="scripts/OutSystemsManifestLoader.js?1Z9dWaLOCNi4Ut_2dsPtiw"></script>

<script type="text/javascript" src="scripts/OutSystems.js?p5eKvE3aS8b15CXklrM6cw"></script>

<script type="text/javascript" src="scripts/OutSystemsReactView.js?_A7uH5b6LShq54vzvDLYow"></script>

<script type="text/javascript" src="scripts/cordova.js?7KqI9_oL9hClomz1RdzTqg"></script>

<script type="text/javascript" src="scripts/Debugger.js?UpAd0hKN8XsT1n6AGRWinQ"></script>

<script type="text/javascript" src="scripts/TestReactiveWebPage.appDefinition.js?oIxMolPbyWQhqgY9iNQEyw"></script>

<script type="text/javascript" src="scripts/OutSystemsReactWidgets.js?wMkxH9CxRVtV9yjiGoUAUA"></script>

<link type="text/css" rel="stylesheet" href="css/_Basic.css?EqGzAe81QbZLXJyfY3oLwA"></link>



        <script type="text/javascript">

            OSManifestLoader.indexVersionToken = "HOWI0ZzUoDH9ENRmg2eTSA";



        </script>

        

    </head>

    <body>

        <div id="reactContainer"></div>

        

        <script type="text/javascript" src="scripts/TestReactiveWebPage.index.js?AAAMi89jEyE4PEcvvs80fw"></script>



    </body>

</html>

Could you please try below


<!DOCTYPE html>
<title>Test</title>
<meta name="description" content="this is old">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

<button>Change description</button>

<script type='text/javascript'>
$('button').on('click', function() {
    // Just replacing the value of the 'content' attribute will not work.
    $('meta[name=description]').remove();
    $('head').append( '<meta name="description" content="this is new">' );
});
</script>

Hi Bradley,

If you add meta tag or other items on the screen using JS or JQuery, those will not be available when you view source of the page. 

These are added on runtime after javascript execution so you can see them using inspact element option of browser developer tools.

Still need help with the head title metatag. Any ideas would be helpful.

We got part of the meta tags to work but not the head title meta tag, which is one of the two most important from an SEO perspective

The approach that has worked is in a script that runs for a screen. In INTERFACE at the bottom. Note…The title one below in the javascript does not update the head title. See javascript below.


Javascript 

var link = document.createElement('meta');

link.setAttribute('name', 'author');

link.content = "****AUTHOR****”;

document.getElementsByTagName('head')[0].appendChild(link);



****this does a title but not the head title********


var link = document.createElement('title');

link.setAttribute('name', 'title');

link.content = "****TITLE****";

document.getElementsByTagName('head')[0].appendChild(link);

var link = document.createElement('meta');

link.setAttribute('name', 'keywords');

link.content = "*******KEY WORDS******* ";

document.getElementsByTagName('head')[0].appendChild(link);

var link = document.createElement('meta');

link.setAttribute('name', 'application-name');

link.content = "****Application Name****";

document.getElementsByTagName('head')[0].appendChild(link);

var link = document.createElement('meta');

link.setAttribute('name', 'description');

link.content = "*******************META TAG DESCRIPTION********";

document.getElementsByTagName('head')[0].appendChild(link);

Hi Bradley,

In reactive web add a javascript widget to the OnReady event:

document.documentElement.setAttribute('attributename', 'attributevalue');

This is how OutSystemsUI itself also does it:

Regards,

Daniel



Bradley Petersen wrote:

Still need help with the head title metatag. Any ideas would be helpful.

We got part of the meta tags to work but not the head title meta tag, which is one of the two most important from an SEO perspective

The approach that has worked is in a script that runs for a screen. In INTERFACE at the bottom. Note…The title one below in the javascript does not update the head title. See javascript below.


Javascript 

var link = document.createElement('meta');

link.setAttribute('name', 'author');

link.content = "****AUTHOR****”;

document.getElementsByTagName('head')[0].appendChild(link);



****this does a title but not the head title********


var link = document.createElement('title');

link.setAttribute('name', 'title');

link.content = "****TITLE****";

document.getElementsByTagName('head')[0].appendChild(link);

var link = document.createElement('meta');

link.setAttribute('name', 'keywords');

link.content = "*******KEY WORDS******* ";

document.getElementsByTagName('head')[0].appendChild(link);

var link = document.createElement('meta');

link.setAttribute('name', 'application-name');

link.content = "****Application Name****";

document.getElementsByTagName('head')[0].appendChild(link);

var link = document.createElement('meta');

link.setAttribute('name', 'description');

link.content = "*******************META TAG DESCRIPTION********";

document.getElementsByTagName('head')[0].appendChild(link);


Hi Bradley,

I given reply on personal message as well with both the cases on this.