[JoyFreak] Set Open Graph Image

[JoyFreak] Set Open Graph Image

Dnyan

Well-known member
Can you make a code to pick profile picture in case there is no attachment in thread.
 

gib

Active member
Does this work for Article nodes too ?

I have had og:image problems with Article nodes using a mod that works fine on normal discussion nodes
 

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:


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
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:


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 :)
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.
 

JoyFreak

Well-known member
OK, IT WORKED. I officially love you (good that my husband doesn't see this :))
i love you kiss GIF by Just  Dance
 

Abu Ghaith

Well-known member
Thank you very much for this useful and important lesson. It should be in the XenForo script by default, although there have been many inquiries about the matter. I hope The XF Team take this lesson and integrate it with the script.
How about the resources?
 

Pepelepew

Member
Would there be any reason its not working on this page? Its not getting the Christmas image
 

JoyFreak

Well-known member
Would there be any reason its not working on this page? Its not getting the Christmas image
It is working. You can see it in the unfurl link. Where are you trying to share it?
 

JoyFreak

Well-known member
I meant on Facebook sorry
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.
 

Attachments

  • fb.png
    fb.png
    378 KB · Views: 8
  • fb-debug.png
    fb-debug.png
    438.7 KB · Views: 8

PhoenixR

Member
Thanks @JoyFreak !

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:
  1. This has been tested on Xenforo 2.0.
  2. In Xenforo Admin, first make sure that the "Tag length limit" is set to a maximum of 100 under Setup>Options>ContentTagging.
  3. The image URL must be all lowercase, and must be no longer than 100 characters. (tags don't allow uppercase)
  4. The following assumes that no other tags contain "//", nor do they start or end with "/".
  5. Since the OpenGraph image URL is specified in a tag, anyone with permission to edit tags may change it.
  6. Of course, make sure that the image specified by the URL is fully visible by the public.
Replace this:
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 />
With this:
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}) }}" />
with this:
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
Notes:
  1. This has been tested on Xenforo 2.0.
  2. In Xenforo Admin, first make sure that the "Tag length limit" is set to a maximum of 100 under Setup>Options>ContentTagging.
  3. The image URL must be all lowercase, and must be no longer than 100 characters. (tags don't allow uppercase)
  4. The following assumes that no other tags contain "//", nor do they start or end with "/".
  5. Since the OpenGraph image URL is specified in a tag, anyone with permission to edit tags may change it.
  6. Of course, make sure that the image specified by the URL is fully visible by the public.

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:
Top