How to Add OpenGraph Meta Data to a Non-Traditional WP Page (Shortcode)

#465100
  • Resolved Ciitrus Digital
    Rank Math free

    Hi RankMath team,

    I am the developer of [moved to sensitive data section]. All of my standard WP pages and posts are properly set up with OpenGraph data. When I share on FB, the image, meta titles and descriptions pull like they should.

    However, the website has property listings that are added to the site via shortcode from Showcase IDX. They have proper meta titles and meta descriptions. BUT, when I share them on FB, they do not pull the proper OpenGraph data. How can I get the OpenGraph data to work for these pages that show up via shortcode?

    Here is an example page:https://christinechamplin.com/property-search/listing/realcomp/20221053034/Beverly-Hills-Vlg/31404-Sunset-Drive

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hello,

    Thank you for contacting Rank Math support, and sorry for any inconvenience that might have been caused due to that.

    Rank Math can’t read the contents from the shortcode by default and use it as your meta title or description. This may require you to customize a variable that automatically picks up data from that shortcode.

    To do that, you would need to customize our filter code. Please refer to this KB guide: https://rankmath.com/kb/filters-hooks-api-developer/#add-extra-variables

    Hope that helps. Thank you.

    Are there any additional tutorials you can point me to about this subject? This is something I haven’t done before.

    Another person was able to get social sharing on Facebook to properly work with RankMath and Showcase IDX shortcode property listing.

    The link to this site: https://www.redwagonteam.com/properties/listing/crmls/PF22112310/315-E-Bay-Avenue-Newport-Beach-CA-92661/

    They didn’t mention having to set up an custom parameters?

    Nigel
    Rank Math business

    Hello,

    You can refer to the following guide for more information:

    https://rankmath.com/kb/variables-in-seo-title-description/#num-2-add-code-snippet

    Hope that helps. Please let us know if you have questions.

    Hi RankMath support,

    I still am not understanding how to do this.

    I understand that I need to create a file in the theme called rank-math.php

    Then I need to add this code to create filters:

    /**
    * Action: ‘rank_math/vars/register_extra_replacements’ – Allows adding extra variables.
    */add_action( ‘rank_math/vars/register_extra_replacements’, function(){
    rank_math_register_var_replacement(
    ‘custom_variable_slug’,
    [
    ‘name’ => esc_html__( ‘Custom variable name.’, ‘rank-math’ ),
    ‘description’ => esc_html__( ‘Custom variable description.’, ‘rank-math’ ),
    ‘variable’ => ‘custom_variable_slug’,
    ‘example’ => ‘custom_variable_callback()’,
    ],
    ‘custom_variable_callback()’
    );
    });

    But then I have no idea what to do? How can I use this code to pull the meta title, description, and Open Graph images from the shortcode that creates the page?

    More help is appreciated! Thanks.

    Nigel
    Rank Math business

    Hello,

    I rechecked the page you shared and found there was a second og:description that is not from Rank Math. I am sorry we missed this earlier.

    Please check your theme settings or other plugins for the source of the second og:description, and how to disable it. Once you have disabled the extra description you can retest the page using your preferred method.

    Hope that helps. Please let us know if you have questions.

    Hi Nigel,

    The website with a second og:description –

    Are you referring to christinechamplin.com or redwagonteam.com?

    The site that I need to fix the OG tag for is christinechamplin.com.

    Theoretically, couldn’t I just disable the OG tags in RankMath and use an alternative option that can parse data from the shortcode out of the box?

    Thanks

    Hello,

    We are referring to the christinechamplin.com website.

    If you prefer to use the og:description from the shortcode, you can disable the og:description generated by Rank Math. To do that, please apply this filter code to your website:

    add_filter( "rank_math/opengraph/facebook/og_description", '__return_false');

    Hope that helps.

    Looking forward to helping you with this one.

    Jeremy,

    Thank you for finding this.

    Is there a way to set the filter to only remove the og: description generated by RankMath for the pages on that include /property-search in the URL?

    Hello,

    Yes, it’s possible.

    Please refer to this filter code instead:

    add_filter( "rank_math/opengraph/facebook/og_description", function ($description) {
    	$url = home_url( $_SERVER['REQUEST_URI'] );
    	if(strpos($url,"property-search") !== false)  {
    		return false;
    	}
    
    	return $description;
    });

    Hope that helps and please do not hesitate to let us know if you need our assistance with anything else.

    IT WORKED!!

    Thank you so much! This problem was plaguing me for weeks.

    Anas
    Rank Math business

    Hello,

    We are super happy that your issue is resolved. If you have any other questions in the future, know that we are here to help you.

    If you don’t mind me asking, could you please leave us a review (if you haven’t already) on https://wordpress.org/support/plugin/seo-by-rank-math/reviews/#new-post about your overall experience with Rank Math? We appreciate your time and patience.

    If you do have another question in the future, please feel free to create a new forum topic, and it will be our pleasure to assist you again.

    Thank you.

Viewing 11 replies - 1 through 11 (of 11 total)

The ticket ‘How to Add OpenGraph Meta Data to a Non-Traditional WP Page (Shortcode)’ is closed to new replies.