Today I came across a <link rel="image_src"> tag. I don't know about it, so I use google. Google tell me that this tag are similar to og:image. So I came to open graph main site to read about it http://ogp.me/, but i found nothing about link rel="image_src". So this tag is replacement to meta property="og:image" or is in special tag in another specification ? How use this tag or for what is used?
The rel attribute specifies the type of the link, i.e. the kind of the relationship between the document and the linked resource. Usually just a few keywords, like stylesheet and icon, are used. Although many other keywords have been proposed and registered, most of them are write-only: they are meant to express something, but nobody cares (no software uses the information).
The extension mechanisms of HTML5 include, in the description of link types, a somewhat obscure mechanism that allows, in theory, anyone register his favorite keyword in the existing rel values wiki to make documents using it as rel value “conforming”.
And image_src has indeed been registered there, with the information that it is used to “specify a Webpage Icon for use by Facebook, Yahoo, Digg, etc.”, no specification has been identified but an article about it is linked to, and it is “probably redundant with rel=icon”.
You can use this tag to use an image as the thumb for link share.
When someone posts a link to your site on social media, such as Facebook, the image that is displayed with your link is usually the first one in your code. This may not be the image that best fits defines your site, and it may not fit well in the small box that Facebook posts. The link rel="image_src" tag lets you control what image (or images, you can have more than one by stacking separate references) is displayed alongside your link.
Related
I've been told that adding a different meta title and description per page is strongly recommended.
What is the correct way to do this? Is there a recommended naming convention for the title? I assume there's a standard for this rather than whatever the developer decides is best.
At first I would recommend to sign in to the Google Webmaster Tools. There you sign in your website and get a lot of information and resources to improve the information structure of your website.
Here you have an article from Google about the topic: Meta tags that Google understands
About the meta name="description" element:
<meta name="description" content="A description of the page" />
This tag provides a short description of the page. In some situations this description is used as a part of the snippet shown in the search results.
About the title element:
<title>The Title of the Page</title>
While technically not a meta tag, this tag is often used together with the "description". The contents of this tag are generally shown as the title in search results (and of course in the user's browser).
Also think about implementing structured data, see schema.org.
I think it is important these days to have a web standards based, clean and semantically rich HTML markup for your whole page.
title
(Note that the title element is not a "meta title".)
HTML5 defines that the title element should identify documents "even when they are used out of context". So for a typical website, you should always include the site name in the title.
For usability reasons, it’s most of the time a good idea to specify the page name before the site name (e.g., page name – site name).
HTML5 doesn’t recommend a delimiter for separating the page name from the title.
meta-description
HTML5 defines that the description metadata name is used to "describe the page". The value must be "appropriate for use in a directory of pages, e.g. in a search engine".
As the homepage typically represents the whole site, it’s appropriate to describe the site (instead of the page) in the homepage’s meta-description.
I started to design my site consistent with HTML5 (semi) standards.
I have a link as:
Print View
My site is PHP driven and this link opens a page which I can not create it with pure css. (additional content exists on print view page). So I must have this link.
I ask for the Proper rel attribute value for print view link
I googled my question but couldn't find any help also I looked to HTML5 Doctor, W3C
regards
This partly depends on what the link really points to, but it seems that it is a version of the current page with some additional information and/or styling for the print media. In that case, the attribute
rel="alternate"
would seem to be adequate. The definition of rel="alternate" is not exact, so it is debatable how much the two documents may differ, when it says “The keyword creates a hyperlink referencing an alternate representation of the current document.”
In practice, the attribute rel="alternate" is mostly ignored. It may, or might, be used by search engines to decide that the linked document need not be visited, as its content is basically the same as that of the current document. If that’s OK, you can use it.
By the way, a link text like “Printable version” might be more descriptive. “Print View” sounds like Print Preview, something that you can do with the tools of the browser
Im working on a site that has had an SEO expert review it. They have advised me that we should apply canonical tags on every other page
<!-- http://www.example.com/detail/table&r=dining-room -->
<link rel="canonical" href="http://www.example.com/detail/table"/>
is it really required that the canonical tag only appears on every other page, or will it play nicely if it appears on the same page?
The reason I ask this is: isn't the link also telling Google that it is infact on the right page?
RFC 6596: The Canonical Link Relation specifies:
The target (canonical) IRI MAY:
o […]
o Be self-referential (context IRI identical to target IRI).
So, yes, you can use rel-canonical even on the canonical page.
It seems to be an argument between Google and Bing. Google doesn't mind if you have the canonical tag pointing to itself. Bing does mind and you lose their trust for the use of canonical tags. Look at this article: http://www.northsideseo.com/google-vs-bing-canonical-tag/
The <link> tag is most commonly used to associate stylesheets with HTML documents, but as many know, it has a myriad of other uses as well. In general it represents some relationship between two documents. Its beauty and curse is that anyone can make their own rel values (relationship types) if they wish so. W3C has listed some possibilities, other people have invented even more, and if I want to there's nothing stopping me from adding a <link rel="unicorns>" to my webpage. It will even validate.
However adding random <link> tags to a webpage only wastes bandwidth. What I want to know which rel values actually provide some functionality. And not just some hypothetical functionality that some future user agent might implement, but actual concrete benefits that my users can feel today.
A few that I already know are:
stylesheet - the most common use, of course. Attaching CSS stylesheets.
canonical - instructs Google (and other search engines) where the "normal" or "canonical" URL of the page is (in case you can view the same page by many URLs);
icon - specifies the favicon which browsers show in the URL bar and next to bookmarks.
home, index, contents, search, glossary, help, first, start, prev, previous, next, last, up, copyright, author - These appear in Opera's navigation bar and (I'm told) in SeaMonkey plugin for Firefox. Additionally, Firefox preloads in background the <link rel="next"> page and Opera navigates there when you press SPACE at the bottom of current page. I believe I might have seen them in Opera Mini as well, but I'm not sure (does anyone know how these affect mobile browsers?)
pingback - used to implement Pingback in blogs.
Are there any other possible <link> tags that actually do something? (Please also include what they do in your answer)
"alternate", at least as a modifier to "stylesheet" does something, in that the stylesheet will initially be in the "disabled" state.
<link rel="prefetch"...> will convince some browsers to preload the page linked to. Used correctly, it can greatly reduce perceived load times along the expected path through your site.
Firefox (for one) uses this today, and Google actually utilizes it. (The first search result, particularly if it's to a common site like Wikipedia, will often include a "prefetch" link to the page found.)
First off I want to say that I wasn't really sure where to post this but it is very much programming related. If it is in the wrong spot I apologize and please let me know where I should post it instead.
When sharing an article on a friends wall, facebook will grab a thumbnail of the article. How do they always get the right thumbnail from articles?
It doesn't grab the logo img element of of http://www.nytimes.com/2010/06/07/world/asia/07convoys.html?hp for example but rather grabs the correct image element that corresponds with the article.
I'm looking to do something similar and was wondering of a good way to parse the html to find the image given this example. Thanks.
Actually, Facebook's way of finding thumbnails isn't so magical. It searches for a set of <meta> and <link> tags which specify which title, description, and image to use.
If it cannot find any of the <meta> and <link> tags it is looking for, it basically asks the user to choose whichever <img> tag fits.
In the case of the NY Times, it uses the following:
<meta name="thumbnail" content="whatever.jpg" />
Facebook recommends you use a <link> tag instead for the thumbnail.
<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" />
Source: Facebok Share/Specifying Meta Tags
They don't always grab the correct image, even though there's certainly some good logic in place.
In many cases, I've seen a list of thumbnails to choose from, meaning Facebook's parser considered them equally relevant.
I would guess they (probably among other things) look at the dom structure and find images close to content that looks "shareable".
UPDATE:
After some empirical testing, it seems that image dimensions play a big role. Images too small and too wide are not considered thumbnails. If your logo is the right size though, expect it to show up as one of the thumbnails. Try sharing something on http://www.e24.se for example.
These are just guesses as I don't have any knowledge of Facebook's internal operations, but if I were parsing thumbnails from a page I would consider several things:
Size of the image, as previously stated
Relevant keywords in the href or alt attributes
Location of the <img> tag on page, the closer to relevant content the better, but may not always work for complicated layouts
Absence of ad-related keywords in the <img> tag or nearby tags (doubleclick comes to mind)
Also, as far as I know the Facebook meta tags are fairly new, so my guess is that the link page scraper is still grabbing images the hard way ;) However if you're running a site and want Facebook to grab the right information when it scrapes your pages I highly suggest implementing them.