Блог

Я пытаюсь включить изображение и описание для ссылок, которыми можно поделиться через WhatsApp из моего приложения.

Я хочу, чтобы каждая ссылка имела описание, заголовок и изображение, соответствующее магазину, который пользователь отправляет или которым он делится.

Я попытался получить доступ к метатегам с помощью JavaScript DOM, но когда я делюсь ссылкой, она, похоже, не загружается.

вот мой код:

index.html: у меня есть этот код над мета-свойствами

 <script >
        
        window.onload=function(){


const image = document.querySelector('.image');
const hover = document.querySelector('.hover');
const modal = document.querySelector('.modal');
const close = document.querySelector('.close');

function show(){
    hover.classList.add('active');
    modal.classList.add('show');
}

function hide(){
    hover.classList.remove('active');
    modal.classList.remove('show');
}

image.addEventListener('click', show);
close.addEventListener('click', hide);
var myParam = location.search.split('shop=')[1]
getDoc(myParam);
console.log(myParam);
var lati;
var long;

async function getDoc(id) {
const snapshot = await db.collection('Shops').doc(id).get();

const shopImage = snapshot.get('ShopProfileImg');
const shopName = snapshot.get('name');
const shoptitle = snapshot.get('name');
const shopLocation = snapshot.get('location');
const shopDesc = snapshot.get('summary');
const shoptiming = snapshot.get('timing');
const shopSpace = snapshot.get('numTables');
const shopLat = snapshot.get('latitude');
const shopLong = snapshot.get('longitude');

lati = parseFloat(shopLat);
long = parseFloat(shopLong);

console.log(long)

document.getElementById('shopName').innerHTML = shopName;
document.getElementById('titleShop').innerHTML = shopName   " | Cameleno";
document.getElementById('shopLoc').innerHTML = shopLocation;
document.getElementById('shopDesc').innerHTML = shopDesc;
document.getElementById('timing').innerHTML = shoptiming;
document.getElementById('space').innerHTML = shopSpace;
document.getElementById("shopImage").src = shopImage;

initMap();

}

// Initialize and add the map
async function initMap() {


    // The location of Uluru
    var uluru = {lat: lati, lng: long};

    var myOptions = {
        zoom: 18,
        center: uluru,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP  
      }

    // The map, centered at Uluru
    var map = new google.maps.Map(
        document.getElementById('map'),myOptions);
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});

  }
document.querySelector("meta[property='og:description']").setAttribute("content", shopDesc);
 
}
    </script>

    <meta property="og:description" content="">
    <meta property="og:title" content="" />
    <meta property="og:image" content="">





  
 

свойство по-прежнему не читается по ссылке WhatsApp.
что я делаю не так и как я могу достичь того, что мне нужно?

Спасибо.