Facebook Open Graph scraping base URL instead of actual URL - facebook-opengraph

My portfolio page has separate Meta tags for each subpage, but I am struggling - facebook is only scraping my main page https://larsejaas.com
As of now, anyone sharing my page will get the same meta image and title+description for any page.
The page is build in Gatsby and hosted with Netlify
I have used https://developers.facebook.com/tools/debug/ to debug the issue but nothing seems to work. On Twitter all subpages are recognized correctly.
If I scrape https://larsejaas.com/grafik I get the following redirect path in the facebook sharing debugger:
Redirect Path
Input URL arrow-right https://larsejaas.com/grafik
301 HTTP Redirect arrow-right https://larsejaas.com/grafik/
og:url Meta Tag arrow-right https://larsejaas.com/
Can anybody help me pin-point the issue here?
This is a snippet of the meta headers from https://larsejaas.com/grafik:
<link rel="alternate" href="https://larsejaas.com/grafik/" hreflang="x-default" data-react-helmet="true">
<link rel="canonical" href="https://larsejaas.com/grafik" data-react-helmet="true">
<link rel="alternate" href="https://larsejaas.com/en/grafik/" hreflang="en" data-react-helmet="true">
<link rel="alternate" href="https://larsejaas.com/grafik/" hreflang="da" data-react-helmet="true">
<meta property="og:url" content="https://larsejaas.com/grafik" data-react-helmet="true">
<meta name="description" content="🎨 Besøg mit portfolio af grafiske illustrationer og animationer som jeg har lavet til brug i web projekter. Vektorgrafik, webanimationer og 3D grafik" data-react-helmet="true">
<meta name="twitter:title" content="Lars Ejaas | Grafisk arbejde med illustrationer og webanimationer" data-react-helmet="true">
<meta name="twitter:description" content="🎨 Besøg mit portfolio af grafiske illustrationer og animationer som jeg har lavet til brug i web projekter. Vektorgrafik, webanimationer og 3D grafik" data-react-helmet="true">
<meta name="twitter:image" content="https://larsejaas.com/SoMe/open_graph_phone.png" data-react-helmet="true">
<meta name="twitter:data1" content="1 min." data-react-helmet="true">
<meta property="og:title" content="Lars Ejaas | Grafisk arbejde med illustrationer og webanimationer" data-react-helmet="true">
<meta property="og:image" content="http://larsejaas.com/SoMe/open_graph_phone.png" data-react-helmet="true">
<meta property="og:image:secure_url" content="https://larsejaas.com/SoMe/open_graph_phone.png" data-react-helmet="true">
<meta property="og:description" content="🎨 Besøg mit portfolio af grafiske illustrationer og animationer som jeg har lavet til brug i web projekter. Vektorgrafik, webanimationer og 3D grafik" data-react-helmet="true">
<meta itemprop="name" content="Lars Ejaas | Grafisk arbejde med illustrationer og webanimationer" data-react-helmet="true">
<meta itemprop="description" content="🎨 Besøg mit portfolio af grafiske illustrationer og animationer som jeg har lavet til brug i web projekter. Vektorgrafik, webanimationer og 3D grafik" data-react-helmet="true">
<meta itemprop="image" content="https://larsejaas.com/SoMe/open_graph_phone.png" data-react-helmet="true">
<meta name="article:published_time" content="2021-02-26T16:46:53.619Z" data-react-helmet="true">
<meta name="article:modified_time" content="2021-02-26T16:46:53.619Z" data-react-helmet="true">

Problem solved.
If anyone stumble upon the same issue on Netlify, you need to enable prerendering under build and deploy settings for the page. This will make all pages discoverable by Facebook.

Related

Facebook doesn't show Open Graph image

When I see like an Facebook post, when you linked like Youtube, Soundcloud etc., you get an picture. But when I do it and I post my website, it doesn’t compute.
But it doesn’t show in Facebook. The picture is 300x300 so what I did wrong?
<meta property="og:image" content="https://www.statospro.se/img/StatosLogoad.jpg" >
For Facebook you can use the og meta properties.
<meta property="og:title" content="YOUR PAGE TITLE">
<meta property="og:type" content="website">
<meta property="og:url" content="https://WWW.YOUR-URL.HERE">
<meta property="og:image" content="https://WWW.YOUR-URL.HERE/AND-THE-PATH-TO-YOUR-IMAGE.JPG">

