Home Forums Weaver Xtreme Theme Adding OG image tags to the header…

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #67416
    PolyWogg
    Participant

    So I think I did this correctly, but not sure…I have pages with NextGen Gallery on them. When I share the page to Facebook, I get my header as the share image in a small grid next to the description of my site. I thought perhaps I could OVERRIDE that by manually telling the page that the OG;image info should be to a different image AND that I would insert that using the custom field options for the page. It’s a meta property so I :

    A. Created custom field page-head-code.

    B. Set the value to: <meta property=”og:image” content=”https://polywogg.ca/wp-content/gallery/2020-06-june/IMG_2420.jpg” />

    C. Saved and did everything, rescraped the FB page using debugger.

    D. Shared the page. Got the same image I always have (header, not the hard-coded one).

    If I inspect the source code, I find the following, which LOOKS like it worked:

    <!– Weaver Xtreme 4.4.4.1 ( 114 ) Antique Ivory-V-112 –> <!– Weaver Xtreme Theme Support 4.4.1 –> <!– Weaver Xtreme Plus 4.0 –> <meta name=”google-site-verificationcontent=”md5nIFEnggRTNBzAgrPCaI_E_mM0SuOoUpJqlDjj75w” /><meta property=”og:image” content=”https://polywogg.ca/wp-content/gallery/2020-06-june/IMG_2420.jpg” /><style type=”text/css“>#site-title,#site-tagline{display:none;}#nav-header-mini{margin-top:32px!important;}</style>

    So it seems like it did it right, at least to me. Facebook, by contrast, says the page’s OG code is:

    https://polywogg.ca/wp-content/uploads/2020/12/header-7-family-gallery-1024×213.png

    Someone last July seemed to have a similar issue — their main image wasn’t loading, it was loading their Featured Image by default. I’m not sure this is a Weaver issue any more than the person’s problem last summer was, but if I can confirm I’m doing it correctly in Weaver, then I know it’s an OG issue somewhere else.

    photos not sharing properly

    If it helps, the page that doesn’t show the right preview image is:

    2020-06 June

    If it was CSS, I could add some sort of !Important code to it I suppose, but it’s not.

    Paul
    aka PolyWogg

    #67419
    Weaver
    Keymaster

    I really don’t understand exactly what you are asking. I think OG codes have something to to with google or facebook? I don’t know much about them.

    But, if you try to look at the link https://polywogg.ca/wp-content/uploads/2020/12/header-7-family-gallery-1024×213.png, you get a 404 WP page. That generally means that the image does not exist in your media library. If that image existed, then it would display by itself in the browser.

    At this point, all your issues could be the fact the image simply does not exist at that URL.

    #67421
    PolyWogg
    Participant

    Thanks Weaver, yes OG is image codes for FB. The image does exist, I don’t know why it doesn’t load. Fixed that problem, anyway. I have also managed to eliminate a default elsewhere that was overriding my changes.

    So it basically now comes down to if I want to insert a meta property code (i.e. <meta property=”og:image” content=”https://polywogg.ca/wp-content/gallery/2020-06-june/IMG_2420.jpg” />, is custom field “page-head-code” the right way to do it?

    I can use a different method, a plugin called Meta Tag Manager, but if I can do it with just Weaver to insert it, I’d prefer to do it that way.

    Paul

    #67429
    Weaver
    Keymaster

    Using a per-page custom field ‘page-head-code’ should work. That seems to be barely documented anywhere at the moment. I’m amazed you found the reference. A help note shows for the RAW page type, but should show on others as well, I think.

    #67431
    scrambler
    Moderator
    #67434
    PolyWogg
    Participant

    Thanks Scrambler, Weaver, for some reason, putting it in through the page-head-code didn’t seem to work. But I can use the Meta Tag Manager to do it, same code, and it inserts / works fine, so I guess I’ll just use that. Not sure why entering the code through Weaver isn’t picked up.

    And I think it was Scrambler’s guide that I had found. 🙂

    Paul

    #67435
    scrambler
    Moderator

    Did you compare the content and its location in both case?

    #67436
    PolyWogg
    Participant

    Hi Scrambler, I did. Except, I just did another test, and now it works???? I’m wondering if somehow it didn’t read the quotes properly before.

    Meta Tag Manager puts it much higher up in the page source, right after Weaver’s Standard Google Fonts section:

    <!– Meta Tag Manager –>

    <meta property=”og:image” content=”https://polywogg.ca/wp-content/gallery/2020-08-august/IMG_2807.jpg&#8221; />

    <!– / Meta Tag Manager –>

    Weaver puts it in just after all the style sheets are loaded (around line 90):

    <!– Weaver Xtreme 4.4.4.1 ( 114 ) Antique Ivory-V-112 –> <!– Weaver Xtreme Theme Support 4.4.1 –> <!– Weaver Xtreme Plus 4.0 –> <meta name=”google-site-verification” content=”md5nIFEnggRTNBzAgrPCaI_E_mM0SuOoUpJqlDjj75w” /><meta property=”og:image” content=”https://polywogg.ca/wp-content/gallery/2020-08-august/IMG_2807.jpg&#8221; /><style type=”text/css”>#site-title,#site-tagline{display:none;}#nav-header-mini{margin-top:32px!important;}</style>
    <!– End of Weaver Xtreme options –>

    The first three times I tried it, FB read the first one properly, but not the second. It kept overriding it. Now I just went to show you what FB sees in the debugger and it came up properly. WTH?

    WEAVER: https://polywogg.ca/pandafamilygallery/yr2020/2020-08-august-copy/
    META TAG: https://polywogg.ca/pandafamilygallery/yr2020/08-august/

    I’ll try going back to Weaver for the next few and see if it works.

    P.

    #67437
    scrambler
    Moderator

    May be you had a cache issue

    #67438
    PolyWogg
    Participant

    Hmm…that might be. The FB debugger tends to avoid that when you rescrape, but it might have been messing me up for what I saw.  Will let you know if it works for the next few I do.

    P.

    #69769
    paxmvk
    Participant

    I’ve been having the same problem with featured image not showing up on Facebook – only the header. I used the Facebook Business Suite to create the post, and saw the feature image there, but when I actually posted, the image changed to the header. Are you still working on a solution?

    #69770
    hkp
    Participant

    @PollyWogg

    I tried Yoast, but settled for AIOSEO (All in One SEO) as it meets all our needs.

    AIOSEO works 100% with Weaver Xtreme, giving all the Featured Image and Facebook OG & Twitter OG options we need.

    I see from my source pages that social media OG only contains data, and no CSS. I guess they want to format their feeds to match their own brand identities.

    However, with Facebook, different image sizes will change how they handle the feed display appearance.

    I standardized @ 350×350, which gives a thumbnail and excerpt on Facebook. A larger size automatically gives a full image and no excerpt. It depends what you want the Facebook feed to look like.  Less than 350×350 the quality is often not so good.

    Also FYI, Telegram uses the Twitter OG data. It looks as if smaller social media platforms use Facebook & Twitter data feeds rather than seeking their own OG codes.

    Hope this helps.

    Regards,
    Angus

    #69772
    PolyWogg
    Participant

    So in the end, I had to go a bit sideways. I ran into some new problems about 2m ago, with an update to likely the FB algorithm. I am fully authenticated with them, and it should all work, but it wasn’t. Again.

    I have the fixes from before for order running, but I was also using WP to Buffer as a plugin to manage scheduling of my posts so they aren’t all clumped together at night. But here was the weird part:

    a. Direct from WP to FB but done manually would show things properly (FI and excerpt, standardized at 150×150);
    b. Direct from WP to FB but done automatically was inconsistent;
    c. Indirect from WP through Buffer to FB was showing a JS error of some sort and even the Buffer support couldn’t figure out what was off on my site.

    No reason for one way to work and not the other, but it wasn’t showing the OG stuff properly through another channel, only if I went direct.

    Eventually, I installed OG – Better Share on Social Media which does as little as possible, there aren’t even any config options. It basically throws some OG tags in, and lets you style it from there with other tools. Works perfectly, and doesn’t seem to add any overhead.

    I’d rather not have another plugin running on my site, but I could remove some others that were causing bloat, and this one solves the problem completely while the others were only partial solutions. It seems friendly with SEO plugins, if you turn off the insertion of the tags in those plugins and just let your SEO plugin do the rest of its repertoire.

    Paul

    #69777
    Private Reply
    paxmvk
    Participant
    This reply has been marked as private.
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.