Question

我公司的一位客户要求标记图片上的alt属性，因此我面临着Google Maps API的问题。

我在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呈现的某些内容，但我还没有看到它运行Maps API调用， d在我的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输出：为什么不尝试在factum之后（地图加载后）添加alt标签，例如（jQuery）$('img[alt=""]').attr('alt','Now I fixed it');）

有没有一种方法可以向Google地图中的自定义标记添加自定义替代文本，以提高SEO评级？

1 个答案: