Lots of sites these days are able to extract the most appropriate thumbnail from a URL. For example, here it finds the picture of a headless Superman:
for example,
from this article.
Suppose that I want to control which thumbnail bots like this fetch for my URL, can I do that with a HTML meta tag or something?
In particular my page that I have in mind does not have a picture that is bigger than all the others.
I'm sure there isn't a solid standard but perhaps there's a decent convention that I can tap in to.
Place this inbetween the <head></head> tags.
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Open Graph Protocol
Related
If I post a link to a website on Facebook, an image is rendered beside it.
How does facebook decide which image to load from my site?
Is it possible to control what image is displayed? Can I set this somewhere, maybe in the meta tags?
Facebook (and other companies after FB proposed this standard) uses the Open Graph Protocol to gather information from your page.
If you provide the relevant meta tags within your <head> tag, e.g.:
og:title - The document's title
og:type - The document's type
og:image - An image URL to represent your document (this is the bit you are interested in)
og:url - The canonical URL the document.
For the image meta tag:
<meta property="og:image" content="https://example.com/pony.jpg" />
It will use the information in these tags to populate the post. Other online and messaging services and will also use this information if present.
If the OGP meta tags are absent, FB (and other services) will crawl the URL and try determine as best as they can which image should be used instead.
For example google's page shows a description:
In their case the text is
Search the world's information, including webpages, images, video's
and more. Google has many special features to help you find exactly
what you're looking ...
I've looked at the source of their page to find how this text is determined but could find nothing. Google also has a nice page explaining how to make descriptions, but never specify where to put the description.
Someone told me the description should be in the robots.txt, but when looking at the specification of robots.txt it only has four keywords:
- user-agent (start of group)
- disallow (only valid as a group-member record)
- allow (only valid as a group-member record)
- sitemap (non-group record)
None of them are description or search tags.
The snippet is often taken from the description meta tag:
<meta name="description" content="Search the world's information, including webpages, images, video's and more." />
which is placed between the page's <head> </head> tags.
What actually shows to the user is completely at the discretion of Google's algorithms - it may decide that another section of text on that page is more relevant to the user's search.
In my websites I put the following inside the <head> tag of your home page (HTML).
<meta name="description" content="Enter your description of your website here!" />
Here is another article by google further explaining this.
When you send a link via text, facebook message, or any mainstream messaging client you'll notice it generates a "rich preview". This is basically an image that pops up of the website you are linking.
I understand how to set this property, for example
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
but I want to know how to use it.
What I'm trying to do is setup a website with a table of links and I want each link to not be just a text link, but a square image. I want those images to be generated based on the links as rich previews just like in messaging clients.
(If it helps I'm trying to pull from google photos albums, so I'm hoping the rich preview will be the album cover and the title will be the name of the album)
Ex: I want to obtain, album title, and cover image from
https://photos.app.goo.gl/5VogRQ6CvoVOJKpq1
I would also like to use the title and description but I'm sure the process is the same.
The big companies like Facebook and Twitter all have their own spiders that periodically crawl the web looking at the DOM of websites. If they see the relevant tags, they'll generate their respective 'preview' automatically.
Literally all you need to do is have the right <meta> tags in your head section. You've demonstrated the OpenGraph protocol in your sample above, which is used by most sites.
The basic tags, according to OpenGraph are:
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.
There's a number of others, though those are the main ones that you need.
Sites often define their own prefixes though. Twitter, for example, additionally uses a custom twitter: prefix to allow for some extended functionality.
Facebook has a debug tool through which you can submit your URL to have them forcibly update their preview, and Twitter has their own card validator which will also forcibly crawl the site.
Simply wait for the site in question to crawl your own website, or submit your site manually through a respective tool, and your preview will be crafted. This preview will apply to anyone who attempts to hotlink to your website, not just you as the person who used the tool.
Hope this helps!
Recently Google has added a new interface when users click the star icon in the address bar to add a website to their bookmarks.
The UI displays the page title as well as anything from the meta description element if present, but I was wondering if there's a way to set the image that's displayed, or whether this is just purely decorative on Chrome's part:
It seems to be some datas included in the head part of the pages.
You probably know that you can use meta tags to set some favicon, gps coordinates, and many other things.
Some new tags, the Opengraph meta tags, are now used to define some informations to best describe the content of the website you're browsing. For example, on facebook, when you share a link, these opengraph datas are used to create a small block which summarize and show a picture of the linked website.
So, to be clear and to speak about code, just try with this line in your head section:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Tried it while writing this post on a little static website I'm working on, seems to work prefect !
It's looks like Google collect all images on the webpage et allow you to choose which one you want for your bookmark.
The Open Graph Protocol is a new methodology for storing metadata to make it easier for third party sites (think the Facebook LIKE button) to identify relevant content on your page.
It looks like this:
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
The question is, if you have multiple LIKE buttons on a page, each for a different article, how does one differentiate the Open Graph meta tags that belong to the article, not the page itself. Since the tags go in the HEAD is seems you only get one set per page.
Can Open Graph be "namespaced" or associated with content within the page, rather than the page itself?
As far as I know, you're stuck - but if you figure out a way, let me know!
I worked on a project that needed to have multiple Open Graph tags on a page - in the end, we ended up trimming down the number of items we needed OG for, so that we'd only have one story on a page.
All I can think of is using <iframe>.
Each article is gonna have its own page, suitable to be placed inside another page.
And then you can display all those articles inside the master page.
If each like button is associated with an item on the same page, then header of each item could link through to a page for just that item. That page could carry all the meta tags for the item and like button would use the url of that page. I did this here
http://cinema-shorts.org/past/
(P.S. this is the first proper website Ive built so if its broken please forgive me)
Each object is represented by a unique URL so, no, multiple objects cannot exist on a single page.
You can have multiple like buttons on one page, but each must be set to point at a different URL by using the href attribute.
You can make each of your object urls do a JavaScript redirect (window.location.href = new_url) to make users who arrive at each of your object pages be redirected to a single user-visible page.