I'm using WordPress on my website. To add the AMP pages to my website I use the official WordPress AMP plugin and another plugin called "AMP for WP". I've been using it for 3 months now. Recently, I discovered a Non-AMP page while searching Google from Laptop (Not mobile device). I checked the page source and found that the rel-canonical tag is properly set to the non-AMP page. I don't know why it appeared in the desktop search.
To see the example google this "how to change Author box gravatar size" and you'll find the AMP page and the non-AMP page doesn't appear.
Where is the problem?!
It most likely was designed outside of the Wordpress environment.
We design our AMP pages outside of the Wordpress environment and the canonical tag is just like a normal page.
In short, our amp pages self contained and are desktop & cell phone ready.
Only one canonical tag is needed then. (no use of the rel-canonical tag)
$strCanonicalUrl ="https://" . $_SERVER['HTTP_HOST'] . parse_url(
$_SERVER['REQUEST_URI'], PHP_URL_PATH );
...
<title >This is the title of the AMP page</title>
<meta name="description" content="This is the description of the AMP page">
<link rel="canonical" href="<?= $strCanonicalUrl ?>" />
<meta property="og:locale" content="en_US" />
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.
The fb:pages tag on the url doesn't contain this page's id. The url has
fb:pages tag but they don't have this page's id. Please work with your
developers / webmaster to add this tag to your website.
On a Wordpress site, using a child theme. I copied the header.php file from the parent and uploaded it to the child theme, and placed the following code within the tags in the header.php file:
<meta property="fb:pages" content="#############" />
<meta property="og:type" content="website" />
I have troubleshooted this issue in all the recommended ways, including clearing my browser and Wordpress cache, and still continue to get this error. What am I doing wrong?
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..." />
The homepage link of website posted in share box of facebook fetches a old image of the old story but not the logo of website.
In the header file of my wordpress theme i made the following change
<!--FB image-->
<meta property="og:image" content="<?php if (is_single() || is_page()) {$fbthumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'slider'); echo
$fbthumb[0];} else {echo 'http://clientdemo.crayoninfotech.com/boomnews/wp-content/uploads/2014/10/logofb1.jpg';}?>" />
The problem is still after passing the correct link of logo facebook take some other random image from one of website old story.
When I did this it took a while before it showed up on FB. Use this to see the effect of your code changes: https://developers.facebook.com/tools/debug
I am having some difficulty implementing a solution that I found via my research here (the actual accepted answer is not helpful and has been downvoted to Bolivian).
Problem: Facebook doesn't seem to recognize the OpenGraph meta tags that I have added to my Header.
What I know (or think I know): It is my understanding that by adding some appropriate opengraph meta tags, the content, such as YouTube video, should appear in the body of the "post" on Facebook.
What I have tried so far: Referring to the solution linked above, I have tried to implement this method.
In my examples, I'm embedding this video
https://www.youtube.com/v/BQBjVr1iHH4 in the following page
https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 I
would like Facebook to show the YouTube video whenever anyone shares
my page on Facebook.
Option 1: setting the og:video to https://www.youtube.com/v/YOUTUBECODE
The meta tag will look like
<meta property='og:video' content='https://www.youtube.com/v/BQBjVr1iHH4' />
Further, I have attempted to disable plugins which may conflict with this -- any plugins which appear to add OG meta tags.
On the code side: I have hard-coded the following meta tags in the Header (this will eventually become a PHP function or something, but not until/unless I can make it work on a single post):
<meta property='og:image' content='http://agnarchy.com/wp-content/uploads/2014/11/2014-11-01-22.02.37.jpg' />
<meta property='og:video' content='https://www.youtube.com/v/dt6pPdz5eqg' />
<meta property="og:video:height" content="854" />
<meta property="og:video:width" content="510" />
<meta property="og:type" content="video">
Observed behavior:
All I see is the post's featured image. When I schedule or submit this link to my facebook page, Facebook does not recognize the OpenGraph tags and does not render the embedded video as part of the content of this Facebook post:
Desired behavior:
This is at odds with the suggested method, which if I use the URL provided in that answer, I can see the embedded video player: