Question 206906 in PHP Question posted in
Official manual can be found here.

Php – 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

Tags:

3

Answers


  1. 0

    The problem with using JavaScript for this task is that Facebook’s scraper does not execute JavaScript when it scrapes your website to find the Open Graph tags. Therefore, it won’t be able to see any changes made by your JavaScript code.

    You can achieve this by using server-side language like PHP to dynamically change the meta tag content based on the current page.

    <?php 
    // get the current page URL
    $url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    $imgUrl = '';

    // based on the URL, set the image URL
    if (strpos($url, 'about') !== false) {
        $imgUrl = 'http://yourwebsite.com/path/to/about/image.jpg';
    } else if (strpos($url, 'home') !== false) {
        $imgUrl = 'http://yourwebsite.com/path/to/home/image.jpg';
    } else {
        // set a default image if no specific page is detected
        $imgUrl = 'http://yourwebsite.com/path/to/default/image.jpg';
    }
?>

<!DOCTYPE html>
<html>
<head>
    <!-- other tags... -->
    <meta property="og:image" content="<?php echo $imgUrl; ?>">
    <!-- other tags... -->
</head>
<body>
<!-- your body content here... -->
</body>
</html>

    This script gets the current URL and checks if it contains certain strings (in this case ‘about’ and ‘home’). Depending on which string is found, it sets $imgUrl to the URL of the corresponding image. This value is then echoed into the content attribute of the og:image meta tag.

    This way, when Facebook scrapes the page, it sees the correct og:image URL for each specific page.

    Just remember to replace the image URLs with the actual URLs of your images.

    Login or Signup to reply.
  2. 0

    You can definitely do this with PHP, like:

    <meta property="og:image" id="ogImage" content="<?php echo getOGImage(getCurrentURL()); ?>">

    But, in order to make this work, you will need to implement both getOGImage and getCurrentURL. So, this is how getOGImage will look alike:

    function getOGImage($url) {
    //your logic here that determines the image path, don't forget to return the result
}

    and

    function getCurrentURL() {
    if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on')   
         $url = "https://";   
    else  
         $url = "http://";   
    // Append the host(domain name, ip) to the URL.   
    $url.= $_SERVER['HTTP_HOST'];   
    
    // Append the requested resource location to the URL   
    $url.= $_SERVER['REQUEST_URI'];    
      
    return $url;  
}

    This second code was inspired based on https://www.javatpoint.com/how-to-get-current-page-url-in-php

    Don’t do this with Javascript, because Facebook will not pick that up, especially when Javascript is turned off in the user’s browser and, your tag needs to be already loaded for Javascript to perform any changes. You are much better off if you generate your final image path into your meta at server-side, so the HTML parser of our interest will get the correct result right from the start.

    Login or Signup to reply.
  3. 0

    It seems like you’re on the right track with your code. However, to ensure it works correctly, you need to make sure that the ".entry-header-image" element exists on the specific pages you want to share on Facebook. Verify that the element with the class "entry-header-image" is present on the about us page and home page.

    Additionally, check if the "src" attribute of the "ogImageElement" is correctly pointing to the desired image URL. You can use "console.log" to output the "ogImageURL" and verify if it contains the correct image URL.

    If the code still doesn’t work, make sure that the "< script >" block is placed after the < meta > tag in your HTML file. This ensures that the JavaScript code executes after the HTML elements have been loaded.

    Lastly, ensure that the Facebook scraper has access to the image URL by checking for any access restrictions, such as robots.txt or server-side permissions, that might prevent Facebook from accessing the image.

    By addressing these points, you should be able to dynamically set the OG image for different pages based on the main image associated with each page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search