Remove (Or) Empty Duplicate OpenGraph Induced By Unknown Plugin/Theme

I am trying to use Yoast SEO fully. But my theme or some unknown plugins are introducing another opengraph tag section overwriting Yoast's metadata. How do I eliminate the second duplicate set?
Here is the list of plugins that are currently installed - Akismet Anti-Spam, AP Theme Utility Plugin, Featured Image from URL, Jetpack by WordPress.com, Page Builder by SiteOrigin, Proxy Cache Purge, Random Banners, Social Share WordPress Plugin - AccessPress Social Share (Tester), VaultPress, WP Extended Search, WP Responsive Recent Post Slider,Yoast SEO. The Social Share plugin is to show share buttons underneath each post and I did disable it to yield nothing in change of my metadata.
I have added this code my theme's functions.php file - add_filter( 'jetpack_enable_open_graph', '__return_false' ); which is a strong confirmation that Jetpack's open graph tags are disabled all across the site.
Please see the source of this link - https://www.tnilive.com/?p=5372
Here is Yoast's metadata
<!-- This site is optimized with the Yoast SEO plugin v11.0 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur - Latest Devotional Breaking News In Telugu | నాగ్‌పూర్ ప్రవాసులను పరవశింపజేసిన చాగంటి ప్రవచనం"/>
<link rel="canonical" href="https://www.tnilive.com/2019/04/29/chaganti-pravachanam-on-venkateswara-vaibhavam-in-nagpur-mesmerizes-audience/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur" />
<meta property="og:description" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur">
<meta property="og:url" content="https://www.tnilive.com/2019/04/29/chaganti-pravachanam-on-venkateswara-vaibhavam-in-nagpur-mesmerizes-audience/" />
<meta property="og:site_name" content="Telugu News International - TNILIVE" />
<meta property="article:publisher" content="https://facebook.com/tnilivepage/" />
<meta property="article:tag" content="chaganti pravachanam" />
<meta property="article:tag" content="nagpur andhra association" />
<meta property="article:section" content="Devotional" />
<meta property="article:published_time" content="2019-04-29T15:42:05+00:00" />
<meta property="og:image" content="https://i.imgur.com/yI2Kwob.jpg" />
<meta property="og:image:secure_url" content="https://i.imgur.com/yI2Kwob.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur - Latest Devotional Breaking News In Telugu | నాగ్‌పూర్ ప్రవాసులను పరవశింపజేసిన చాగంటి ప్రవచనం" />
<meta name="twitter:title" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur" />
<meta name="twitter:site" content="#tnilive_editor" />
<meta name="twitter:image" content="https://i0.wp.com/i.imgur.com/1TDYQNc.jpg?ssl=1" />
<meta name="twitter:creator" content="#tnilive_editor" />
Here is another metadata set generated after this section and some other data
<meta property="og:title" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur" />
<meta property="og:description" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur">
<meta property="og:image" content="https://i.imgur.com/1TDYQNc.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur" /> />
<meta name="twitter:description" content="Chaganti Pravachanam On Venkateswara Vaibhavam In Nagpur" />
<meta name="twitter:image" content="https://i.imgur.com/1TDYQNc.jpg" />
If you observe closely, you can see that the og:image of Yoast SEO is different from that of the theme/unknown plugin/jetpack generated one in the second set. This is because Yoast only generates og:image tag when there is an image in the post content. And when there is just plain text even with featured image set, it doesn't put one. More info in this issue here - https://github.com/Yoast/wordpress-seo/issues/12794
Now all I want is to add some sort of a code into my functions.php file to make the second set of metadata go away except for og:image tag. Here is the expected result
<meta property="og:image" content="https://i.imgur.com/1TDYQNc.jpg" />
This way I can make sure that my Yoast SEO's metadata is retained and the og:image tag issue is also fixed.
I spoke to the theme developer and they mention that other than the title tag and description tag, their theme is not generating any opengraph tags as the one in the second set. I highly doubt Jetpack and any ideas are most welcome. Thank you.

wordpress yoast og:url Not included in META

