Facebook crawler not able to read my metatags on
http://nitansh.fwd.wf/article/travel/best-all-inclusive-resorts-for-romance/3189783/
but it successfully read the tags for the
http://nitansh.fwd.wf/nurture/
Both are on made using extending same template base.html and by injecting metatags.html into them. you can refer the HTML code by inspecting element.
While http://nitansh.fwd.wf/nurture/ shows the metadata even without having JavaScript enabled, http://nitansh.fwd.wf/article/travel/best-all-inclusive-resorts-for-romance/3189783/ shows only the following head when JavaScript is disabled:
<head>
<script src="//cdn.optimizely.com/js/687271175.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="UTF-8">
</head>
When you make the metadata available without requiring JavaScript, Facebookâs service will probably be able to parse it.
Related
I have applied for Google AdSense for my website gulzari.in. I added the AdSense code between the <head> and </head> tags of .ejs file. After two weeks, I am getting the error "Connect your site to AdSense" even though I added the AdSense code between <head> and </head> tags of .ejs file.
I created the website using node js, express, MongoDB, .ejs, CSS and javascript.
Please help me! Where I am going wrong? Can I add Google Adsense code between the <head> and </head> in the .ejs file (https://ejs.co/) file? If not, what should I do to connect AdSense to my website created using nodejs, express, MongoDB, EJS, CSS and Javascript?
I have a HTML page where I am using javascript to load contents based on query string value..
In javascript, I have some dynamic code to load separate data on the page based on this query string value.
Now my page link looks like
https://example.com?datatype=1
https://example.com?datatype=2
https://example.com?datatype=3
Based on this my page data will vary.
Now I want to Add Facebook and LInked in Sharing on this and want to send custom information to share on facebook and LinkedIn.
As per my R&d, this data can be posted using metatags.
As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.
Can anyone suggest how I can Post URL, title, and description to this linkedIn and facebook.
Thanks in Advance
So, I want to focus in on one thing you have stated here:
As per my R&d, this data can be posted using metatags. As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.
That's actually not the complete story. Even if your webpage is "pure client-side", you still absolutely need to have an HTML framework to hold this, even if it's as minimal as: <html><head><script type="text/javascript" src="...."></head></html>. What you will need to do is to edit the document being served for your client-side application.
You did not mention a language, so, let's just assume you're using ReactJS. The procedure here will be the same for other client-side pages.
After making a react project, I have this file, ./public/index.html, and in it is...
<!doctype html>
<html lang="en">
<head>
<title>Scheduler</title>
<meta charset="utf-8" />
<link id="css-root" href="" rel="stylesheet" type="text/css" />
</head>
...
</html>
All you need to do is to insert the og: tags to your for LinkedIn. Just use the tags as described by the Official LinkedIn Share Documentation. This should look like this...
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Hope this helps!
I have a github webpage. How do I make a page displaying purely a pdf? I.e my cv?
To clarify, I wish the page to be filled only with the pdf - not any headings etc.
Just commit your pdf into your repo and it will be accessible just like any other file.
For instance, my resume is committed to my repo at https://github.com/xiongchiamiov/xiongchiamiov.github.com/blob/master/about/resume.pdf and is available on the web at https://changedmy.name/about/resume.pdf (I have a CNAME set up for changedmy.name).
Rather than redirecting to the PDF, you could embed it using an iframe or something like https://github.com/mozilla/pdf.js.
This way, the PDF will be accessible within the page and you could prevent it from being downloaded without viewing it in the browser.
It's not possible to make the page display "purely" the pdf, as to do that, you would need to alter the response headers, which obviously isn't possible with github pages.
You could have a JS redirect in your index.html that points to a pdf file that's also in your github-pages repo.
Suppose your file structure is like this:-
index.html
- cv(folder)
-----cv.pdf (your cv)
Then your code should look like this.
<html>
<body>
</body>
<script type="text/javascript">
document.location = "robin.github.io/cv/cv.pdf"
</script>
</html>
You can also do this:
<html lang="fr">
<head>
<!-- note the meta tag -->
<meta http-equiv="refresh" content="0; url=http://yourprofile.github.io/cv.pdf" />
<meta charset="utf-8">
<title>Will CV</title>
</head>
<body>
</body>
</html>
See Redirect from an HTML page for more info.
Github is using PDF.js to display PDFs, e.g. https://github.com/mozilla/pdf.js/blob/master/web/compressed.tracemonkey-pldi-09.pdf , you may find iframe with URL you can use to embed your resume (e.g. https://render.githubusercontent.com/view/pdf?commit=b261203018f847c89e05bb4c03c820fad0c90672&enc_url=68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f6d6f7a696c6c612f7064662e6a732f623236313230333031386638343763383965303562623463303363383230666164306339303637322f7765622f636f6d707265737365642e74726163656d6f6e6b65792d706c64692d30392e706466&nwo=mozilla%2Fpdf.js&path=web%2Fcompressed.tracemonkey-pldi-09.pdf&repository_id=1663468#13eff6e4-ecdb-4fe1-85e4-b7a468697e26)
I'm trying to set up a custom page on my Tumblr. I want to serve a JS/JSON file, so I need a completely empty document. however Tumblr seems to be injecting some tags into the page, namely:
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link rel="stylesheet" type="text/css" href="http://assets.tumblr.com/fonts/squareserif/stylesheet.css?v=4">
<script src="http://assets.tumblr.com/assets/scripts/tumblelog.js?_v=c78ef57bd25c48e7f24a984e7ef6ceba"></script>
Is there a way to remove these, so I can serve a JSON or XML file uninterrupted?
No, Tumblr injects tracking and some other tags to all pages on your blog.
When posting a link directly to a Tab on a Facebook Page,
https://www.facebook.com/PAGENAME?sk=app_APPID
Facebook picks up the Page's Open Graph <meta> tags, which means the link post gets associated with the Page's profile picture, name, and a description of "Page • n like this".
I had hoped that Facebook would instead use the og <meta> tags from the app's HTML, allowing link posts to be customized.
What's the best way to provide a direct link to a specific Tab on a Facebook Page with custom content in the link post?
The best way I can see to have this accomplished would be to have a redirector page hosted on a website (www.example.com/fb/redirectorForApp.html) that does a redirect on a javascript timeout. That redirector page has the og tags you want to have specified. The redirect will land the person at the https://www.facebook.com/PAGENAME?sk=app_APPID. What's cool about the javascript redirect is that the redirect is not ran by the linter, so it can pickup the correct og: tags, while also allowing you to have the user go directly to the page tab. Good luck!
Since the content of your Page Tab is located inside an iFrame the Facebook scraper will always see first the meta tags outside the iFrame which are set by Facebook and which describe your Facebook Page. Try the url in the Facebook tool and see at the bottom of the page what the scraper sees for your url. Unfortunately you can not change those Facebook meta tags from within your iFrame. That is why the only way to achieve what you want is to go by a redirect. I have done this before using the following code:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:og="http://ogp.me/ns#">
<head>
<!-- Facebook meta tags -->
<meta property="og:title" content="bla"/>
<meta property="og:url" content="https://yourdomain.com/redirect.html"/>
<meta property="og:image" content="https://yourdomain.com/thumb.png"/>
<meta property="og:site_name" content="bla"/>
<meta property="fb:admins" content="1234"/>
<meta property="og:description" content="bla"/>
<meta property="og:type" content="website"/>
<meta property="og:video" content="https://yourdomain.com/bla.swf?param=bla"/>
<meta property="og:video:width" content="398"/>
<meta property="og:video:height" content="224"/>
<meta property="og:locale" content="de_DE"/>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<!-- Check whether inside facebook -->
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("facebook.com") !== -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("https://www.facebook.com/PAGENAME?sk=app_APPID");
}
</script>
<!-- content here -->
</body>
</html>
I'm a new user so I can't comment on DMCS's answer yet :-)
But I had to do this once, and it was also through a "redirector". However there was no need to set a timeout, simply:
<html>
<head>
<meta ...> <!-- OG tags -->
<script type="text/javascript">
location = 'http://www.facebook.com/PAGENAME?sk=app_APPID';
</script>
</head>
</html>
So no delay.
BTW. if you check the tab URL here, you'll see that it has a redirect path via its og:url tag that redirects from https://www.facebook.com/PAGENAME?sk=app_APPID to https://www.facebook.com/PAGENAME. Maybe you should check if setting the Default Landing Tab to your tab changes anything.
I too have been using the redirect method, but it is insufficient where users have an incentive to share content (for example in voting apps): all too often they copy the page tab URL from their browser and the shared content ends up having the generic page profile information associated with it.
But the good news is there is a solution! It's fairly complex though - especially if you have more than one subpage with different og:tags (such as in a voting competition for example).
How it works?
This solution is to set up ogtags on the page on your server to have a canonical url which redirects to the canvas app page - canvas apps are allowed to specify their own custom ogtags in this fashion. If you then redirect all users to the proper page tab, the canvas page will effectively not be viewable, yet it will allow you to provide custom ogtags for your page tab app.
The steps
Create a canvas page for your app (use the same urls as for the page tab)
Add og:tags to your page just as you would normally
Set the og:url parameter to the canvas app's url (http://apps.facebook.com/yourapp/...etc)
Add code so that when the request is coming from outside of the page tab iframe (in the canvas or directly on your server) you redirect the user to the proper page tab
I was having the same question... so here's what I did:
Redirection Page: A page that will get a parameter & set the tags for your sharing services or at least the OpenGraph tags. Then this page will craft a URL to a second page (Facebook Pagetab) like this:
//{facebook-page.link}/?sk=app_{your-app-id}&app_data=X
To obtain {facebook-page.link} see this example request:
See example: https://graph.facebook.com/200866110154
See documentation: https://developers.facebook.com/docs/reference/php/facebook-api/
Do not do the redirect immediately everytime, will not work. Instead do the redirect on certain conditions. Example:
if (strpos($_SERVER['HTTP_REFERER'], '//www.facebook.com/')) {
drupal_add_js('window.location = "' . $url_final . '"', 'inline');
}
Remember, to craft the URL use the page link attribute obtained from Facebook, not the ID of the page, otherwise you will lose the app_data parameter in the signed request.
Facebook Pagetab: A page called inside an Iframe of a tab of a Facebook page. This page will get the SignedRequest with the app_data and will load specific content that the end user will see.
Remember that app_data can also be an array (or a serialized object):
app_data[var1]=value1&app_data[var2]=value2
Tip: If you are using Drupal you can avoid the final redirect, just overwrite $_GET['q'] to the page need. This way you don't bootstrap Drupal only to do another redirect. You can achieve this using hook_init.
Tip: Save your requests to the Facebook API to speed up future calls. Every request to the graph API takes 300ms at least. Database access is obviously faster.