Add Open Graph meta tags for Social Media link sharing

[rajivsarna]

Hi
I was reading article here on applying The Open Graph protocol on my website.

I followed the instruction from this url - https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing to share link in whatsapp messages.

None of the information I added in the html code inside function.php of child theme is working for me.

Here is what I did.

1. My opengraph is disabled
   

2. Inside function.php that is located on this path:
   

I added the following code:

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to Pro in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Additional Functions
// =============================================================================

add_action('wp_head', 'head_information', 9999);

function head_information () { ?>
<title>Contact me for any UI UX Design work. Call me at +1(647)228-6351</title>
<meta property="og:image" content="http://rajivsarna.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://rajivsarna.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="Rajiv Sarna's headshot" />
<meta property="og:title" content="Personal website of Rajiv Sarna" />
<meta name="description" content="User Interface Designer, User Experience Designer, Visual Designer, Artist, Painter, Design Thinking, Innovator">
<?php }

3 - Then I uploaded 400 x 300 px image in the root directory of my website. And its called ogp.jpg

When I’m sharing(copy and paste) my home page link on the whatsapp, Its showing my logo image which is different from ogp.jpg that I uploaded and my title description is not updating from the og tags above.

Am I missing anything?

[lely]

Hi @rajivsarna,

What you did above is correct. On which site are you adding this code? I have checked the site attached to your license and Child theme is not active. If that is the site you have added the code, it will not work as intended until the child theme is active. In case you are adding this on other site, please make sure you have clear cache in case caching is active. If the issue persists, we need to check the setup directly. Would you mind sharing site URL and credentials inside a secure note? Thanks.

[rajivsarna]

I’m new to WordPress technology so I’m not sure how these activating one theme and deactivating other works.

Here is what I did:

1. I didn’t have function.php file inside the folder structure of my Pro theme. So I installed Child theme to get the function.php file.
2. I have activated the child theme then.
3. Edited function.php with the new code.
4. Went back to dashboard theme area, saw my Pro theme is not active, I activated my Pro Theme, thinking that my site may not work if my parent theme is not active.
5. Doing that my child theme got inactive.

I believe it’s okay to keep your child theme active while you keep working on your parent theme, even though it’s not active?

[Prasant]

Hello Rajiv,

Thanks for updating the thread.

Basically child theme inherits the functions of parent theme. So if a child theme active, features that are there in the parent theme gets automatically trickled down. However, to verify if the issue is causing because of the changes that the done in child theme, we sometimes suggest our customers to activate Parent theme. If the issue is resolved then clearly the problem is causing because of child theme which needs further investigation.

To learn more about how child theme works, please take a look at following resource.

Child Themes | Themeco Docs

In your case, I suggest you to activate Child theme and see how it goes.

Thanks.

[rajivsarna]

Awesome!! Everything is working fine and my graph meta tag is also working with my child theme active. Thanks for all your help.

[thai]

Glad to hear that

[rajivsarna]

One problem… My meta content is not showing on linkedIn. Also its showing Lorem Ipsum. I don’t know where is it coming from. See the attached image please.

Looks perfectly fine on WhatsApp though. See image below.

[jade]

Hello Rajiv,

Linkedin caches the link preview content for 7 days so please try these steps to clear the cache:

Step 1: Visit https://www.linkedin.com/post-inspector/inspect/

Step 2: Enter your url and click on Inspect, You will see the updated preview image

Step 3: Now try sharing your url on LinkedIn

Let us know how it goes.

[rajivsarna]

The problem is on the mobile app of LinkedIn. On the desktop it looks fine.

[friech]

Hi @rajivsarna,

Please clear all your caching features (plugin, server-side, CDN, and browser’s cache), then visit this URL and inspect your site again by the Linkedin inspector.

Also, clear your phones browser’s cache too.

Thanks,

[rajivsarna]

Thank you. It works now but I lost all the tabs (Private and Public) in the safari browser on my phone

[paul.r]

You’re welcome!