diff --git a/package-lock.json b/package-lock.json
index 433f9651..853a2951 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@heroicons/react": "^2.0.17",
         "leaflet": "^1.9.4",
         "prop-types": "^15.8.1",
+        "react-helmet": "^6.1.0",
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",
         "react-router-dom": "^6.16.0",
@@ -24,6 +25,7 @@
         "@types/leaflet": "^1.7.11",
         "@types/react": "^18.0.14",
         "@types/react-dom": "^18.0.5",
+        "@types/react-helmet": "^6.1.6",
         "@types/react-leaflet": "^2.8.2",
         "@typescript-eslint/eslint-plugin": "^5.38.1",
         "@typescript-eslint/parser": "^5.38.1",
@@ -308,6 +310,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-helmet": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.6.tgz",
+      "integrity": "sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-leaflet": {
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
@@ -3776,6 +3787,25 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -3838,6 +3868,14 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-string-replace": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.1.tgz",
diff --git a/package.json b/package.json
index 1290cdce..c517512b 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@types/leaflet": "^1.7.11",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
+    "@types/react-helmet": "^6.1.6",
     "@types/react-leaflet": "^2.8.2",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
@@ -45,6 +46,7 @@
     "@heroicons/react": "^2.0.17",
     "leaflet": "^1.9.4",
     "prop-types": "^15.8.1",
+    "react-helmet": "^6.1.0",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
     "react-router-dom": "^6.16.0",
diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index e4760bae..bf088e55 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -11,10 +11,13 @@ import { useGetItemTags } from './hooks/useTags'
 import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
 import { Popup } from 'leaflet'
 import { useLocation } from 'react-router-dom';
+import {Helmet} from "react-helmet";
 
 export const Layer = (props: LayerProps) => {
 
     const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
+    const [ogTitle, setOgTitle] = useState<string>("");
+    const [ogDescription, setOgDescription] = useState<string>("");
 
     const filterTags = useFilterTags();
 
@@ -45,19 +48,19 @@ export const Layer = (props: LayerProps) => {
             if (item?.layer?.name == props.name && window.location.pathname.split("/")[2] != item.id) {
                 window.history.pushState({}, "", `/${props.name}/${item.id}`)
                 document.title = document.title.split("-")[0] + " - " + item.name;
-                document.querySelector('meta[property="og:title"]')?.setAttribute("content", item.name);
-                document.querySelector('meta[property="og:description"]')?.setAttribute("content", item.text);
             }
         },
     })
 
+
     const openPopup = () => {
         console.log(window.location);
 
 
         if (window.location.pathname.split("/").length <= 2) {
             console.log("close");
-
+            setOgTitle("");
+            setOgDescription("");
             map.closePopup();
         }
         else {
@@ -71,9 +74,8 @@ export const Layer = (props: LayerProps) => {
                             marker.openPopup();
                         });
                         const item = leafletRefs[id]?.item;
-                        document.title = document.title.split("-")[0] + " - " + item.name;
-                        document.querySelector('meta[property="og:title"]')?.setAttribute("content", item.name);
-                        document.querySelector('meta[property="og:description"]')?.setAttribute("content", item.text);
+                        setOgTitle(item.name);
+                        setOgDescription(item.text);
                     }
                 }
             }
@@ -151,6 +153,10 @@ export const Layer = (props: LayerProps) => {
                         <ItemFormPopup position={props.itemFormPopup!.position} layer={props.itemFormPopup!.layer} setItemFormPopup={setItemFormPopup} item={props.itemFormPopup!.item} />
                     </>)
             }
+            <Helmet>
+                <meta property="og:title" content={ogTitle}/>
+                <meta property="og:description" content={ogDescription} />
+            </Helmet>
         </>
     )
 }