[NSFW] How to add og:image tag to head of every page?

  • Resolved boostxd

    (@boostxd)


    2 years, 6 months ago

    Hi,

    Due to issues regarding support of webp images in Yoast SEO plugin, opengraph for those types of images is absent. And as everyone can imagine there’s no link preview image, for example my homepage [ redundant link removed ] doesn’t preview any link image. They don’t seem interested in fixing the issue, I need that every page shows og:image tag if the featured image is available. 

    add_action('wp_head', 'add_link_prev_img');
	function add_link_prev_img () {
		$attachment_id = get_post_thumbnail_id( $post_id ); $image_attributes = wp_get_attachment_image_src( $attachment_id, "full" );
		$fotoo = $image_attributes[0];
		if (!empty($fotoo) && get_post_mime_type( get_post_thumbnail_id()) == 'image/webp') {
		<meta property="og:image" content="<?php echo $fotoo;?>"> 
			}
	}

    The code above creates critical error in the website. It should generate og:image in every page in head section. How can I correctly generate image opengraph for every page that has feature image or something similar?

    • This topic was modified 2 years, 6 months ago by Jan Dembowski. Reason: Added NSFW tag

    The page I need help with: [log in to see the link]

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

  • This is how the code would be syntactically correct:

    add_action('wp_head', 'add_link_prev_img');
function add_link_prev_img () {
    $attachment_id = get_post_thumbnail_id( get_the_ID() );
    $image_attributes = wp_get_attachment_image_src( $attachment_id, "full" );
    if( $image_attributes ) {
        $fotoo = $image_attributes[0];
        if (!empty($fotoo) && get_post_mime_type( get_post_thumbnail_id()) == 'image/webp') {
            ?><meta property="og:image" content="<?php echo $fotoo;?>"><?php
        }
    }
}

    It outputs the feature image of posts in detail view as og:image in the header of the HTML code, if they are deposited as webp image. I guess this is what you want to achieve.

    Thread Starter boostxd

    (@boostxd)

    Many thanks. It works in charm!

    Thread Starter boostxd

    (@boostxd)

    How can I escape the open graph tag? I tried PHP_EOL constant, but I’m unsure where should I put it. I need to escape in the end because in the same line begins inline css tag.

    • This reply was modified 2 years, 6 months ago by boostxd.

    I do not understand the background of the question. With HTML5, the output of the meta tag in this form is enough:

    <meta property="og:image" content="path/to/picture">

    Nothing needs to be closed here. If your template still uses XHTML the notation would be:

    <meta property="og:image" content="path/to/picture" />

    This has nothing to do with PHP itself. I also don’t see the connection to CSS.

    Thread Starter boostxd

    (@boostxd)

    In the source page I see css inline tag after the end of meta tag property (same line), I kinda thought It’d be the cause why Telegram is unable to read image opengraph. But I guess it doesn’t have anything to do with that.

    • This reply was modified 2 years, 6 months ago by boostxd.

    All I see there is an unnecessary and misplaced HTML line break in the form of a <br>. You should remove that. However, the HTML code is otherwise valid, so I see no reason why this should not be read. If the Facebook debugger can do it, all social media platforms should be able to do it: https://developers.facebook.com/tools/debug/

    Thread Starter boostxd

    (@boostxd)

    Alright, I’ll do. Many Thanks!

    • This reply was modified 2 years, 6 months ago by boostxd.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[NSFW] How to add og:image tag to head of every page?’ is closed to new replies.