Change facebook meta data based on URL / Anchor - php

I've discovered whilst typing my question a small exchange on this at Adding a URL hash into meta data for Facebook and Twitter share cards which suggests that this may not be feasible but as things change over time I thought I'd seek guidance.
The scenario:
I have a URL http://example.com/ which includes appropriate Facebook meta in the header. I'm most interested in:
<meta property="og:image" content="whatever.jpg" />
At a later date I may add some additional info on the page and link to it with an anchor - e.g. http://example.com/#new and may want to display different meta for that anchor, e.g.
<meta property="og:image" content="whatever-another.jpg" />
My question is, is there any way to dynamically change the meta depending on whether the URL shared is the original URL or the URL with an anchor. The page could have multiple anchors.
My site uses Wordpress so I can use things like custom fields, etc if they are a possible manual solution but whatever, the ability to change the meta field based on the URL anchor is the goal.
Appreciated any guidance.

Related

Setting Rel="Canonical" on each wordpress post

Im struggling to get the concept of using rel=canonical with wordpress. Ive done as much research as I could on the topic.
Backgound:
I would like to move 100 existing posts to another (new) domain BUT also keep the posts on the existing (old) domain!
I would like the posts of the new domain to appear in search results eventhough they were originally indexed on the old domain
Webmasters.stackexchange said this should not be a problem providing I use rel="canonical"
I would like to code the rel="canonical" without making use of plugins as I understand it I need to add the code to the header.php section of the old wordpress site.
<?php if ( is_singular() ) echo '<link rel="canonical" href="' . get_permalink() . '" />'; ?>
Numerous sources all point towards the above code having to be added to header.php in wordpress
My Question
Will the above code provide a rel="canonical" to all existing pages and new pages in the future?
Where in the above code do I specify which site I would like to credit with the posts (the new site)?
Sources
https://support.google.com/webmasters/answer/139066?hl=en
https://thomas.vanhoutte.be/miniblog/add-a-canonical-tag-to-wordpress-header-php/
rel="canonical" attributes credit of current page content to the URL specified in the href. Made that clear, you should be using canonical link tag on the single post pages in your new site. (NOT the old site, unless you plan to take down the old site in future and keep the new site only).
Answer to your first question
Technically that code will render the canonical link tag, but it will be useless in search engine perspective. Because, the function get_permalink() will output URL of the current post, which actually is not expected in your case. The canonical link tag in your new site should be as follows
<link rel="canonical" href="http://www.youroldsite.com/respective-post-slug/"/>
Answer to your second question
In your code value of the "href" attribute should be the target link. (Instead of get_permalink())
I am wondering why you don't want to use a plugin!!! This is like reinventing the wheel. "All in One SEO" and "SEO by Yoast" are from those few good plugins for enhancing SEO of your website.
Content of the posts in your old site is already crawled and indexed by search engines. Thus you should not attribute its credit to new website. I hope this clears your concept and answers your questions.

Facebook sharer should pull images from fetched URL not from canonical URL?

Recently i have noticed that if someone shares my website URL in facebook sharer then it pulls images from canonical URL not from fetched URL that is happening because of i have added -
<meta property="og:url" content="http://www.mywebsite.com"/>
<meta property="og:description" content="description related to page/images">
but it is showing every time my home page's images not of fetched URL
my URL are looking like that-
canonical URL - http://www.mywebsite.com
fetched URL - http://www.mywebsite.com/tags/car
So i'm not getting any idea what do i do so facebook sharer always show my fetched URL's images.
I know this could be same question asked before like these-
Is it possible to extract metadata from fetched url instead of canonical url?
Canonical url being linked on Facebook rather than real URL. Dynamic OpenGraph tags coming up empty
but there is a same solution in both question that is -
I need to setup Intermediate URL redirection, so i just searched about the 301, and 302 redirection, but i'm not getting any idea how/where do i use it?
I need to do this for my wordpress and an other website(which is in zend framework).
Please tell me anything if anyone has did the same.
I will be grateful for Any help.
The problem you are facing is, that you are sending your home url as a canonical url of the shared url. This is wrong as a canonical url has to point to a resource with the same content as the fetched url. For a definition of what canonical urls are check RFC6596 or a good description from Google.
Pointing to the Index URL of you site, as you do, is not pointing to a canonical (equivalent) URL. By setting that URL you are saying to Facebook "You can go look there, you will find the same content as here. So just take everything from there." But I guess this is not what you intend.
If you still want to point to you index (which imho is abusing the system), then you can try also adding the metadata for an image, which should result in the image you provide to be used to represent the link:
<meta property="og:image" content="http://www.mywebsite.com/path/to/image.jpg" />
The reason, why you shouldn't point to your index as canonical: If a user A wants to share some specific content, user B clicking on the link in facebook won't find the expected content, instead he'll see the index page and doesn't know which content user A wanted to share.
The correct way to use the og:url meta, is to point to a real canonical (equivalent) URL which will show the smae content as the fetched URL. Often such a link is referred to as permalink. If you can't provide such an url just use the fetched url itself or leave it away. Pointing to the index is wrong.
For wordpress there is a plugin, which should do this correctly. And the open graph protocol is documented here.
Facebook uses og:url tag to consolidate the like and share count. Whatever url you will mention in og:url, facebook will share that url and increase the share count for that url. Otherwise, your likes and shares will be distributed among canonical urls.
<meta property="og:url" content="http://www.mywebsite.com"/>
If you set a og:image tag, then facebook sharer will pick that image. But make sure the image is of correct dimensions. Facebook check the dimension as well. I always use 600X315.
Check image sizes here.
<meta property="og:image" content="http://www.mywebsite.com/path/to/image.jpg" />
Once you are done don't forget to clear the cache.
Put your URL here
Fetch new scrape information to see the changes.
Meta tags like keyword, title and descriptions are used by search engines.
og tags are used by facebook.
and canonical urls are by rel="canonical"
For any url, whatever data you want Facebook to fetch, needs to be set in og tags.
And then debug the URL to see the new scrape information to see the changes.

