feat(Map): integrate Schema.org microdata for Map components (#1326)

* feat(Map): integrate Schema.org microdata for GeoCoordinates in GoogleMap and YandexMap components

* fix(Map): remove unwanted div from google map

* feat(Map): rework schema.org to JSON-LD format

* fix(Map): remove any from microdata schema

---------

Co-authored-by: Denis Ryabko <[email protected]>

Author: arteria32

src/components/Map/GoogleMap.tsx

@@ -62,6 +62,21 @@ const GoogleMap = (props: GMapProps) => {
         };
     }, [forceAspectRatio, isMobile]);
 
+    // Generate Schema.org JSON-LD for Google Map
+    const mapMicrodataScript = React.useMemo(() => {
+        if (!address) {
+            return null;
+        }
+
+        const json = JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'Place',
+            address,
+        });
+
+        return <script type="application/ld+json" dangerouslySetInnerHTML={{__html: json}} />;
+    }, [address]);
+
     if (!apiKey || !address) {
         return null;
     }
@@ -78,7 +93,9 @@ const GoogleMap = (props: GMapProps) => {
             allowFullScreen
             referrerPolicy="no-referrer-when-downgrade"
             src={src}
-        />
+        >
+            {mapMicrodataScript}
+        </iframe>
     );
 };
 

src/components/Map/YMap/YandexMap.tsx

@@ -6,7 +6,7 @@ import debounce from 'lodash/debounce';
 import {LocaleContext} from '../../../context/localeContext/localeContext';
 import {MapsContext} from '../../../context/mapsContext/mapsContext';
 import {MobileContext} from '../../../context/mobileContext';
-import {YMapMarkerLabelPrivate, YMapMarkerPrivate, YMapProps} from '../../../models';
+import {YMapMarker, YMapMarkerLabelPrivate, YMapMarkerPrivate, YMapProps} from '../../../models';
 import {block} from '../../../utils';
 import ErrorWrapper from '../../ErrorWrapper/ErrorWrapper';
 import {getMapHeight} from '../helpers';
@@ -28,6 +28,27 @@ const BALLOON_DISABLING_MARKER_OPTIONS: YMapMarkerLabelPrivate = {
     interactivityModel: 'default#silent',
 };
 
+// Helper function to convert YMapMarker to Schema.org Place object
+const markerToSchemaPlace = (marker: YMapMarker) => {
+    return {
+        '@type': 'Place',
+        address: marker.address
+            ? {
+                  '@type': 'Text',
+                  '@value': marker.address,
+              }
+            : undefined,
+        geo:
+            marker.coordinate && marker.coordinate.length === 2
+                ? {
+                      '@type': 'GeoCoordinates',
+                      latitude: marker.coordinate[0],
+                      longitude: marker.coordinate[1],
+                  }
+                : undefined,
+    };
+};
+
 const YandexMap = (props: YMapProps) => {
     const {
         markers,
@@ -140,6 +161,27 @@ const YandexMap = (props: YMapProps) => {
         }
     }, [ymap, markers, zoom, disableBalloons, areaMargin]);
 
+    const mapMicrodataScript = React.useMemo(() => {
+        if (!markers.length) {
+            return null;
+        }
+
+        const places = markers
+            .filter((marker) => marker.address || marker.coordinate)
+            .map(markerToSchemaPlace);
+
+        if (places.length === 0) {
+            return null;
+        }
+
+        const json = JSON.stringify({
+            '@context': 'https://schema.org',
+            '@graph': places,
+        });
+
+        return <script type="application/ld+json" dangerouslySetInnerHTML={{__html: json}} />;
+    }, [markers]);
+
     if (!markers) return null;
 
     return (
@@ -151,6 +193,7 @@ const YandexMap = (props: YMapProps) => {
             className={b('wrapper')}
         >
             <div className={b('wrapper')}>
+                {mapMicrodataScript}
                 {/* hidden - to show the map after calculating the center */}
                 <div
                     id={containerId}