diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index c97a3fac..6b40c957 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -52,11 +52,13 @@ export const Layer = (props: LayerProps) => {
     useMapEvents({
         popupopen: (e) => {
             const item = Object.entries(leafletRefs).find(r => r[1].popup == e.popup)?.[1].item;
-            if(item?.layer?.name == props.name )
-            window.history.pushState({},"",`/${props.name}/${item.id}`)
+            if(item?.layer?.name == props.name ) {
+                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);
+            }
         },
-
-
     })
 
     useEffect(() => {
@@ -74,7 +76,7 @@ export const Layer = (props: LayerProps) => {
                     filter(item => {
                         return searchPhrase === ''
                             ? item :
-                            item.name.toLowerCase().includes(searchPhrase.toLowerCase())
+                            item.name.toLowerCase().includes(searchPhrase.toLowerCase()) || item.text.toLowerCase().includes(searchPhrase.toLowerCase())
                     }).
                     map((item: Item) => {
                         const tags = getItemTags(item);
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index dc0ae1af..e4f64d1c 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -23,23 +23,7 @@ export interface MapEventListenerProps {
     setItemFormPopup: React.Dispatch<React.SetStateAction<any>>
 }
 
-function MapEventListener(props: MapEventListenerProps) {
-    useMapEvents({
-        click: (e) => {
-            window.history.pushState({}, "", "/");
-            console.log(e.latlng.lat + ',' + e.latlng.lng);
-            if (props.selectNewItemPosition != null) {
-                props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng })
-                props.setSelectNewItemPosition(null)
-            }
-        },
-        resize: () => {
-            console.log("resize");
-        },
 
-    })
-    return null
-}
 // for refreshing map on resize (needs to be implemented)
 const mapDivRef = React.createRef();
 
@@ -51,6 +35,32 @@ function UtopiaMap({
     children }
     : UtopiaMapProps) {
 
+    let meta = document.getElementsByTagName('meta')
+    const [metaTags, setMetaTags] = useState<HTMLCollectionOf<HTMLMetaElement>>(meta);
+
+    function MapEventListener(props: MapEventListenerProps) {
+        useMapEvents({
+            click: (e) => {
+                window.history.pushState({}, "", "/");
+                document.title = document.title.split("-")[0];
+                document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title);
+                document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`);
+
+                meta = metaTags;
+                console.log(e.latlng.lat + ',' + e.latlng.lng);
+                if (props.selectNewItemPosition != null) {
+                    props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng })
+                    props.setSelectNewItemPosition(null)
+                }
+            },
+            resize: () => {
+                console.log("resize");
+            },
+
+        })
+        return null
+    }
+
     const [selectNewItemPosition, setSelectNewItemPosition] = useState<LayerProps | null>(null);
     const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);