img alt标记如何与动态内容一起使用

Question

我正在通过搜索引擎优化项目来提高https://www.dynamicdentaledu.com的引擎可见性。我已完成了许多步骤，包括

• Google网站验证：<meta name="google-site-verification" content="someGoogleGeneratedCode..." />

• 在项目根目录中添加robots.txt文件和META代码：<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW, ARCHIVE" />，其中robots.txt文件包含：User-agent: *和Allow: /

• Google Analytics跟踪

• 将<meta name="keywords" content=...个关键字列表添加到head
• 向<meta name="description" content=...
添加了head说明
• 使用this free site帮助我创建站点地图

然而，当我搜索名为https://DynamicDentalEdu.com的网站时，它根本不会出现，甚至不会出现在搜索结果的第二页上。

我正在跟随here提供的一些提示，其中提示img alts和linking。

图片alt标签：我的网站是一个测试准备网站，用户可以一次获取一个问题图片。前端是Angular，内容通过独立的Laravel PHP API提供给它。

因此，一旦API响应返回，图像就会以Angular $scope呈现：<img ng-src="{{ question.image }}"/>

抓取工具如何能够像这样查看/索引动态生成的内容？检索下一个图像的唯一方法是用户单击next，进行API调用，然后获取数据。我已在网站上存在静态图片的其他地方应用了alt标记，但不确定如何处理这些标记：

关联：

• GoDaddy和其他来源基本上将您网站的外部链接描述为votes，但我的应用是全新的。这会严重影响搜索排名吗？

更新：

我刚刚要求Google使用Fetch as Google选项重新抓取我的网站，输出结果为预期的index.html，但正文是Angular ui-view包装器。 Google无法看到此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>

Answer 1

谷歌需要一段时间才能浏览网站。您是否要求从谷歌网站抓取？当我建立一个新的网站时，我花了几天的时间在搜索引擎中向我展示了几个星期，接近搜索列表的顶部。

显示需要时间。

对于动态替代文字，它取决于您在页面上获取图像的方式。但你可以做一些事情，比如命名图像，然后选择图像名称，修剪扩展名（.jpg）并将其放在alt位置。

// 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>