I want my website to become eligible for Google+ Direct Connect.
So after googling a bit I found this Google Support page, which has since been edited.
View Google Support page providing these instructions via WayBack Machine:
You can directly link your website by inserting a small snippet of
code on your website and then listing that website as your Google+
page's primary link in the About section of the profile. For example,
if your Google+ page’s primary link is set to www.pagewebsite.com,
you can create a bidrectional link by placing the following code snippet in the <head> tag of the site’s HTML:
<a href="https://plus.google.com/{+PageId}" rel="publisher" />
What gives? An anchor tag within the head?
I thought only title/meta/link tags are allowed in the head.
Is it legal to place that above snippet in the head tag?
I think there's an error in Google's documentation and this should be a <link>-tag, like this:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
You can test it on https://developers.google.com/structured-data/testing-tool/ if it works. Include the <link>-tag into your website and see what Google detects with this tool. There's a section "Publisher" where you can see if Google detects the correct information.
I'm using <link> on my sites and Google detects the correct values.
An a element inside head is of course invalid according to any HTML specification. I have no idea why Google tells you to do so, but presumably their software actually looks for such tags.
What happens in practice in browsers is that the a tag implicitly closes the head element (you can see this if you look at the document tree in Developer Tools in a browser). This isn’t as bad as it sounds, since the rest of elements meant to be in the head will still be processed normally. For example, even a title element works when placed inside body. To tell truth, the division of a document into head and body is just a formality.
The tag <a href="https://plus.google.com/{+PageId}" rel="publisher" /> will be taken as a start tag only, potentially causing naughty surprises, since the start of the document will then be inside a link (which might extend to the end of the document!). Only if the page were served with an XML content type would the tag be taken as “self-closing”. So if you have been forced into using such an element, at least write it with a real end tag;
It will still be bad for accessibility and usability, since empty links may still participate in tabbing order etc.
Using link tag is the right (and valid!) way to go in the header:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
If you stick with the verbatim anchor tag when following the instructions (Link your brand page to your website), then you'll be setting yourself up for something to blow up down the road.
We just experienced it, in fact. It seems starting with iOS 8.x, mobile Safari will see this anchor tag and move it (along with the code below it!) to the body. This broke a smart banner we had in place.
We switched to using a link tag and verified that Google still detects the correct values.
Related
I have a page which contains an animation that is embeded in thousands of websites where the company I work for run ads.
However I would like to embed this animation in the website of the company that I work for because they produced the animation (of course). When our ad-partners embed our animation they use an iframe pointing to
http://example.com/pagina_animacao/
So I created a page inside the company I work for's domain containing this exactly iframe:
http://example.com/?q=aceitar-contrato-criacao-site
Because this iframe can be considered as duplicate content (it is published at /?q=aceitar-contrato-criacao-site and at /pagina_animacao/) I went to the URL /pagina_animacao/ and configured the canonical tag as:
<link rel="canonical" href="http://example.com/?q=aceitar-contrato-criacao-site"/>
Is this the right thing regarding canonical standards to avoid having duplicated content?
After waiting some time to Google crawl this website I took a look at the report and indeed, the URL https://www.sitepor500.com.br/pagina_animacao/ is not being listed anymore as an indexed URL \o/
I also used SEARCH CONSOLE (tool from Google) to see what Google was seeing at https://www.sitepor500.com.br/?q=aceitar-contrato-criacao-site and it crawled this page CONSIDERING the content of the iframe! I just did a search at google by:
site:sitepor500.com.br "semantic ui"
And Google showed at the result the link that CONTAINS the iframe! \o/ I used the word "semantic ui" cause that 2 words only appears inside the iframe in my entire domain. So it's a pretty good test case!
So you CAN and you SHOULD use canonical tag inside iframe cause people MAY embed your iframe in external content and your iframe content will probably appear as duplicated content!
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.
I have a Blog powered by Blogger [PhysicsGames.tk]
Also I have an application on Chrome Web Store THIS ONE
So I've been using the Inline Installation it worked well, unfortunately. I realized today that no longer works...
In the website main template I added the following code:
<link href='https://chrome.google.com/webstore/detail/hnmdbeamhkbhfobfmoaemhpfcgejlbif'
rel='chrome-webstore-item'/>
And I create a button:
<a onclick="chrome.webstore.install()" href="#">
<img src="http://i.imgur.com/D8ul8.png"/>
</a>
So It should work like this:
On the websiste, I click the 'button' and a dialog like this should appear, that is a application installation verification dialogue.
Then If you click on "Add" the app should install.
Well in my case, stays in step 1, the dialog never appears.
What I'm doing wrong?
Thanks in advance, and sorry for my English.
The <link href="..." rel="chrome-webstore-item"> needs to be in the <head> section of your page. Your page actually has it in between the <head> and </head> tags, but if you inspect the page's DOM, you'll see that the <link> tag is actually shown in the body:
This is because you have a <itemscopetag> (generated by Blogger presumably) before the <link> tag, which is unknown, and is causing the <head> section to be ended early (this behavior is defined by the HTML spec).
In some ways, this is a Blogger bug (it shouldn't be putting unknown tags into <head>), but in the meantime, one fix is to move the <link> tag so that it's above the <itemscopetag> one.
first off a short explanation... the following two lines assure that once my website is shared on facebook a custom image (share-thumbnail.png) is posted.
<meta property="og:image" content="images/share-thumbnail.png"/>
<link rel="image_src" href="<images/share-thumbnail.png" />
Can you guys think of any creative way to overwrite that behaviour when I click a specific sharing link on my page?
E.g. i have a <a class="special-sharing" href="#">Share with special image</a> anchor on my page and when that one is clicked I don't want to use the share-thumbnail.png defined in my header.
My thought was to use jquery to listen to click events on the .special-sharing link and then… preventDefault(); and change e.g. the content attr of my meta tag in the head to a new image src. Then call the facebook?sharer= blabla.
How would you solve that?
(Caveat: I'm not familiar with Facebook's API, just Javascript and the web in general.)
Unfortunately, you can't.
While it's possible to affect <meta> and <link> tags with jQuery (or Javascript in general), it isn't possible to make changes outside the currently-loaded copy of the page in the user's browser. When the link to Facebook is called, the current page is discarded and Facebook's page is loaded, which then performs its own hit on your page to get the og:image, which will still have the original value because the file on the server hasn't changed.
Instead, you could perhaps set up your server so that you can customize the image via the URL. For example, have http://www.example.com/mypage.php produce the default value for og:image, but http://www.example.com/mypage.php?special-image=foo.gif change the value of the <meta> tag. You could then use Javascript to change the sharer passed to Facebook so that it uses the special URL that points to the special image.
I'm pretty sure that many people have thought of this, but for some reason I can't find it using Google and StackOverflow search.
I would like to make an invisible link (blacklisted by robots.txt) to a CGI or PHP page that will "trap" malicious bots and spiders. So far, I've tried:
Empty links in the body:
<a href='/trap'><!-- nothing --></a>
This works quite nicely most of the time, with two minor problems:
Problem: The link is part of the body of the document. Even though it is pretty much unclickable with a mouse, some visitors still inadvertently hit it while keyboard-navigating the site with Tab and Enter. Also, if they copy-paste the page into a word processor or e-mail software, for example, the trap link is copied along and sometimes even clickable (some software don't like empty <a> tags and copy the href as the contents of the tag).
Invisible blocks in the body:
<div style="display:none"><a href='/trap'><!-- nothing --></a></div>
This fixes the problem with keyboard navigation, at least in the browsers I tested. The link is effectively inaccessible from the normal display of the page, while still fully visible to most spider bots with their current level of intelligence.
Problem: The link is still part of the DOM. If the user copy-paste the contents of the page, it reappears.
Inside comment blocks:
<!-- <a href='/trap'>trap</a> -->
This effectively removes the link from the DOM of the page. Well, technically, the comment is still part of the DOM, but it achieves the desired effect that compliant user-agents won't generate the A element, so it is not an actual link.
Problem: Most spider bots nowadays are smart enough to parse (X)HTML and ignore comments. I've personally seen bots that use Internet Explorer COM/ActiveX objects to parse the (X)HTML and extract all links through XPath or Javascript. These types of bots are not tricked into following the trap hyperlink.
I was using method #3 until last night, when I was hit by a swarm of bots that seem to be really selective on which links they follow. Now I'm back to method #2, but I'm still looking for a more effective way.
Any suggestions, or another different solution that I missed?
Add it like you said:
<a id="trap" href='/trap'><!-- nothing --></a>
And then remove it with javascript/jQuery:
$('#trap').remove();
Spam bots won't execute the javascript and see the element, almost any browser will remove the element making it impossible to hit with tabbing to it
Edit: The easiest non-jQuery way would be:
<div id="trapParent"><a id="trap" href='/trap'><!-- nothing --></a></div>
And then remove it with javascript:
var parent = document.getElementById('trapParent');
var child = document.getElementById('trap');
parent.removeChild(child);
this solution seems to work well for me, luckily i have bookmarked it. I hope it helps you as well.
you can create a hidden link like this and put it at the very top left of your page and to prevent regular users from accessing it too easily you can use css to lay a logo image over this image.
<img src="images/pixel.gif" border="0" alt=" " width="1" height="1">
if you are interested in setting up how to blacklist the bots refer to this link for detailed explaination of howto.
http://www.webmasterworld.com/apache/3202976.htm