img alt 标签如何处理动态内容

Question

我正在处理 SEO 项目以提高 https://www.dynamicdentaledu.com 的引擎可见性。我已经完成了许多步骤，包括

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

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

• 谷歌分析跟踪

• 将<meta name="keywords" content=... 关键字列表添加到head
• 将<meta name="description" content=... 描述添加到head
• 正在生成站点地图，使用 this free site 帮助我创建它

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

我正在关注来自here 的更多提示，其中建议使用img alts 和linking。

图片替代标签： 我的网站是一个备考网站，用户一次只能获取一张问题图片。前端是 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

谷歌需要一段时间才能爬过一个网站。您是否请求过 Google 的网站抓取？当我建立一个新网站时，我花了几天时间才出现在搜索引擎中，又过了几周才接近搜索列表的顶部。

出现需要时间。

至于动态替代文本，这取决于您如何在页面上获取图像。但是你可以做一些事情，比如命名图像，然后选择图像名称，修剪扩展名（.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>