1

The issue: I had problem with my links social preview on WhatsApp and Telegram. The social preview appears on desktop and other platforms, also the Facebook debugging tool shows complete information, but it didn't show anything on WhatsApp and Telegram on phone. I did research and tested different stuff and finally found out that WhatsApp and Telegram don't like it when there is a lot of code before them in the <head>. I brought them closer, and it almost worked, but not completely.

Now, it doesn't show the thumbnail; and worse, it shows the same tags for all of my pages. For example I share a post's link on WhatsApp, but the og tags outputted belongs to my homepage and it doesn't matter which page or post I share, it shows the same og tags.

Now, I almost know what the problem is, and I am looking to test my next hypothesis to see if it works.

I am thinking of making a custom function like this:

I create a function inside functions.php and include all the og tags in it. Then, put a single line of code "for example", <?(get_og_tags);?> inside the <head>. Exactly after the opening tag hoping it would work.

My first question:

1- is it a good decision though?
2- If it is, can you help me with the function that does this?

I am looking to resolve this issue and I have no insist by solving it with function. Using a function is just what came to my mind. I'll appreciate if you can help me with whatever solution you know that work.

Improve this question
3
  • Are the og: tags currently generated by another plugin?
    – Celso Bessa
    Commented Jan 9, 2021 at 14:46
  • Yes they are. I am using Yoast SEO plugin but the problem is that it inserts the og tags before the closing <head> tag. Which results in not returning any social review for whatsapp and telegram. Also, The tags are shown in the page source but I don't see anything in the header.php.
    – joseph
    Commented Jan 9, 2021 at 14:53
  • 1
    Then, check @Q Studio response, but you might want to adapt it and modify Yoast own functions, which are hooked using add_action( 'wp_head', [ $this, 'call_wpseo_head' ], 1 );and add_action( 'wpseo_head', [ $this, 'present_head' ], -9999 );. I won't go deeper on because third party-plugins are off-topic here, but the idea is basically what Q_Studio answered, just adapting for different contexts.
    – Celso Bessa
    Commented Jan 9, 2021 at 14:58

1 Answer 1

Reset to default
1

This is an example how to add some OG tags for Facebook:

Create a hook to a function on the wp_head action,

// if on a single post screen, generate and insert facebook:OG tags. ##
add_action( 'wp_head', 'wpse381199_og_tags', 12 );

Then create a function to generate the OG tags

    function wpse381199_og_tags(){
        
        // get the current post object ##
        $the_post   = get_post();

        // bulk if no post 
        if ( ! $the_post ){ return false; }

        // check we are on a single post or page, if not bulk ##
        if ( 
            ! \is_single()
            && ! \is_page()
        ) { 
        
            return false; 
        
        }

        // get all the data we need. ##
        $array = [];
        $array['title'] = $the_post->post_title;


        // add all other tag elements you want to array here and add a new tag for each value in the HTML below.

?>
        <meta property="og:title" content="<?php echo ( \esc_html( $array['title'] ) ); ?>" />
<?

    }
Improve this answer
8
  • 1
    @Q Studio. I would just note 1) it might be necessary to use a priority lower than 12 in add_action 2) if the og:tags are being generated by a 3rd party plugin, it might be easier just to reposition its own og tag output function in the wp_head queue (i.e. hooking it earlier);
    – Celso Bessa
    Commented Jan 9, 2021 at 14:52
  • Thanks for your code. Unfortunately it didn't show anything. do you think we can use something like !important to overwrite Yoast codes?
    – joseph
    Commented Jan 9, 2021 at 15:09
  • This is generating HTML, not CSS so !important is not relevant - what issue are you talking about?
    – Q Studio
    Commented Jan 9, 2021 at 15:16
  • I was thinking of overwriting the codes so conflict doesn't happen between Yoast and your code. If applicable though.
    – joseph
    Commented Jan 9, 2021 at 15:47
  • @CelsoBessa - true, this code was quickly adapted from one of our plugins to give an example - in which case the later priority makes sense.
    – Q Studio
    Commented Jan 9, 2021 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.