Custom image meta tag for each post (when posting on social media)

Viewing 9 replies - 1 through 9 (of 9 total)
  • Bill Fitzgerald

    (@wvfitzgerald)

    6 years, 4 months ago

    Hello rebaltica,

    short of writing something custom you could use Advanced Custom Fields plugin to add an separate upload option to the post/pages and then call that image using php in place of the “https://example.lv/image.png” bit in you code above, just check ACF’s doc on how to do that.

    https://wordpress.org/plugins/advanced-custom-fields/

    Hope that helps

    Thread Starter rebaltica

    (@rebaltica)

    6 years, 4 months ago

    Thank you, Bill.

    I was following you through the separate upload option for the image I want to use via ACF, but then got lost by “call that image using php”.

    I’m not familiar with writing my own php codes. Where would that go? single.php and page.php? And how would that look like?

    Thank you,
    rebaltica

    Bill Fitzgerald

    (@wvfitzgerald)

    6 years, 4 months ago

    O.k, let’s get your the rest of the way.

    Make sure that your custom filed group you created is set to show on pages and post and the custom field (for your image) has the “Return Type” set ot image object.

    Add this code to your themes header.php file inside of the <head> tags:
    Change ‘your_image’ to whatever you named your image field
    <?php
    $image = get_field(‘your_image’);
    if( get_field(‘image’) ){
    $url = $image[‘url’];
    echo “OG image cusotm”;
    echo “<meta property=\”og:image\” content=$url>”;
    }
    ?>

    If all went well there should be an image upload option on each page and post and (when and image is added) the image og meta tag should appear in the head withe the proper image, do a view source to double check.

    Bill Fitzgerald

    (@wvfitzgerald)

    6 years, 4 months ago

    BTW: Above I was assuming you are using a child theme, sorry for not making that clear

    Bill Fitzgerald

    (@wvfitzgerald)

    6 years, 4 months ago

    Hello @rebaltica

    Just thought I would check in and see if you got everything working they way your wanted.

    Thread Starter rebaltica

    (@rebaltica)

    6 years, 4 months ago

    No, unfortunately my test site crashed after putting the code in place. I’m thinking that maybe it is clashing with something else in the <head> tag, here’s what’s in there right now:

    <head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="format-detection" content="telephone=no">
	<?php if ( is_singular() && get_option( 'thread_comments' ) ) {wp_enqueue_script( 'comment-reply' ); }?>
	
	<?php wp_head();?>
</head>
    Bill Fitzgerald

    (@wvfitzgerald)

    6 years, 4 months ago

    @rebaltica

    Sometimes when we copy and paste code the quote marks get replaced with “Fancy” quotes and break our code and crash things, that seems to be the case here. After you copy and paste this snippet go through it and replace all of the quote marks (single and double to be safe) manually , now it should work as expected.

    I have cleaned this up a bit because I left in a line that you didn’t need (testing text) so please use this snippet instead , Again change `your_image’ to the name of the image field your created in ACF.

    <?php
if( get_field('your_image') ){
$image = get_field('your_image');	
$url = $image['url'];
echo "<meta property=\"og:image\" content=$url>";
}
?>
    Thread Starter rebaltica

    (@rebaltica)

    6 years, 4 months ago

    Thank you, never would have worked that out!

    The code worked, but at first clashed with my Yoast SEO plugin – I had two og:image entries and social sites like FB read the original one (the featured image) as the correct one. After deactivating that plugin, it finally did what I wanted.

    The results can be seen and tested with this article: https://rebaltica.lv/2018/05/ka-latvija-neker-krievijas-spiegus/

    Bill Fitzgerald

    (@wvfitzgerald)

    6 years, 4 months ago

    Looks good, glad to help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Custom image meta tag for each post (when posting on social media)’ is closed to new replies.