Reddit and Facebook show website previews and previews of the videos when they crosslink to websites and YouTube videos. How do they do this? Is this custom coding on Reddit's side or is there an API/config that website developers can use? I have a custom website with video and I noticed my links come up bare and empty with no previews.
YouTube and other sites include information about a page using 'Open Graph' meta tags in the HTML. Eg. on this YouTube video, you will find these in the source:
<meta property="og:site_name" content="YouTube">
<meta property="og:url" content="https://www.youtube.com/watch?v=W1ilCy6XrmI">
<meta property="og:title" content="WATCH LIVE: ABC News Channel for the latest highlights and
<meta property="og:image" content="https://i.ytimg.com/vi/W1ilCy6XrmI/maxresdefault_live.jpg">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
<meta property="og:description" content="ABC News channel provides around the clock coverage of
<meta property="og:type" content="video.other">
<meta property="og:video:url" content="https://www.youtube.com/embed/W1ilCy6XrmI">
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/W1ilCy6XrmI">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="360">
<meta property="og:video:tag" content="abc">
<meta property="og:video:tag" content="abc news">
<meta property="og:video:tag" content="australia">
<meta property="og:video:tag" content="news channel">
<meta property="og:video:tag" content="livestream">
<meta property="og:video:tag" content="breaking">
<meta property="og:video:tag" content="breaking news">
<meta property="og:video:tag" content="news">
<meta property="og:video:tag" content="rolling">
<meta property="og:video:tag" content="stream">
When a video link is posted on Reddit, they will read the HTML source and gather info such as page title, image preview, video embed URL etc.,
Related
My meta tags for twitter in site:
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="....">
<meta property="twitter:title" content=".....">
<meta property="twitter:description" content="test description">
<meta property="twitter:image" content="....">
I even tried with twitter:image:url and also allowed twitter bot in robot.txt but no luck till now
Use name instead of property in you meta tags Like :
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="....">
<meta name="twitter:title" content=".....">
<meta name="twitter:description" content="test description">
<meta name="twitter:image" content="....">
May I know where did you test if the twitter card is working or not?
Did you check with https://cards-dev.twitter.com/validator?
Also, sometimes the placement of the meta tags do matter, place them early in the head section but after the og (open graph) meta-tags.
Let me know what error you get(if any) on the card validator.
If none of the above works, try changing twitter:image to twitter:image:src and make sure that the image fulfills the size requirements:
smallest size supported
summary: 144x144px
summary_large_image: 300x157px
Largest size supported
In both cases the maximum is 4096x4096px and at most 5MB.
Twitter share url
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="....">
<meta property="twitter:title" content=".....">
<meta property="twitter:description" content="test description">
<meta property="twitter:image" content="....">
Share Url : SHARE
It will work only on https
Twitter's card validator would return No meta tags found for me until I added the Content-Type: text/html header to the server's response.
From what I gather, Twitterbot doesn't even try to parse the page unless the server responds with the Content-Type it expects to see, which is text/html in this case.
For most keywords google search results point to main page of my website (like example.com). But I would prefer google to point to pages with stuff specific for the keyword (i.e. keyword "product1" pointed to example.com/product1.html). Pages for specific products are well optimized for the adequate keywords, but results point to main page.
Is it any way to change that?
UPDATE:
My site is about window blinds. I've got main page that contains a general information (i.e. example.com) and many other pages that contain specific information (i.e. example.com/roller_blimds.html). If someone types "roller blinds" in google search box at this moment in results there is link to main page (example.com), and I would prefer it was a link to file connected to rollers: example.com/roller_blinds.html.
I'm not sure if i got your point correctly, but here's some help.
First of all i would like you to try search for Paraleb on google.
This is my own website, and here's the search result
http://i.stack.imgur.com/obXGL.png
As you can see it has the main domain/directory paraleb.com listed at the top, and below it there are subpages, like About, Clients, Contact us, Work.
What i did here is not that hard, i just used metatags on all pages, but make sure to use different keywords and description for each page.
(ex: in the html code of the contact us/or your product's page, but the meta description, a breif description about your product, its title, and the relevant keywords).
Helpful meta-tags i'm using:
<title>Paraleb | Creative Digital Agency</title>
<meta name="description" content="Creative Digital Agency">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="#paraleb">
<meta name="twitter:title" content="Home">
<meta name="twitter:description" content="Creative Digital Agency">
<meta name="twitter:creator" content="#Paraleb">
<meta name="twitter:image" content="/static/img/social/twitter_360.png">
<meta property="og:title" content="Home" />
<meta property="og:type" content="article" />
<meta property="og:url" content="" />
<meta property="og:image" content="/static/img/social/facebook_og_720.png" />
<meta property="og:description" content="Creative Digital Agency" />
<meta property="og:site_name" content="Paraleb" />
basically what i want to do is the move my pages "Feature Article" from View tab to Browse Tab but i got no idea to do it although i already google for whole Day. what should i do now inorder to move it to Browse Tab?
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="CollaborationServer" content="SharePoint Team Web Site" />
<script type="text/javascript">
the code above is part of my code but i not sure this is helpful or not, or maybe i dont really need to look the code at all
Let me preface with two things. I am currently using grunt for these tasks and I also know about Yeoman which has what I am asking for. I do really like Yeoman however it is just a little too opinionated for this particular project I am working on.
So I have the following HTML file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- START-CSS-MIN:css/build/min.css -->
<link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/boilerplate.css">
<!-- END-CSS-MIN -->
<!-- START-JS-MIN:js/build/modernizr.js -->
<script src="js/libraries/modernizr.js"></script>
<!-- END-JS-MIN -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<!-- START-JS-MIN:js/build/libraries.js -->
<script src="js/libraries/underscore.js"></script>
<script src="js/libraries/jquery/jquery.js"></script>
<!-- END-JS-MIN -->
</body>
</html>
Now you can see the CSS-MIN and JS-MIN comments. Right now I already have a custom grunt build task that properly collects all those files in the comments (using htmlparser) and then minifies and concats them as directly based on the comments. The last step in the build process is to create a new version of that HTML file (for production use) that replaces the comments with the new file. For example, the code above would be turned into this:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body>
</html>
The question I have is how would I be able to do this in NodeJS? The htmlparser NPM module is great for parsing HTML however I now need something where I am modifying the HTML (removing and adding certain elements in specific locations). Is there any good packages/tutorials on how to do this in NodeJS code?
I'm not quite sure if this is helpful for comment lines, but that should be less of an issue to solve than DOM reference.
Consider using: https://github.com/tmpvar/jsdom
There are other options out there as well. (https://github.com/joyent/node/wiki/modules)
You can use cheerio
The following code will produce exactly the output you provided (apart from some minor whitespace differrences)
const $ = require('cheerio').load(inputHtml);
// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
let commentIndex=-1;
return (index, node)=>{
const isComment = node.type === 'comment';
if(isComment)commentIndex++;
return isComment && commentIndexes.includes(commentIndex);
}
}
$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();
//Cheerio respects whitespace provided here
$('head').append(`
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
`)
$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(` <script src="js/build/libraries.js"></script>
`)
console.log($.html())
output:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body></html>
I have a page that Google Chrome insists on thinking is in French.
Here's a snapshot of it:
http://yootles.com/outbox/overcleverchrome.html
Note that I'm including a meta http-equiv tag to tell it that it's in fact in English:
<meta http-equiv="Content-language" content="en">
But it doesn't help.
Is there anything else I can do to prevent this?
Google Chrome currently requires several tags to make an (HTML5) document opt out of translation. Before doing this, you should be sure that you know your audience's language, as otherwise it will prevent foreign sites from properly translating your site.
The relevant tags are:
<meta charset="UTF-8" />
<meta name="google" content="notranslate" />
<meta http-equiv="Content-Language" content="en_US" />
And here is a full example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="google" content="notranslate" />
<meta http-equiv="Content-Language" content="en_US" />
</head>
<body>
Dies ist ein Test Deutsch
</body>
I found a post which might help you: http://www.blogsdna.com/4593/how-to-stop-google-from-translating-your-website-or-webpage.htm
You can either use a meta tag:
<meta name="google" value="notranslate">
Or you can use a class:
<span class="notranslate"></span>
I hope that answered your question.
EDIT: I Just checked my blog which I offer in German and English. On each language version Chrome doesn't ask me for translation: http://kau-boys.de
I checked my source code and the multilanguage plugin only included this code:
<meta http-equiv="Content-Language" content="en_US" />
So maybe your locale needs to have a subregion, like US in this example.
You guys should be referencing http://support.google.com/webmasters/bin/answer.py?hl=en&answer=79812 and not guessing what works
<meta name="google" content="notranslate" />
Adding <meta name="google" value="notranslate"> (not W3C by the way) or <meta name="google" content="notranslate"> doesn't avoid the annoying translate popups.
BUT I have tried the following and it seems to work:
You can avoid translation of the page by adding class="notranslate" to the <body> tag!
I have success with <meta name="google" content="notranslate" />
remember to open the page in a new tab or a new window after insert
<meta name="google" value="notranslate">
otherwise it looks not work, but it actually works well.
On an older version of Chrome (18.x), the Content-Language meta tag seems to have no effect on the translation popup, unless it is lowercased:
<meta http-equiv="content-language" content="en" />
(to be clear --http-equiv="Content-Language" did not work; neither did name="content-language")