OG Image Issues

Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
If I go to the Facebook debugger and scrape it correctly shows the artist's profile picture for a profile URL, although it warns the OG image is unspecified.

However, when I make an actual post with a profile URL, it doesn't grab the profile image as the scraper shows, it grabs the small menu logo which gets stretched, cropped, and looks like hell.

I can't figure out where this is controlled and how to fix it. Any ideas?


--

Ken Rich
indiegospel.net

updated by @ken-rich: 10/18/21 11:43:59PM
michael
@michael
3 years ago
7,717 posts
Heres the first result on "og tags" search its got a good title and should provide some background on what you're after:
https://ahrefs.com/blog/open-graph-meta-tags/

The source code of the page needs to have a meta tag in it of the image you want to display. Use the Meta Tag Manager module to add tags or adjust the templates.
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
Thanks,
I know what meta tags are and I know about the meta tag module. However, I can't seem to get it to do what I want.

For example, I created this OG image tag for jrProfile_index.tpl
https://indiegospel.net/profile/image/profile_image/$profile_id/xlarge/

Instead of overriding the issue, I am having it did nothing. What am I doing wrong?


--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
Also, ALL the metadata is unspecified according to the debugger.
However, the OG Image is the only one it messes up when trying to infer from other values.

If ALL the metadata is missing, could it be that I am missing a template or something due to skin mods, or in the way Jamroom handles metatags.

For example, item_detail_meta.tpl exists for DETAIL pages but there does not appear to be a template in the profiles module or in the skins for profile INDEX pages.

Could that be why Facebook can't find any metatags specified for profile index page shares?


--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
I have a fix that satisfies the Facebug debugger but I am afraid of implementing it sitewide until Jamroom checks the code.

In a skin no one else uses, I modified the meta.tpl with an ELSE statement such that if the meta tags are not set another template I created called profile_meta.tpl supplies values for the profile_index.tpl


{if isset($meta)}
{foreach from=$meta key="mname" item="mvalue"}
<meta name="{$mname}" content="{$mvalue}" />
{/foreach}

{else}
{jrCore_include template="profile_meta.tpl"}
{/if}
   

The values (in the new meta template) work for the profile index but I don't know if (due to my simplistic novice else statement) they will be imposed some other place on the network where I don't want them. The values look like this.

{jrCore_module_url module="jrProfile" assign="murl"}
<meta property="og:title" content="{$profile_name}" />
<meta property="og:url" content="{$current_url|replace:"http:":"`$method`:"}" />
<meta property="og:type" content="website" />
{if isset($profile_bio) && strlen($profile_bio) > 0}
<meta property="og:description" content="{$profile_bio|jrCore_strip_html|jrCore_entity_string|truncate:300}" />
{/if}
<meta property="og:image" content="{$jamroom_url}/{$murl}/image/profile_image/{$profile_id}/xlarge" />
<meta property="og:updated_time" content="{$smarty.now}" />



--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
I added another line and am more confident now.

{if isset($selected) && $selected == 'profile_index'}
{/if}

So the alteration to the meta.tpl is now:

{if isset($meta)}
{foreach from=$meta key="mname" item="mvalue"}
<meta name="{$mname}" content="{$mvalue}" />
{/foreach}
{else}
{if isset($selected) && $selected == 'profile_index'}
{jrCore_include template="profile_meta.tpl"}
{/if}
{/if}



--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
Is that OK???


--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
Oops the isset wasn't working. Switched it out with this and BINGO.

{if $current_url == "{$jamroom_url}/{$profile_url}"}


So now my mod to the meta.tpl is actually this else statement:

{if isset($meta)}
{foreach from=$meta key="mname" item="mvalue"}
<meta name="{$mname}" content="{$mvalue}" />
{/foreach}

{else}

{if $current_url == "{$jamroom_url}/{$profile_url}"}
{jrCore_include template="profile_meta.tpl"}

{/if}
{/if}



--

Ken Rich
indiegospel.net
michael
@michael
3 years ago
7,717 posts
Ken Rich:
....For example, item_detail_meta.tpl exists for DETAIL pages but there does not appear to be a template in the profiles module or in the skins for profile INDEX pages.....

Usually an index page is just a list of all the possible detail pages that changes when a new item is added. It would be unexpected to share that page. That's why there's no meta data by default in there.

eg: for audio files you would have a list of 5 or 10 files on the index page what would be the expected og:image tag?
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
It should be the artist's profile picture, their name as the title, and in the description whatever they put in their "about me" section (left column), or in the case of accounts created by power users, there is no "about me" so whatever they put in their Bio (with the profile editor).

Look at the difference before and after with my solution - examples attached.

The only problem I see now is that with some accounts the:
 {$profile_id}
part of my OG image fetch does not resolve and the supplied path becomes invalid. The end result becomes:
<meta property="og:image" content="https://indiegospel.net/profile/image/profile_image//xxlarge">


Of course, the // is where the profile ID should be but for some unknown reason there are profiles that consistently return the correct path and others that fail to fetch the ID, even though they are using the same skin. That is puzzling me. I don't understand why???


--

Ken Rich
indiegospel.net
michael
@michael
3 years ago
7,717 posts
Quote: ....be but for some unknown reason....

{debug} is what you're after