Linkedin sharing urls / not parsing open graph

The Linkedin documentation can be found here
As it says, it needs:
og:title
og:description
og:image
og:url
Here is an example of my wordpress blog source code that for simplicity I use Jetpack plug-in:
<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Starbucks Netherlands Intel" />
<meta property="og:url" content="http://lorentzos.com/starbucks-netherlands-intel/" />
<meta property="og:description" content="Today I had some free time at work. I wanted to play more with Foursquare APIs. So the question: "What is the correlation of the Starbucks Chain in the Netherlands?". Methodology: I found all the p..." />
<meta property="og:site_name" content="Dionysis Lorentzos" />
<meta property="og:image" content="http://lorentzos.com/wp-content/uploads/2013/08/starbucks-intel-nl-238x300.png" />
In Facebook it works great, or you can see the meta data here. However LinkedIn is more stubborn and doesn't really parse the data even the If you're unable to set Open Graph tags within the page that's being shared, LinkedIn will attempt to fetch the content automatically by determining the title, description, thumbnail image, etc.
I know that I don't have the og:image:width tag but Linkedin doesn't even parse title, description or url. Any ideas to debug it?
I checked again my html and found some warnings/errors in metadata. I fixed them and all work good. So the solution if you encounter the same problem:
Check your html again and debug it. Even if the page load well in your browser, the LinkedIn parser is not as powerful in terms of small errors. This tool might help.
My very first suggestion is appending a meaningless query to the URL, so that LinkedIn thinks it's a new link (this doesn't affect anything else) i.e.:
http://example.com/link.php?42 or http://example.com/link.html?refid=LinkedIn
If that doesn't suit your needs, a more drastic measure is in order.
After making sure you don't have any errors in your console and validating your site using:
http://validator.w3.org/...
Add the prefix attribute to every tag (not to html tag), then re-sign in with your LinkedIn account to clear the cache...
prefix="go: http://ogp.me/ns#" i.e.:
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Title of Page" />
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="article" />
<meta prefix="og: http://ogp.me/ns#" property="og:image" content="http://example.com/image.jpg" />
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="http://example.com/" />
I hope one of these three solutions works for someone. Cheers!
If you're sure you've done everything right (using open graph meta tags, no errors on validator.w3.org) and it still is not working, be sure to try it with a different page, it might be a LinkedIn cache thing.
I had a <h1>Project information</h1> on my page, which LinkedIn used as the title for sharing the page, instead of the <title> or <meta property="og:title" [...]/> tag. Even though I did everything right. But when I completely removed this <h1>Project information</h1> from the page source, it kept using 'Project information' as the title even thought it wasn't on the page anymore.
After trying a different page, it worked.
I stumbled about the same problem for our Wordpress site. The problem is created by conflicting OGP and oembed headers in standard wordpress + yoast / jetpack seo plugin.
You need to disabled the oembed headers with this plugin (this has no side effects): https://wordpress.org/plugins/disable-embeds/
After that you can force a fresh link preview by appending a ?1 as some of you guys already pointed out!
I hope that fixes your problem.
I wrote a detailed explanation for the problem here: https://pmig.at/2017/10/26/linkedin-link-preview-for-wordpress/
Linkedin caches the urls so it's very practical to make sure that this is not your problem before starting to debug.
This might tool then might come in handy: https://www.linkedin.com/post-inspector/inspect/
Here you can preview your url and see how it looks like when sharing. It refreshes the caching as well so you can be sure if you have a problem or if it was the caching only.
After a long trial and error I found out that my .htaccess was somehow blocking the Linkedin robot (wordpress site). For those who use the ithemes security plugin for wordpress or another security plugin make sure that LinkedIn is not blocked.
Make sure there is no line like:
RewriteCond %{HTTP_USER_AGENT} ^Link [NC,OR]
The easiest way to check is to use wordpress default htaccess lines.
As mentioned before, make sure you don't retry cached pages in linkedin.
You can try this only once a week!
I had a link to my site and I wanted to customize the image Linkedin displayed. So I added open graph tags which didn't seem to render at all. Until I read this:
The first time that LinkedIn's crawlers visit a webpage when asked to share content via a URL, the data it finds (Open Graph values or our own analysis) will be cached for a period of approximately 7 days.
This means that if you subsequently change the article's description, upload a new image, fix a typo in the title, etc., you will not see the change represented during any subsequent attempts to share the page until the cache has expired and the crawler is forced to revisit the page to retrieve fresh content.
https://developer.linkedin.com/docs/share-on-linkedin
The solution for me was to add a hashbang. I am on an ajax style application which doesn't render the whole page, I think linkedin has a bit of a hissy fit about the text/image not being on the page on initial scrape, adding
%23!
to the end of my encoded url or
#!
to the unencoded url before sending it off to linkedin seemed to do the trick nicely for my share button popup. Not wsure if this is only Ajax/js apps or not but it certainly solved a couple of hours of effort for me.
I guess this is only useful if your application is setup to handle the escape_fragment in the url and render a static page not a dynamic one but I can't test this theory right now
This was happening on one of my client's sites as well. I discovered that the .htaccess file was blocking the site from LinkedIn if the user-agents contained the string "jakarta".
As soon as I remove this filtering, LinkedIn was able to access all of the required the OpenGraph (og) information when the client would post a link.
True, the documentation states that you can have: title, url, description, and image. But in reality, you have two options. Pick one of the two following sets and use it, as you have no other choice...
Set 1 Options
og:title
og:url
og:image
Set 2 Options
og:title
og:url
og:description
That is the reason why og:description is mysteriously missing from preview links. But if you drop image, then your description will finally display.
Try it: Wikipedia has an og description but no og image, while GitHub has both. Share Wikipedia and Share GitHub. Clearly seems like either you get a choice to display description or a choice to display image. I have spent weeks struggling with LinkedIn Support to correct this, but to no avail.

