Even with the meta properties, FB is still fetching the wrong image.
Here is my head:
<title>5mm 70L Full Wave LED 5-multi Holiday Lights</title>
<meta name="description" content="5mm 70L Full Wave LED 5-multi Holiday Lights - The LED Warehouse" />
<meta name="keywords" content="5mm,70L,Full,Wave,LED,5-multi,Holiday,Lights" />
<meta name="GOOGLEBOT" content="index,follow" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta property="og:title" content="5mm 70L Full Wave LED 5-multi Holiday Lights" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://testing.environmentalled.com/5mm-70L-Full-Wave-LED-5-multi-Holiday-Lights-p105.html"/>
<meta property="og:image" content="http://www.environmentalled.com/images/products/839.jpg"/>
<meta property="og:site_name" content="The LED Warehouse" />
<meta property="fb:admins" content="100001735835873" />
<link href="/style-led.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/magiczoom.js"></script>
I use these meta properties on other non php pages without any issue.
From the og:url you specified: http://testing.environmentalled.com/5mm-70L-Full-Wave-LED-5-multi-Holiday-Lights-p105.html
From that the linter sees:
Meta Tag: <meta property="og:title" content="5mm 70L Full Wave LED 5-multi Holiday Lights" />
Meta Tag: <meta property="og:type" content="product" />
Meta Tag: <meta property="og:url" content="http://testing.environmentalled.com/5mm-70L-Full-Wave-LED-5-multi-Holiday-Lights-p105.html" />
Meta Tag: <meta property="og:image" content="http://www.environmentalled.com/images/products/839.jpg" />
Meta Tag: <meta property="og:site_name" content="The LED Warehouse" />
Meta Tag: <meta property="fb:admins" content="100001735835873" />
Is this incorrect?
The only thing the linter says is that it cannot find og:description.
Is http://www.environmentalled.com/images/products/839.jpg the correct image you want?
Related
I'm using the following head metatags:
<head>
<title>CJF Works Communications</title>
<meta name=”description” content=”The best choice for your marketing needs” />
<meta property="og:title" content="CJF Works Communications" />
<meta property="og:url" content="https://cjfworks.com" />
<meta property="og:description" content="The best choice for your marketing needs" />
<meta property="og:image” itemprop=“image” content=“https://cjfworks.com/logotype-whatsapp.jpg" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
</head>
I am able to display the site title and description but not the image.
Your image isn't big enough. If you want it to show up on Facebook and Whatsapp it needs to be at least 1200x1200 pixels. See Twitter Card - Image not showing - Webmasters Stack Exchange
I have the following fragment. I'm trying to extend the base fragment "head" with the open graph tags... but the rendered page contains only tags from fragments/head, with the og ones.
How can I add more tags to a fragment?
<head th:include="fragments/head :: head">
<!-- You can use Open Graph tags -->
<meta property="og:url" th:content="${url}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="GUApp" />
<meta property="og:description" th:content="${description}" />
<!--<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />-->
</head>
<head th:fragment="head" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
....
</head>
The easiest option is to pass additional tags as in Flexible layouts documentation demo.
Thanks to fragment expressions, we can specify parameters for
fragments that are not texts, numbers, bean objects… but instead
fragments of markup.
This allows us to create our fragments in a way such that they can be
enriched with markup coming from the calling templates, resulting in a
very flexible template layout mechanism.
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="header :: head(~{::meta})">
<!-- You can use Open Graph tags -->
<meta property="og:url" th:content="${url}"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="GUApp"/>
<meta property="og:description" th:content="${description}"/>
</head>
...
header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(meta)">
<!-- some default styles -->
<link href="base.css" rel="stylesheet" />
<!--/* Per-page placeholder for additional meta tags */-->
<th:block th:replace="${meta}" />
</head>
...
Result html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="base.css" rel="stylesheet" />
<meta property="og:url"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="GUApp"/>
<meta property="og:description"/>
</head>
...
we have this code for each product:
<meta property="og:type" content="product" />
<meta property="og:site_name" content="Lotuscrafts" />
<meta property="og:url" content="http://www.example.com/yogadecke-savasana-100-baumwolle-kba" />
<meta property="og:title" content="Yogadecke "Savasana" 100% Baumwolle (kbA)" />
<meta property="og:description" content=" Vielseitig anwendbar in der Yogapraxis Klassische, handgewebte Yogadecke, ideal als unterstützende Unterlage in der Asana Praxis, im Meditationssitz oder für die Endentspannung. Aus 100% Baumwolle, ökologisch gefertigt Gefertigt..." />
<meta property="og:image" content="http://www.example.com/media/image/d2/6b/12/YBL-BO55f6c92eb882a.jpg" />
<meta property="product:brand" content="Yogi" />
<meta property="product:price" content="29,95" />
<meta property="product:product_link" content="http://www.example.com/yogadecke-savasana-100-baumwolle-kba" />
In the Pinterest docs (https://developers.pinterest.com/docs/rich-pins/products/) I can see that product:price:amount and product:price:currency are required. In the example code it's mentioned this code (og instead of product as written in the docs)
<meta property="og:price:amount" content="98.00" />
<meta property="og:price:currency" content="USD" />
Which one is correct? Does anybody know?
Pinterest no longer supports price variations or ranges unless you are using a feed partner like Shopify.
I got a problem with the internationalization of Open Oraph objects.
When I ask the scraper to scrape my opengraph objects in a specific locale, the object is first scraped in the default locale, i.e. without parameter fb_locale, and afterwards it is scraped in the correct locale, i.e. with fb_locale=[LOCALE]. The return of the scrape contains the result of the first default locale (en_US) scrape and the object is not shown in the correct locale neither in the chronic nor in the feed.
Here are my calls:
Call the scraper
POST https://graph.facebook.com
id http://apps.facebook.com/[APP_NAMESPACE]/?ogObjType=prize&ogObjId=1&ogObjVariant=
scrape true
locale de_DE
Then the first scrape is done by Facebook:
GET [GAME_HOST]?ogObjType=prize&ogObjId=1&ogObjVariant
Returns:
<html><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# [APP_NAMESPACE]: http://ogp.me/ns/fb/[APP_NAMESPACE]#">
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="de_DE" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="fb:app_id" content="[APP_ID" />
<meta property="og:type" content="[APP_NAMESPACE]:prize" />
<meta property="og:url" content="http://apps.facebook.com/[APP_NAMESPACE]/?ogObjType=prize&ogObjId=1&ogObjVariant" />
<meta property="og:title" content="Golden Medal" />
<meta property="og:description" content="A Golden Medal" />
<meta property="og:determiner" content="the" />
<meta property="og:image" content="[IMAGE_en_US_URL]" />
</head><body...</body></html>
Then the second scrape is done by facebook:
GET [GAME_HOST]?ogObjType=prize&ogObjId=1&ogObjVariant&fb_locale=de_DE
Returns:
<html><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# [APP_NAMESPACE]: http://ogp.me/ns/fb/[APP_NAMESPACE]#">
<meta property="og:locale" content="de_DE" />
<meta property="og:locale:alternate" content="de_DE" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="fb:app_id" content="[APP_ID]" />
<meta property="og:type" content="[APP_NAMESPACE]:prize" />
<meta property="og:url" content="http://apps.facebook.com/[APP_NAMESPACE]/?ogObjType=prize&ogObjId=1&ogObjVariant" />
<meta property="og:title" content="Goldmedaille" />
<meta property="og:description" content="Eine Goldmedaille" />
<meta property="og:determiner" content="the" />
<meta property="og:image" content="[IMAGE_de_DE_URL]" />
</head><body>...</body></html>
The scraper returns:
{"url":"http:\/\/apps.facebook.com\/[APP_NAMESPACE]\/?ogObjType=prize&ogObjId=1&ogObjVariant",
"type":"[APP_NAMESPACE]:prize",
"title":"Golden Medal",
"locale":{"locale":"en_us","alternate":["de_de","en_us","fr_fr"]},
"image":[{"url":"[IMAGE_en_US_URL]"}],
"description":"A Golden Medal",
"site_name":"[APP_NAME]",
"determiner":"the",
"updated_time":"2012-08-21T08:58:57+0000",
"id":"[SOME_ID]",
"application":{"id":"[APP_ID]","name":"[APP_NAME]","url":"http:\/\/www.facebook.com\/apps\/application.php?id=[APP_ID]"}}
Do you have any suggestions, why the object is scraped twice and the localized version is not stored?
I'm having a problem getting Facebook to recognize my open graph tags. In looking at the source of the page I see the open graph tags properly but when I go to Facebook's open graph tag debugger, it is not picking up the open graph tags.
Here's what the source looks like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<title>Run When You - Arte House on Joss & Main</title>
<meta name="description" content="With its' vibrant pastel color scheme and and unique design this wall art sign provides the perfect inspirtation for anytime of the day. Comes complete with ..." />
<meta name="keywords" content="Vintage-Inspired Wood Plank Wall Art" />
<meta property="fb:admins" content="32604531" />
<meta property="og:title" content="I love the Run When You in the Arte House event at Joss & Main!" />
<meta property="og:description" content="With its' vibrant pastel color scheme and and unique design this wall art sign provides the perfect inspirtation for anytime of the day. Comes complete with ..." />
<meta property="og:image" content="https://secure.common.josscdn.com/lf/53/hash/15872/5360609/1/Run+When+You.jpg" />
<meta property="og:site_name" content="Joss & Main" />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://www.jossandmain.com/Run-When-You~QVH1296~E627.html" />
Here's what the Facebook's debuger pickes up:
URL: https://www.jossandmain.com/Run-When-You~QVH1296~E627.html
https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Fwww.jossandmain.com%2FRun-When-You%7EQVH1296%7EE627.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<title>Joss & Main</title>
<meta property="fb:admins" content="32604531">
I'm banging my head on the wall - any ideas?
Are you sure the tags are there? Here's what I see in that URL:
Had the same problem changed
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
to just
<!DOCTYPE html>
Source:
http://www.thesoftgrounds.com