How to get the OG image Dynamically

The project I’m working on is a project for a hotel. There are different images for different pages as a main image.
For Example-
If someone shares the about us page to facebook, the main image in the about us page should be displayed below the link. If someone shares the home page to facebook, the main image in the home page should be displayed below the link. There can only be one link in the og:image because the header.php file is the same file that I’m using to all pages

Is there any way that I can do this using php or js.

Thank you in advance.

<meta property="og:image" id="ogImage" content="">
  <script>
    function setOGImageURL() {
      const ogImageElement = document.querySelector('.entry-header-image');
      if (ogImageElement) {
        const ogImageURL = ogImageElement.getAttribute('src');
        console.log(ogImageElement)
        const ogImageTag = document.getElementById('ogImage');
        ogImageTag.setAttribute('content', ogImageURL);
      }
    }

    window.onload = function() {
      setOGImageURL();
    };
  </script>

I was trying to do from this code. But it didn’t work