gpt4 book ai didi

html - 有没有办法将自定义替代文本添加到谷歌地图中的自定义标记以提高 SEO 评级?

转载 作者:塔克拉玛干 更新时间:2023-11-03 02:39:35 29 4
gpt4 key购买 nike

由于我公司的一位客户要求标记图像上的 alt 属性,我遇到了 google maps API 的问题。

我在谷歌官方文档中找不到任何内容(即:https://developers.google.com/maps/documentation/javascript/custom-markers),甚至在其他地方找不到任何关于谷歌地图标记的 alt 文本的内容。就个人而言,我什至不知道它是否对 SEO 有一些影响(正如客户提到的第三方公司所说,因为他们在他们的网站上运行了一些 SEO 检查)。

我尝试使用来自 google 的示例并尝试添加一个假设的 alt 指令,但是,当然,它没有被拾取。

<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = { lat: -25.344, lng: 131.036 };
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), { zoom: 4, center: uluru });
// The marker, positioned at Uluru
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru',
alt: 'my alternate text goes here'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=***********************&callback=initMap" async defer></script>
</body>
</html>

渲染后的结果类似如下:

<img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;">

有什么办法可以得到类似的东西:

<img alt="my alternate text goes here" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;">

更新:

partial rendered code screenshot

最佳答案

1) 我认为它不会对 SEO 产生任何影响:标记是动态呈现的,据我所知,Google 仅解析静态 HTML 和 JS 呈现的一些内容,但我还没有看到它运行 Maps API 调用,我'我在我的 API 流量中注意到了它)。在 JSON-LD 中生成页面摘要可能会更有帮助:https://json-ld.org/

2) 如果你必须添加一个 alt 标签(我不明白为什么)或者你想在标记旁边显示一个悬停工具提示,你必须考虑扩展 google.maps.OverlayView()创建您自己的自定义标记:此对象有一个 draw原型(prototype)方法可以让你把任何东西放在 map 上,任何你想要的方式:<img alt=...> , 一个 <div>等等

https://developers.google.com/maps/documentation/javascript/reference/overlay-view https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

3) 由于您依赖 Google 正确解析 JS 输出:为什么不尝试添加 alt 标签事后( map 加载后),如 (jQuery) $('img[alt=""]').attr('alt','Now I fixed it') ;)

关于html - 有没有办法将自定义替代文本添加到谷歌地图中的自定义标记以提高 SEO 评级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57369777/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com