有没有办法将自定义替代文本添加到 google 地图中的自定义标记以提高 SEO 评级？

Question

我遇到了 google 地图 API 的问题，因为我公司的一位客户要求标记图像上的 alt 属性。

我在官方 Google 文档中找不到任何内容（即：https://developers.google.com/maps/documentation/javascript/custom-markers），甚至在其他地方找不到任何关于 google 地图标记的 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;">

更新：

Answer 1

1) 我认为它不会对 SEO 产生任何影响：标记是动态呈现的并且 afaik Google 仅解析静态 HTML 和一些由 JS 呈现的内容，但我没有'我没有看到它运行地图 API 电话，我会在我的 API 流量中注意到它）。在 JSON-LD 中生成页面摘要可能会更有帮助：https://json-ld.org/

2) 如果你必须添加一个 alt 标签（我不明白为什么）或者你想在标记旁边显示一个悬停工具提示，你必须考虑扩展 google.maps.OverlayView() 来创建你的自己的自定义标记：此对象有一个 draw 原型方法，允许您以任何方式在地图上放置任何内容：<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 标签 post-factum（在地图加载后），如 (jQuery) $('img[alt=""]').attr('alt','Now I fixed it');)

有没有办法将自定义替代文本添加到 google 地图中的自定义标记以提高 SEO 评级？

Is there a way to add custom alt text to custom marker in google maps to improve SEO rating?

html

seo

google-maps

google-maps-api-3