i have in google+ snippet in my website, to sharing my website on google+, my code look like this
<head>
<meta property="og:title" content="title of website" />
<meta property="og:url" content="my website url" />
<meta property="og:image" content="url image" />
<meta property="og:description" content="description of my website" />
</head>
<bod>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone></td>
</body>
i have also included facebook like, which rendering all meta tags (title,image,description). But, in case of google+, thumbnail image is not showing.
Need help !!
What are the dimensions of your image? I standardised my thumbnails at 100x67 as they look right on Facebook, but Google+ wasn't showing them. I found that larger images will work with the same code, so I can only assume Google+ ignores little images for some reason.
from google+ docs: https://developers.google.com/+/web/snippet/
Images that are too small or not square enough are not included in the
+Snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup. Specifically, the height must be at
least 120px, and if the width is less than 100px, then the aspect
ratio must be no greater than 3.0.
However i've been experimenting and this does not seem to be exactly right. Does anyone know the correct algorithm?
Related
From what I know, the browser can only request the assets (JS, CSS) after parsing the HTML. But analyzing the "Performance" tab on Edge's DevTools, the "Send Request" for the w3schools30.css stylesheet happens before the parsing is even started, as we can see indicated by the green arrow and other data in this image.
I'm using a simple example. Here's index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3schools30.css"/>
</head>
<body>
Performance testing
<script src="index.js"></script>
</body>
</html>
And the index.js:
setTimeout(() => {}, 1000)
Am I misunderstanding the timeline or there is a circunstance where this happens?
I think it is related with a feature called "preload scanner" on Chromium browsers. This article says:
A preload scanner's role is speculative, meaning that it examines raw
markup in order to find resources to opportunistically fetch before
the primary HTML parser would otherwise discover them.
I have a page where the <title> tag contains some text (specifically: the department name) that screen readers do not pronounce very well (the department's name is ‘AskHR’ -- it’s the HR department’s helpdesk).
I want to provide screen readers with a more pronounceable version (‘Ask H R’) whilst keeping the more stylised version for visual display. I was thinking of using aria-label to achieve this, but I’m uncertain whether it can be applied to the <title> element in the <head>.
Can anyone confirm whether or not this is valid?
I don't think this is valid.
First not all screen readers are made equal!
What you're trying to do may work in some but not in others. For example VoiceOver reads out "AskHR" as you would expect. (And ignores the aria-label attribute.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title aria-label="xxx">AskHR</title>
</head>
<body>
<button aria-label="close">X</button>
</body>
</html>
I think this is perhaps closer to what you're trying to do but support is limited:
.label {
speak-as: spell-out
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/#counter-style/speak-as
If we inspect the example above in Chrome, you see this for the <button> element:
The aria-label attribute takes over the button content. VoiceOver reads out "close" instead of "x".
However this is what we see for <title>:
Why would an image thumbnail not show up when I share a post on a facebook timeline? It used to work perfectly, now I'm not getting an image. Here is a sample link. (http://noahsdad.com/chris-burke-corky-life-goes-on/)
Thanks.
I'm not seeing any open graph tags on your page there. In order for the image to show up properly, and to be able to curate which image gets posted on Facebook, the og:image tag should be used in the head of the document. Before you do that, you'll want to include the the Open Graph name space in your html declaration.
An example is:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
....
<meta property="og:image" content="http://www.example.com/img/example.jpg" />
....
</head>
where the example url points to the actual image you want to appear.
Once you've got that in place, you can test the link here: http://developers.facebook.com/tools/debug
If you did it correctly, you should see the expected image show up in the debug validation results.
Please pardon my ignorance, I'm a website visual designer, not a programmer (let the flames begin!):
Following Facebook's instructions, I just added the iFrame like button code to a site that I'm working on, and it seems to work, BUT the image which displays on my wall (once the Like is posted) seems to be of a random image (could be anything, from a button to a spacer to whatever!) inside the external site which I'm liking from. How do I control which image appears on a member's FB wall when they hit the like button?
What you need to look into is Open Graph og:meta tags. These tags help Facebook to decide:
what image to display
what text to use as the title
what text to use for the description
and more...
The tags look something like this (taken from the link above):
<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/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
You will have to substitute your values for the values in the example here.
On the Like button documentation where you most likely got your code from, it mentions the open graph protocol and its importance with relation to the like button. Scroll down a bit further and you'll see there is a "step 2" in the process of implementing a Facebook "like" button.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
i have a blog with some images on it. now i want a specific one to appear on pages like google+ or facebook.
when i click on "+1" it shows a facebook-image, but not the image of the actual blog-entry. its the same with facebook :(
do i have to give the image a special tag or so?
name="blog-name" title="blog-name" alt="blog-name" ?
example:
<img src="/TwitterIcon.png" title="Blogname auf Twitter" width="22px" border="0">
works
<img src="/m/home_button.png" title="Blogname" width="50px" border="0">
doesnt work
Forget the tags on the images, use the Open Graph protocol. Let Facebook scrape via Open Graph-friendly meta tags:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<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/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>
This will result in Facebook grabbing http://ia.media-imdb.com/rock.jpg.