I am trying to setup FB Catalogue using the FB pixel. When I try to select my pixel (already installed on the website), the error I get states
To use this pixel, you need to install required microdata tags on your website
On the FB documentation the suggestion is to use the protocols OpenGraph or Schema.org.
Here are the required tags for OpenGraph:
og:title: The title of the item.
og:description: A description of the item.
og:url: The complete URL for the product page.
og:image: A link to the image used on the product page.
product:brand: The brand name of the item.
product:availability: The current availability of the item. You can choose "in stock", "out of stock", "preorder", "available for order" or "discontinued".
product:condition: The current condition of the item. You can choose "new", "refurbished" or "used".
product:price:amount: The current price of the item. The current price of the item. Don't include symbols like "£" in the price.
product:price:currency: The currency for the price. The currency for the price, in ISO format (for example, GBP).
product:retailer_item_id: The retailer's ID for the item.
Example
<header>
...
<!-- Open Graph Metadata -->
<meta property="og:title" content="Facebook T-Shirt">
<meta property="og:description" content="Unisex Facebook T-shirt, Small">
<meta property="og:url" content="https://example.org/facebook">
<meta property="og:image" content="https://example.org/facebook.jpg">
<meta property="product:brand" content="Facebook">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:price:amount" content="9.99">
<meta property="product:price:currency" content="USD">
<meta property="product:retailer_item_id" content="facebook_tshirt_001">
<!-- End Open Graph Metadata -->
...
</header>
What I don't understand is if I have to manually add this information to each and every product I have on the website?
How do I setup this?
Yes you have to include all those necessary metadata tags to each page dynamically or if you have less than 50 pages then you can go with static implementation for each page, But it will be good to insert all these necessary metadata dynamically. OR you can include those into your product catalog feed sheet.
To add the microdata, you can use 2 different communication systems: OpenGraph or Schema.org. You can visit the Facebook for Developers website to learn how to set microdata tags for catalogs. https://developers.facebook.com/docs/marketing-api/product-catalog/update-options#microdata-tags
Related
"Unfurling is the technical term for what happens when you share a link on Twitter, Facebook, LinkedIn or Slack." (From the book: Designing Bots: Creating Conversational Experiences
By Amir Shevat)
What spec does the HTTP response body have to conform to in order to enable unfurling the link on the LinkedIn ?
Unfurling works by the app being able to read the meta tags in the HTML head of your document at the specified URL.
There are a few specs that most of the services you listed will use and/or fallback on, including og (opengraph) and twitter.
Your HTML head needs to contains something like this (for opengraph)
<meta property="og:url" content="your website url" />
<meta property="og:title" content="the title that shows up in the unfurled preview" />
<meta property="og:description" content="the description in the preview" />
<meta property="og:image" content="the url of the image you want to show in the preview" />
Note that if you are building an SPA or something that dynamically loads content based on route parameters, you'll need to do server side rendering or something that can serve the HTML statically, because the unfurl-er will not run the javascript that would add to the DOM.
There is also something called oEmbed that is a standard for sharing meta data with other services. This would be a server that responds with JSON about the links you post. Slack primarily relies on oEmbed but will fall back on og or twitter tags if it isn't available.
So,
I use Advanced Custom Fields on Wordpress to set an featured image that i host on flickr, this way i can query it perfectly in the template i am building.
But this image isn't in the content(text) of the post, so for example Facebook or Twitter or any social media to share posts to don't see this image.
So in posts wherefore i only have one image. Which i show on top of the post as background for the title won't be shown inside the content and therefore social media don't recognize it.
Bullet points:
Wordpress Advanced Custom Fields plugin to add a field to a post where in i paste the url of the picture on flickr.
I can perfectly query the URL and implement it in the template i am building.
But this means that this picture isn't in the post content(text). Therefore social media don't seem to see this picture and don't show a picture if users want to share a article from my website.
I really don't know how to solve this and i hope that somebody has a solution.
English isn't my first language so excuse me in case of any spelling or grammar errors.
I don't really get why you want to host your featured image outside WP or, more specifically, on Flickr... but if you can get its URL via ACF (I guess you're using an URL field) and the issue is Facebook or Twitter doesn't retrieve your image when you share your page, maybe you should implement Open Graph and Twitter Card meta tags.
That's, in your header.php inside <head>:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#youraccount" />
<meta name="twitter:creator" content="#youraccount" />
<meta property="og:title" content="The title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/your-page" />
<meta property="og:image" content="http://www.example.com/your-flickr-image-url" />
<meta property="og:description" content="Content description..." />
I am implementing various meta tags within my site. Many are aimed at social networks such as Facebook and Twitter. To manage these tags easier I have grouped the related tags.
For instance:
<!-- DESCRIPTIONS -->
<meta name="description" content="Page description. No longer than 155 characters." />
<meta itemprop="description" content="This is the page description">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta property="og:description" content="Description Here" />
This will make it much quicker to insert the descriptions for each meta tag.
My question: Is there any reason Open Graph, Schema.org, Twitter Cards, or any other meta tags need to be:
grouped together and/or
be in a specific order?
Of course this assumes the meta tags are in the <head> of my site.
Most documentations don't mention a required or recommended order (Twitter, FB, OG).
According to this source the order matters for the Google+ button. I'm not sure if that is still true.
The order of the tags is not critical. But schema.org markup should be placed on the page itself, not in the head section with meta tags.
I build a new wordpress site and installed the Yoast SEO plugin.
My homepage defined as some of my pages.
When i post the link on facebook i can't see any description/title/image that i want
checked on - https://developers.facebook.com/tools/debug/og/object/
i got:
og:type article
(i think that In order to work should appear : website)
maybe someone knows Where I'm wrong?
Thank you!
Facebook uses OpenGraph, a protocol for which if no default values are defined (and you have no standard HTML <meta> values defined,) you can set certain properties so that your site will appear as you want it when you share it socially.
It should be noted that Opengraph will, by default, attempt to interpret these properties by their corresponding <meta> elements (stuff like <meta name="description" content="describe my site">).
If you don't have these, I suggest you add them, but the OpenGraph properties can be defined explicitly, too. The process for adding properties like this involve the use of the <meta> tag, typically in your header.php.
There are a lot of properties you can define
I think most pertinent to your situation would be:
<meta property="og:image" content="path/to/image">
<meta property="og:title" content="My cool website">
<meta property="og:description" content="Description of site">
These work for sites that use OpenGraph, but it's no substitute for having proper <meta> tags in the <head> of your document.
here's a bit of reading you can do on defining site meta
Hope this helps!
We have a web site www.mywebsite.com that sells widgets which implements Open Graph tags as follows:
<meta property="og:title" content="This is the title of the widget model" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://mywebsite/widget/67734" />
<meta property="og:image" content="http://mywebsite/images/123456.JPG" />
<meta property="og:site_name" content="My Website" />
We have a developer who has been asked to create a Facebook application that also sells widgets. He has asked me to change the og:type value on our website pages from "product" to "widget" so that Facebook application displays a description to the user that includes "widget" instead of "product". My understanding is that the Open Graph Protocol has a defined set of types that can be used:
http://ogp.me/#types
I'm concerned that by using a type not defined in the protocol I will degrade my ranking with Facebook, Google, or any other Open Graph subscriber. Is this correct? Shouldn't the Facebook application have the custom type value and NOT our website?
Step 3 of Facebooks Open Graph Tutorial ( https://developers.facebook.com/docs/opengraph/tutorial/ ) provides instructions for creating a custom type, including your own namespace. However, this documentation is for creating a facebook app and is not written to descriibe how to implement OG tags on your websites pages. After further reading I found facebook specify that OG types must be only those specified in the OG protocol. See Step 2 of http://developers.facebook.com/docs/reference/plugins/like/ which discusses implementing a like button:
"You must select a type from the list of Open Graph types."
In the end, the answer is to only use OG defined types for your web sites pages.