![[JoyFreak] Set Open Graph Image](/community/data/resource_icons/8/8121.jpg?1604674342){kind=icon}
[JoyFreak] Set Open Graph Image
- Thread starter JoyFreak
- Start date
JoyFreak
Well-known member
I’ll take a look later today.
dojo
Active member
First of all thank you for taking the time to develop this tweak. It's shocking to see that, while super amazing overall, Xenforo is horrible when it comes to basic SEO. And having the chance to properly share on social media should have been a priority for at least 5 years. Otherwise we keep on complaining that we cannot compete with Facebook, but we can't even share an article / thread properly there or anywhere else.
So ...
I'm trying to debug an article of mine. Here is the link to the facebook debugger:
developers.facebook.com
The article is: https://workfromhomeforums.com/threads/how-to-avoid-burnout-while-working-from-home.21/
Have attached an image inside, it's big enough, but the debugger tells me it's too small.
Thank you in advance for any hints
So ...
I'm trying to debug an article of mine. Here is the link to the facebook debugger:
Sharing Debugger - Meta for Developers
developers.facebook.com
The article is: https://workfromhomeforums.com/threads/how-to-avoid-burnout-while-working-from-home.21/
Have attached an image inside, it's big enough, but the debugger tells me it's too small.
Thank you in advance for any hints
JoyFreak
Well-known member
It could be because you’ve set the attachments so only members can view them. It’s probably trying to read the thumbnail which currently reads less than 200x200. I’d advise having attachment viewable by guests too and trying that out.First of all thank you for taking the time to develop this tweak. It's shocking to see that, while super amazing overall, Xenforo is horrible when it comes to basic SEO. And having the chance to properly share on social media should have been a priority for at least 5 years. Otherwise we keep on complaining that we cannot compete with Facebook, but we can't even share an article / thread properly there or anywhere else.
So ...
I'm trying to debug an article of mine. Here is the link to the facebook debugger:
Sharing Debugger - Meta for Developers
The article is: https://workfromhomeforums.com/threads/how-to-avoid-burnout-while-working-from-home.21/
Have attached an image inside, it's big enough, but the debugger tells me it's too small.
Thank you in advance for any hints
JoyFreak
Well-known member
OK, IT WORKED. I officially love you (good that my husband doesn't see this
Pepelepew
Active member
Would there be any reason its not working on this page? Its not getting the Christmas image
forum.agoraroad.com
December 2020 Music Artists Thread
Hey everyone, here's the December artist's/producer's thread for this month where you can post what you've been working on and give feedback on other people's work. Just post your current projects! Have Fun! :Cokebaka: Producers of any experience level are welcome to post their tracks here...
forum.agoraroad.com
JoyFreak
Well-known member
It is working. You can see it in the unfurl link. Where are you trying to share it?Would there be any reason its not working on this page? Its not getting the Christmas image
December 2020 Music Artists Thread
Hey everyone, here's the December artist's/producer's thread for this month where you can post what you've been working on and give feedback on other people's work. Just post your current projects! Have Fun! :Cokebaka: Producers of any experience level are welcome to post their tracks here...
Pepelepew
Active member
I meant on Facebook sorry
developers.facebook.com
Sharing Debugger - Meta for Developers
developers.facebook.com
Attachments
JoyFreak
Well-known member
The debugger shows the image is working and I even shared it on my personal FB and it seems to work just fine. Could just be a cache issue, it seems like you are viewing it on mobile. Sometimes it takes a while for it load, so come off the app and on and it should work.I meant on Facebook sorry
Sharing Debugger - Meta for Developers
Attachments
JoyFreak
Well-known member
Hi,
I don’t have a licence to be able to look into it. When I have time I can try and see what I can do. Thanks
PhoenixR
Member
Thanks @JoyFreak !
You inspired the following potential change to the
Notes:
With this:
And then replace this:
with this:
EDIT: update to reflect the fact that colons are indeed allowed in tags, and add recommendation to increase tag length to max
You inspired the following potential change to the
thread_view template, which would allow anyone to assign an OpenGraph image URL to a thread, simply by using a tag.Notes:
- This has been tested on Xenforo 2.0.
- In Xenforo Admin, first make sure that the "Tag length limit" is set to a maximum of 100 under Setup>Options>ContentTagging.
- The image URL must be all lowercase, and must be no longer than 100 characters. (tags don't allow uppercase)
- The following assumes that no other tags contain "//", nor do they start or end with "/".
- Since the OpenGraph image URL is specified in a tag, anyone with permission to edit tags may change it.
- Of course, make sure that the image specified by the URL is fully visible by the public.
Code:
<xf:if is="$thread.tags">
<xf:foreach loop="$thread.tags" value="$tag">
<a href="{{ link('tags', $tag) }}" class="tagItem" dir="auto">{$tag.tag}</a>
</xf:foreach>
<xf:else />
Code:
<xf:if is="$thread.tags">
<xf:foreach loop="$thread.tags" value="$tag">
<xf:if is="in_array('',{$tag.tag|split('/')})">
<xf:set var="$thread-og-image" value="{$tag.tag}" />
<a href="{$thread-og-image}" dir="auto"><i>image</i></a>
<xf:else/>
<a href="{{ link('tags', $tag) }}" class="tagItem" dir="auto">{$tag.tag}</a>
</xf:if>
</xf:foreach>
<xf:else />And then replace this:
Code:
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$fpSnippet}"
arg-shareUrl="{{ link('canonical:threads', $thread) }}"
arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
Code:
<xf:if is="$thread-og-image">
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$fpSnippet}"
arg-shareUrl="{{ link('canonical:threads', $thread) }}"
arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}"
arg-imageUrl="{$thread-og-image}" />
<xf:else/>
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$fpSnippet}"
arg-shareUrl="{{ link('canonical:threads', $thread) }}"
arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
</xf:if>EDIT: update to reflect the fact that colons are indeed allowed in tags, and add recommendation to increase tag length to max
Last edited:
PhoenixR
Member
Oh, and two other important notes:
1) By default, the images will be displayed in the compact Twitter "summary" format.
If you want the images to be displayed in the larger "summary_large_image" format, then specify that by replacing the last code section that I included in the previous post with the following:
Code:
<xf:if is="$thread-og-image">
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$fpSnippet}"
arg-shareUrl="{{ link('canonical:threads', $thread) }}"
arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}"
arg-imageUrl="{$thread-og-image}"
arg-twitterCard="summary_large_image" />
<xf:else/>
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$fpSnippet}"
arg-shareUrl="{{ link('canonical:threads', $thread) }}"
arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
</xf:if>2) Make sure that your robots.txt file is not blocking the Facebook or Twitter crawlers from accessing the image specified by the URL.
You can do this by adding something like this to your robots.txt file:
Code:
# Facebook and Twitter bots are whitelisted to allow them to access
# the image URLs that are specified in thread tags.
User-agent: Twitterbot
Allow: /attachments/
User-agent: facebookexternalhit
Allow: /attachments/
Last edited:
