Viewing page source. Cant see links or other page info

Question

I bought a template for a radio portal and the index page code is.

<!doctype html>
 <html>
 <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<meta name="google-signin-client_id" content="80957862538-juiu2cgia32rn3lik36fv9a1ihc6fqof.apps.googleusercontent.com">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/player.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<title>Listen Radio </title>
<base href="/">
 </head>
  <body ng-app="musiclistener">
<span ng-cloak>
    <span ng-view ></span>
</span>


<div id='player-container'>
    <audio controls id='music-player' src="#"></audio>

    <div class='container-fluid'>
        <div class='col-sm-1 col-xs-3 text-center' id='play-icon-container'>
            <i class='fa fa-play' id='play-btn'  ng-click="playtoogle()"></i>
        </div>
        <div class='col-sm-1 center-block hidden-xs' id='podcast-icon-container'>
            <img src="{{ playerthumb }}"  id='play-img' class='img-responsive center-block'>
        </div>
        <div class='col-md-6 col-sm-4 col-xs-6' id='podcast-bar-container'>
            <span style='color:#fff;position:relative;top:3px;text-transform:capitalize' ng-if="musicplayingentity">{{ musicplayingentity}}</span>
            <div id='podcast-progress'>
                <div id='podcast-id-value'></div>
            </div>
        </div>
        <div class='col-md-1 col-sm-2 text-center hidden-xs' id='addons-icon-container'>

            <span ng-hide="userLoggedIn">
                <a href data-toggle="modal" data-target="#loginModal"><i class='fa fa-plus pull-left'></i></a>          
                <a href data-toggle="modal" data-target="#loginModal"><i class='fa fa-comment '></i></a>
            </span>

            <span ng-show ="userLoggedIn">
                <i ng-click="makeFavoritePlayer()" ng-hide="playingfav" class='fa fa-plus extrafun'></i>
                <i ng-click="removeFavoritePlayer()" ng-show="playingfav" class='fa fa-check extrafun'></i>
                <i ng-click="showCommentBoxPlayer()" class='fa fa-comment '></i>
            </span>

            <i class='fa fa-share pull-right' ng-click="shareboxPlayer()"></i>
        </div>
        <div class='col-sm-3 col-xs-3 text-center' id='volume-container'>
                <div class='col-xs-2'>
                    <i class='fa fa-volume-up'></i>                     
                </div>
                <div class='col-xs-1 col-md-9'>
                    <div id='volume-progress'>
                        <div id='volume-id-value'></div>
                    </div>
                </div>
        </div>
    </div>
</div>


<script src="https://apis.google.com/js/platform.js" async defer></script>  
<script src="ang/angular.min.js"></script>
<script src="ang/angular-sanitize.min.js"></script>
<script src="ang/angular-route.min.js"></script>
<script src="ang/angular-cookies.min.js"></script>
<script src="ang/angular-facebook-sdk.js"></script>
<script>
  window.fbAsyncInit = function() 
  {
        FB.init({ appId      : '195962897544265',  xfbml : true,  version : 'v2.8'  });
  };
</script>
<script src="ang/app.js"></script>
<script src="ang/controllers.js"></script>
<script src='js/jquery.js'></script>
<script src='js/bootstrap.js'></script>
<script src='js/typed.js'></script>
<script src='js/wow.js'></script>
<script src='js/player.js'></script>
<script>
  new WOW().init();
</script>
<script>
  $(function(){
      $(".typing-text").typed({
        strings: ["MUSIC", "SPORTS", "BOOKS", "NEWS", "TALK"],
        typeSpeed: 200,
        backSpeed: 150,
        loop: true
      });
  });
</script>

If i visit the home page via my browser all the info is visable. But when i right click and view page source all I can see is the index page as layed out in the code above. I cant see any of the menu links, images, or any other info. Can someone please tell me why when I view page source I casnt see all info. The reason I ask it when google spiders my site it cant see my menus or images and so on, which is really bad for seo.

Any Ideas why.

Also if I right click on the home page and click inspect on chrome I can see all info.

Thanks

This is because you're using Angular, which populates the index page with all those elements dynamically. They don't 'belong' to the index, they are DOM insertions. See: https://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications — FuriousD, Jun 14 '17 at 22:56

Viewing page source. Cant see links or other page info

0 Answers0