CODEWITHSUNDEEP
htmlseo
user3871
user3871

Reputation: 12718

How img alt tags work with dynamic content

I'm working through SEO items to improve my engine visibility for https://www.dynamicdentaledu.com. I've completed a number of steps, including

Yet, when I search for my website named https://DynamicDentalEdu.com, it doesn't appear at all, not even on the second page of search results.

I'm following a few more tips from here, which suggests img alts and linking.

Image alt tags: My site is a test preparation website, and a user can get question images one at a time. The frontend is Angular, and content is served to it from a standalone Laravel PHP API.

So, the image is rendered in the Angular $scope once the API response returns: <img ng-src="{{ question.image }}"/>

How is a crawler able to view / index dynamically generated content like this? The only way the next image is retrieved is by the user clicking next, an API call is made, and the data is fetched. I've applied alt tags everywhere else on the site where static images exist, but not sure how to handle these:

enter image description here

Linking:

Update:

I just requested Google recrawl my site using Fetch as Google option and the output was the index.html as expected, but the body was the Angular ui-view wrapper. Is Google unable to see the rest of this HTML?

   ... head stuff in here ^
</head>

<!--Always include header-->
<ng-include src="'html/partials/header.html'"></ng-include>

<!--Display single page through UI View-->
<div ui-view id="full-wrapper"></div>

<!--Always include footer-->
<ng-include src="'html/partials/footer.html'"></ng-include>

enter image description here

Upvotes: 0

Views: 4161

Answers (1)

Icewine
Icewine

Reputation: 1851

It takes google a while to crawl through a site. Have you requested a site crawl from google? When I put up a new website it took a few days to show up for me in the search engine and several more weeks to come closer to the top of the search list.

It takes time to show up.

As for dynamic alt text, it depends on how you are getting the image on the page. But you could do something like naming the images and then selecting the image name, trim the extension(.jpg) and put that in the alt position.

// test array to hold some random pictures
var img1 = "http://183.177.132.180/db_img/photo/FLN70-6902-001_1_1_1.jpg";
var img2 = "http://183.177.132.180/db_img/photo/FLN70-6902-001_1_2.jpg";
var img3 = "http://183.177.132.180/db_img/photo/ATB73-1902-001_1_1.jpg";

// create test image array
var imgArray = [img1, img2, img3];

// counter for test array
var counter = 0;

$("#nxtBtn").click(function() {

  // edit your text(ill leave the manipulation up to you)
  var altText = "text here [ " + imgArray[counter] + " ] or text here";

  $("#imgHolder").attr('src', imgArray[counter]); // just my code to add image

  $("#imgHolder").attr('alt', altText); // IMPORTANT here to ad the alt text

  // just to show the alt, not important
  $("#alt").html(altText);

  // just my add image code, not important
  if (counter >= 2) {
    counter = 0;
  } else {
    counter++;
  }

});
#imgBox {
  height: 200px;
  width: 200px;
  outline: 3px solid #CCCCCC;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: #FFF;
}
img {
  max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="imgBox">
  <img src="" id="imgHolder">
</div>
<button id="nxtBtn">
  NEXT
</button>
<hr>
<br>ALT TEXT
<p id="alt"></p>
<br>
<hr>

Upvotes: 0

Related Questions