Just started happening.. anyone have any ideas why the OG:URL would be missing from the Yoast meta in the <head>?
foreverphotographystudio.com
<!-- This site is optimized with the Yoast SEO plugin v3.0.7 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="Austin Wedding Photographer | Forever Photography Studio. Fine art Austin Wedding Photography by the best Austin Wedding Photographers"/>
<meta name="robots" content="noodp"/>
<link rel="publisher" href="https://plus.google.com/+Foreverphotographystudio"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Austin Wedding Photographer | Forever Photography Studio" />
<meta property="og:description" content="Austin Wedding Photographer | Forever Photography Studio. Fine art Austin Wedding Photography by the best Austin Wedding Photographers" />
<meta property="og:site_name" content="Forever Photography Studio" />
<meta property="og:image" content="http://www.foreverphotographystudio.com/wp-content/uploads/2015/12/ForeverPhotographyStudioLogo.jpg" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:description" content="Austin Wedding Photographer | Forever Photography Studio. Fine art Austin Wedding Photography by the best Austin Wedding Photographers"/>
<meta name="twitter:title" content="Austin Wedding Photographer | Forever Photography Studio"/>
<meta name="twitter:site" content="#FPS_photo"/>
<meta name="twitter:image" content="http://www.foreverphotographystudio.com/wp-content/uploads/2015/12/ForeverPhotographyStudioLogo.jpg"/>
<meta name="twitter:creator" content="#FPS_photo"/>
<script type='application/ld+json'>{"#context":"http:\/\/schema.org","#type":"WebSite","url":"http:\/\/www.foreverphotographystudio.com\/","name":"Austin Wedding Photographer | Forever Photography Studio","alternateName":"Austin Wedding Photographer","potentialAction":{"#type":"SearchAction","target":"http:\/\/www.foreverphotographystudio.com\/?s={search_term_string}","query-input":"required name=search_term_string"}}</script>
<script type='application/ld+json'>{"#context":"http:\/\/schema.org","#type":"Organization","url":"http:\/\/www.foreverphotographystudio.com\/","sameAs":["https:\/\/www.facebook.com\/ForeverPhotographyStudio","http:\/\/www.instagram.com\/foreverphotographystudio","https:\/\/www.linkedin.com\/company\/forever-photography","https:\/\/plus.google.com\/+Foreverphotographystudio","https:\/\/www.pinterest.com\/FPS_Photography\/","https:\/\/twitter.com\/FPS_photo"],"name":"Forever Photography Studio | Austin Wedding Photographer","logo":"http:\/\/www.foreverphotographystudio.com\/wp-content\/uploads\/2015\/12\/1518191_10151864082616924_1046507677_o.jpg"}</script>
<meta name="yandex-verification" content="68998b2e2c070db0" />
<!-- / Yoast SEO plugin. -->
Updated "Yoast SEO" plugin to the latest version and it should be fixed.
https://wordpress.org/plugins/wordpress-seo/
check your header.php
and add below line to it:
<?php wp_head(); ?>

Facebook sharer showing (almost) always the wrong author