Facebook Open Graph- Dynamic Title

I'm developing a social app that requires some Open Graph actions.
I want the meta data tag for the title to be from my database because the name of my action title depends on the user choice.
Is it possible to get the title meta from database, rather than being hard coded? For instance:
<meta property="og:title" content="<?php echo $someTitle ?>" />
Of course it is possible – but how to you want to know what content to put out when?
When Facebook scrapes your URL, your site’s user is not involved. So that means you have to transfer some info via the query string or something; and that would make them different URLs, so you’ll end up with different OG objects as well.

How to force facebook share button to share the url in a different format?

I use the following share button to my page. Unfortunately my urls that are shared through my page have Greek letters in it "as" below:
http://www.domain.com/gb/news/12/13311/the-name-of-article-written-in-greek.htm
and I guess this causes a problem where the facebook does not show any image or content of the page. It only shows the url.
I found out that if I manually cut the above url to
http://www.domain.com/gb/news/12/13311/
the share works properly and the current page is shown. Everything is great.
So my question is how should I force the facebook share button to share the page after the modification? I know that by using var_dump($url['dirname']); I get the format I want.
According to FB docs, you can specify any URL you wish by populating the SHARE_URL a tag attribute:
<a name="fb_share" type="button" share_url="<?php echo $url['dirname'] ?>"></a>
By the way, what you are referring to is a canonical url, trimming this:
http://www.domain.com/gb/news/12/13311/the-name-of-article-written-in-greek.htm
To this:
http://www.domain.com/gb/news/12/13311/
The beauty of canonical urls is that they will not change, even though you decide to change keywords in the pretty url version. Useful for sitemaps.
You can use the FaceBook OG (open graph) tags to tell facebook what the "real" url is of the page. If you're serious about facebook sharing, you should be using those already. Put these in your
<meta property="og:title" content="Titeel Goes Here"/>
<meta property="og:url" content="URL goes here"/>
Verify what Facebook sees here: https://developers.facebook.com/tools/debug. You can also add a thumbnail image, and admin (so you can better see the likes and who shared).

Categories