Dynamically Bind MetaTag Jquery

Question

Hello Guys I am Trying to bind content dynamically using Jquery. I followed many discussion from stackoverflow site such as How to insert metatag without using jquery append?

the following is my tried code. I donot know where I am doing wrong Any help would be appreiciated.

<head>
    <meta property="og:description" content="sdgds"/>
    <meta property="og:title" content="sfsfds"/>
    <meta property='og:image' content="http://i1.ytimg.com/vi/v9ao-fGMVz8/maxresdefault.jpg" />
    <meta property='og:video' content="http://abcd.azurewebsites.net/api/Video/?video_id=1" />
     <meta property="og:video:type" content="application/x-shockwave-flash" />
     <meta property="og:video:width" content="1920" />
     <meta property="og:video:height" content="1080" />

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    $(document).ready(function() {
            var first = getUrlVars()["id"];
            $.ajax({
            type: "Get",
            url: 'http://abcd.azurewebsites.net/api/Video/?video_id=1',
            success: function (data) {  
                alert("Hello");
                var tv_main_channel = $('#tv_main_channel');
                data="http://abcd.azurewebsites.net/Content/movie.mp4";
                tv_main_channel.attr("src", data);
                var video_block = $('#video');
                video_block.load();

                $('meta[name=og\\:description]').attr('content', "This is des");

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(JSON.stringify(XMLHttpRequest));
            }
            });
        });

    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
        }
        return vars;
    }

    </script>




</head>

Do you know what meta tags do? They are read by the browser when the page loads and are used to give information that normally would be in a header sent from the server. Most meta tags if not all are ignored after load. I see you are changing og: meta - I assume it is in preparation to launch something that actually READS the meta tags when lauched, like facebook? If so, what is the next action you are doing? — mplungjan, Mar 31 '14 at 12:24
What I mean - does your next actions read the amended meta data at all? — mplungjan, Mar 31 '14 at 14:20

score 1 · Answer 1 · answered Mar 31 '14 at 12:46

1

The version of jquery you are using is not suitable to do this. Use a newer version.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.js"></script>

answered Mar 31 '14 at 12:46

Kapi

547
5
11

Thanks for the quick reply but it is also didnot work. – Tinku Chacko Mar 31 '14 at 12:54
Sorry, also change the selector to: 'meta[property=og\\:description]' ( http://jsfiddle.net/LEzCY/ ) – Kapi Mar 31 '14 at 12:57
Well it works but when i test it When I test it in https://developers.facebook.com/tools/debug/ it still displays old content why is that? – Tinku Chacko Mar 31 '14 at 13:22
Properbly because the facebook debugger just retrieves the HTML and doenst execute any client side code like javascript. – Kapi Mar 31 '14 at 13:37

Dynamically Bind MetaTag Jquery

1 Answers1