Docs: {debug}
https://www.jamroom.net/the-jamroom-network/documentation/module-developer-guide/1477/debug
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
I don't see why a non-programmer like me has to spend all this time trying to figure out how to solve an issue with Jamroom?
Profile index shares have always looked like hell and it is because there is no metadata set up for them (as you have said).

A person's profile index page should generate metadata like any normal website when shared. This is something one of you brainiacs at Jamroom could probably solve in 5 minutes but I have been living with this egregious situation for years. I have already wasted many manhours trying to solve it, days of work just in this last attempt.

Now you want me to waste more time? Michael, I am never going to be a programmer. I don't have time to learn. I barely even have time to keep up with normal network administration tasks. It was a daunting, gargantuan feat for me to make it this far on the issue and I had to steal time away from other projects.


--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
I tried the debug after watching the video and reading the help file. Yes, I can see where that would be useful - THANKS AND SORRY FOR LOSING MY COOL...

I think I solved my mystery by comparing the code in the item_detail_meta.tpl to my code then verifying with the debugger.

I was missing the _ in front of the profile _id call. So my code for grabbing the the profile image for the OG image now looks like:
<meta property="og:image" content="{$jamroom_url}/{$murl}/image/profile_image/{$_profile_id}/xxlarge" />

I have tested on the profiles that were failing to load the profile image in the debugger and they now load.

Is there a way to control the size of the profile image besides values like xxlarge or xlarge? Depending on the shape of the uploaded image some are being cropped too much at xx large but that value works better than xlarge in most cases. Is there something in between or an alternative?


--

Ken Rich
indiegospel.net
michael
@michael
3 years ago
7,717 posts
Any of these are valid;
Image Sizes:
24       => 24
xxsmall  => 24
40       => 40
xsmall   => 40
56       => 56
72       => 72
small    => 72
96       => 96
icon96   => 96
128      => 128
icon     => 128
196      => 196
medium   => 196
256      => 256
large    => 256
320      => 320
larger   => 320
384      => 384
xlarge   => 384
512      => 512
xxlarge  => 512
800      => 800
xxxlarge => 800
1280     => 1280
original => (actual size)

Then you can add a width=?? height=?? to adjust from the base image to the size you actually want
{jrCore_module_function function="jrImage_display" module='jrProfile' type='profile_image' item_id=$item._profile_id size="icon" crop="auto" class="img_scale" alt=$item.profile_namee width="48px" height="48px" ext=$item.profile_image_extension _v=$item.profile_image_time}

It would not make sense to have a size=1280 then width=48 height=48 because it would only show 48x48 but the 1280 image takes much longer to load and transfer than a smaller image.

Further adjustment can be made if you add a class to it class="some_class" then you can adjust the image via CSS

like this (the name some_class can be anything you like). This is example css:
.some_class{
 width: 48px;
 height: 48px;
 padding: 5px;
 border: 2px solid green;
}

CSS gives you a lot of control, almost too much control, because it can get confusing with all the available options.
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
Thanks, I'll look into optimizing the image size. I also stole code from elsewhere and now have a way to force the OG description to come from the "About Us" section in normal profiles but from the "Bio" section when the profile is created by a power user (since those have no "About Us" only the account tied to them does).

So the code in skins made available to regular profiles is now.

{jrCore_module_url module="jrProfile" assign="murl"}
<meta property="og:title" content="{$profile_name}" />
<meta property="og:url" content="{$current_url|replace:"http:":"`$method`:"}" />
<meta property="og:type" content="website" />	
	
			{capture name="aboutuser" assign="aboutuser_row"}
			    {literal}
			        {if isset($_items)}
			            {foreach $_items as $item}
            			    {$item.user_signup_question_2}
			            {/foreach}
			        {/if}
			    {/literal}
			{/capture}

{jrCore_list module="jrUser" profile_id=$_profile_id template=$aboutuser_row assign="abtuser"}  
   
{if isset($abtuser) && strlen($abtuser) > 0}			    
<meta property="og:description" content="{$abtuser|jrCore_strip_html|jrCore_entity_string|truncate:300}" />	  	
{/if}

<meta property="og:image" content="{$jamroom_url}/{$murl}/image/profile_image/{$_profile_id}/xxlarge" />
<meta property="og:updated_time" content="{$smarty.now}" />

The code in skins made available to profiles created by power users is:

{jrCore_module_url module="jrProfile" assign="murl"}
<meta property="og:title" content="{$profile_name}" />
<meta property="og:url" content="{$current_url|replace:"http:":"`$method`:"}" />
<meta property="og:type" content="website" />

{if isset($profile_bio) && strlen($profile_bio) > 0}
<meta property="og:description" content="{$profile_bio|jrCore_strip_html|jrCore_entity_string|truncate:300}" />
{/if}

<meta property="og:image" content="{$jamroom_url}/{$murl}/image/profile_image/{$_profile_id}/xxlarge" />
<meta property="og:updated_time" content="{$smarty.now}" />

There may be a more "elegant way of doing it but after testing this solution solves all my problems except image cropping.


--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
3 years ago
926 posts
Also, I have noticed that meta tags I generated by the meta tag module are being ignored on Facebook because they use the old convention of meta name which should now be meta property. Someone on staff should update that module accordingly.


--

Ken Rich
indiegospel.net