I can't understand why Facebook sharer keeps showing the wrong article's author when sharing articles of my website. (Of course I always use Facebook Debugger before sharing).
Take this article as an example: although it is clearly written by Francesca Aloisio, it keeps showing (when shared) "by Virginia Vigliar".
Facebook Debugger reports:
<meta property="article:publisher" content="https://www.facebook.com/wordsinthebucket" />
<meta property="article:author" content="https://www.facebook.com/francesca.aloisio.397" />
I just can't figure out why.
N.B. I use Wordpress SEO by Yoast.
Why are you having the og values defined twice?
Have a look at below (line 23 to line 47):
<!--Facebook Open Graph-->
<!--FB page title-->
<meta property="og:title" content="Indonesia Makes a Sharp U-turn on Virginity Tests" />
<!--FB description-->
<meta property="og:description" content="Most students in the world may think that in order to get their high school diploma they would have to meet certain requirements: good grades, good attitude towards school, good relationship with teac..."/>
<!--FB url-->
<meta property="og:url" content="http://wordsinthebucket.com/u-turn-indonesia-virginity-tests"/>
<!--FB image-->
<meta property="og:image" content="http://wordsinthebucket.com/wp-content/uploads/2015/02/indonesia-exam.jpg" />
<!--FB type-->
<meta property="og:type" content="article"/>
<!--FB site name-->
<meta property="og:site_name" content="Words in the Bucket"/>
<!-- This site is optimized with the Yoast SEO plugin v2.3.5 - https://yoast.com/wordpress/plugins/seo/ -->
<title>Indonesia Makes a Sharp U-turn on Virginity Tests</title>
<meta name="description" content="Indonesian officials were forced to take a step back on their proposal of introducing virginity tests for high schoolgirls."/>
<link rel="canonical" href="http://wordsinthebucket.com/u-turn-indonesia-virginity-tests" />
<link rel="publisher" href="https://plus.google.com/+WiBTeam/about"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Indonesia Makes a Sharp U-turn on Virginity Tests" />
<meta property="og:description" content="Indonesian officials were forced to take a step back on their proposal of introducing virginity tests for high schoolgirls." />
<meta property="og:url" content="http://wordsinthebucket.com/u-turn-indonesia-virginity-tests" />
<meta property="og:site_name" content="Words in the Bucket" />
Remove either one of them, because this is causing the FB Debugger to show that:
Try adding
<meta name="author" content="[THE_AUTHOR_HERE]">
also plus removing the duplication and then going here: https://developers.facebook.com/tools/debug/og/object/ insert the url and press "fetch new scrape information" and see if that fixes it.
First of all: thank you all for your replies. However in the meanwhile I changed my theme cause I realized that it was an issue related to my previous one: it had a "top post" part at the very beginning of the page and the first post showed in there was seen by the FB sharer as the meta "source".
Regarding the double og values, thank for noticing. My actual theme appearently has its own "SEO". So I just removed it from the header.php file and keep YOAST SEO doing the job.

Facebook social plugins (like/send) are getting wrong Canonical url's from our site

This is a weird problem, never faced before & hope I'll never face it again. Our website worldocricket.com is running on wordpress. Its related to news website so we are using social plugins like facebook's like & twitter's tweet buttons etc..
We created some new pages on our site, they are outside of the wordpress folder but on the same domain & are are connected with wordpress using [wp-load.php]. They all are working fine but when we tried to create facebook like button for one of our new pages; using fb developers tool (like button creator) www.developers.facebook.com/docs/reference/plugins/like/ , it spoiled our lunch.
On adding page url " wwww.worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php " in 'URL to Like' box, it showed like counts in preview, on clicking 'like' & 'send' buttons, it revealed that it is liking/sending the main url of the site ( www.worldocricket.com ) which we don't want to, the url we added (or we want to be shared) was different. I thought that was a temporary problem but even after 24-36 hrs we got the same results.
We added og:title / og:type / og:url / og:image in the header after googling.
<meta property=”og:title” content=”ACC Asia Cup 2012”/>
<meta property="og:url" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php" />
<meta property=”og:site_name” content=”World Of Cricket”/>
<meta property="og:image" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/temptaby/images/asiacup12logo.jpg"/>
But it also proved to be useless. We then used fb debugger ( www.developers.facebook.com/tools/debug ), it showed that it is fetching right url but there is wrong Canonical URL. So we used <link rel="canonical" href="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php"> but the result was same. :/
Our website : http://worldocricket.com
We want like button on http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php
Question is : How to get facebook social plugins (like , share , send) working correctly on our site's respective page?
According to the debugger, when the crawler reaches http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php it's finding multiple og:url tags, I've verified this in curl:
<meta property="og:title" content="ACC Asia Cup 2012"/>
<meta property="og:site_name" content="World Of Cricket"/>
<meta property="og:url" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/accasia312.php" />
<meta property="og:image" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/temptaby/images/asiacup12logo.jpg"/>
<meta itemprop="name" content="ACC Asia Cup 2012">
<meta itemprop="description" content="Best Cricketing event in Asia organized by Asian Cricket Council (ACC).">
<meta itemprop="image" content="http://worldocricket.com/categories/special/tournaments/asia-cup/2012/temptaby/images/asiacup12logo.jpg">
<meta name="generator" content="WordPress 3.3.1" />
<meta property="og:title" content=""/>
<meta property="og:type" content="article"/>
<meta property="og:url" content=""/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content="World Of Cricket"/>
<meta property="fb:admins" content="1789905767"/>
<meta property='og:site_name' content='World Of Cricket' />
<meta property='fb:app_id' content='189072694472072' />
<meta property='og:locale' content='en_US' />
Make sure you're only returning one set of tags and they're valid

Resources