I am using the negative-text-indent technique I learned to show a text-image to the user, while hiding the corresponding actual text.
This way the user sees the fancy styled text while search engines can still index it.
However I am started to think this sounds like cloaking since I am serving different content to the user vs the spider. However, I am not using this in a deceitful way. Plus it seems like this is a popular technique.
So is it SEO-safe or is it cloaking?
Thanks!
No, this is not cloaking. From what I can tell, you are not actually serving different content, based on whether (you think) the client is a crawler. The content you are serving is just interpreted differently by browsers than by a spider. If you are actually serving different content, why are you doing this?
I'd even go as far as say that it is good accessibility practice. Screen readers will still pick up on the hidden text, text browsers will show it normally, etcetera.
No, this is not cloaking. I think the key phrase in Google's definition is:
If the file that Googlebot sees is not identical to the file that a typical user sees, then you're in a high-risk category.
You're not serving a different file - the content of the file served to GoogleBot is exactly the same as the content of the file served to users.
Thomas is right - this is not cloaking. CResult's quoted text implies that Cloaking is serving a different files for crawlers and users. Meaning, for the context of crawling, Content = File. Thus, if you serve the exact same file, you are not Cloaking anything.
It doesn't matter if you serve off-screen text.
It doesn't matter how the content is presented to the user. It doesn't matter what is inside the file.
At least one blog interprets one of google's help pages as proof that google would not approve of negative indents.
Also, this post which supposedly has a quote from a google employee on the topic.
This is NOT cloaking. I use image replacement techniques all the time. It makes sense in the fact it's more accessible. If the text reads what an image says then that's fine. It is functional to the image. If however, you're cloaking a description of the image that is not otherwise on the image anyway, I'd be concerned about that. It's fine to replace things that read the same. I do use ALT text, but sometimes I'd rather have the image as a background on text and indent it off screen. It meets the same requirements.
Related
We have a project at my work at the moment around ensuring we meet accessibility standards on our website.
Our emails are built using Salesforce Marketing Cloud layouts. Does anyone know how we can see or test how 'accessible' they are?
I can test using ReturnPath to see how they render on various devices and that gives me results for colour blindness, but I'm not sure how to test how well they would or wouldn't work with a screen reader for example
Emails are a tough one from an accessibility perspective. We are still stuck using tables for layout even in 2021!
We can't use WAI-ARIA and CSS is very limited.
As such I have a smaller checklist for emails that covers the important stuff we can control.
The main things I would look at are:
Reading order
Make sure that the email reads left to right and then downwards (assuming the language is a left to right language, otherwise reverse it)
Use headings
Email marketers often just style normal text instead of putting proper headings in. Make sure headings are in fact <h2> to <h6> with a single <h1> explaining the purpose of the email at the start.
Also make sure that the headings do not skip levels (so don't go from <h2> to <h4> for example).
Colour contrast
The exact same rules for websites apply to emails. I would recommend running the colours through the Web Aim colour contrast checker for your text and background around the text, button backgrounds and text etc.
Alt Attributes
Alt attributes on images is the big one you need to check for especially in emails where images might be the only content within a hyperlink. As you can't use aria-label or visually hidden text in an email alt attributes are the only way you can make a link have meaning if it contains an image (plus as email clients block images it means there is meaningful text for everyone else not just screen reader users).
Meaningful Link Text
Along the same lines make sure links do not just say "Read more". Instead make link text meaningful e.g. "Read our article on X Y Z".
Use a descriptive subject line
This one is the only one that is "difficult" as a marketer. You want subject lines to intrigue people to open the email, however for people with cognitive impairments cryptic subject lines can be disturbing / confusing etc.
Getting the balance between "giving the game away" and meaningful subject lines is difficult, if unsure err towards meaningful (it may help your open rate / conversion rate anyway so A / B test it!)
View in Browser
Due to the limitations of email clients the best way to ensure accessibility is to have a custom "view in browser" link in the email (as salesforce etc. are very unlikely to do a good job of the browser versions of their emails).
That way you can use WAI-ARIA, visually hidden text etc. and mark the page up properly, complying with WCAG 2.1 (and very soon WCAG 2.2) requirements.
Obviously I am aware of the amount of work this entails but once you have a template and components built that are accessible it does become much easier.
Testing
Personally I would just test manually, but I am sure somewhere out there an email testing service exists similar to Axe Accessibility Checker.
But given the length of a typical email I would say a manual check will only take 2 minutes once you know what to look for so a service may not be worth it.
You could always copy and paste the email HTML into a file and save it with a .html extension and then open and test it in a browser / accessibility checker. But you might get a load of issues you can't resolve due to the use of tables for layout.
Finally - learning to use a screen reader takes less than an hour, grab NVDA or VoiceOver and test the email yourself, if you can understand it and access all the same information as everyone else then send it!
Please Note: This question is not related directly to Server-side detection that a page is shown inside an IFrame, as I'm showing you an instance where it would appear that the guys at MDN (Mozilla Developer Network) are already detecting that content is being delivered to an iframe, although, if you read through this, I discuss the possibility that this isn't server-side related at all; it might be some sort of "rights" issue declared some how or in some way I don't know about. The point is to understand how something already existing works.
First of all, I do not desire to rip off MDN (Mozilla Developer Network) content as my own. I'm asking this because I'm truly puzzled by it. The guys at MDN seem to have pulled of a nice trick, and I'd like to know it, but maybe its simpler than I realized.
The code is only:
<iframe src="https://developer.mozilla.org/en-US/docs/HTML/HTML5"></iframe>
Take, for example, this fiddle:
http://jsfiddle.net/jfcox/D3UNZ/
Do you notice how there's no content in the iframe? There doesn't appear to be any content related to the request on the Chrome network tab.
I assure you, that'd work on a "normal" website, like example.org. see http://jsfiddle.net/jfcox/nPwcu/
So, I ask, what is it that they are doing to detect that a request is being made from an iframe?
Is there some Browser-Fu I don't know about? Oddly enough, that might be the case. From IE9.
To help protect the security of information you enter into this
website, the publisher of this content does not allow it to be
displayed in a frame.
Wow! Ok, so maybe it's not server-side, maybe it's all Browser-Fu. Even so, how does IE9 and these other browsers know what I don't know? What do I need to look up to learn about this?
I have my own suspicions, namely that there's some file at the root of the website like crossdomain.xml for flash that defines permissions about content usage or whatever, but I still wouldn't even know where to start if that's the case.
Turns out, it's a pretty simple copy protection. All you need to do is set a response header.
https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options
https://datatracker.ietf.org/doc/html/draft-ietf-websec-x-frame-options-00
Yes, "frame", instead of "iframe".
:eyeroll:
I suppose the name makes sense, considering the possibility somebody could still attempt to use old HTML 4 frame tags for whatever purpose, and I would expect most browser/DOM engines have baked-in support of frame tags given HTML history. Netscape created/supported frames as early as version 2.0 and iframe was a later, purely-Microsoft invention that found wide adoption, IIRC.
Before making a CSS change that might possibly have unintended consequences, what's a good way to find where else on the whole site (not just this page) that id or class is used? (It doesn't have to be exhaustive, and semi-manual processes are ok, too.)
For a bit of context, it's a Joomla-based site with a lot of content, and I'm not yet familiar with most of it. The id in question has a two letter name, and I have no idea where else it might be used. I don't have direct access to the server for any grep-like approaches.
The only technique I can think of is using Stylish to make an obvious change to that one selector, and browsing the site for a bit to see where it pops up.
The easiest way would be a local grep, but since you don't have access to the server, try downloading it locally using wget:
wget -r -l --domains=http://yourdomain.com http://yourdomain.com
That'll recursively retrieve pages from your domain to an infinite depth, but only following links to pages within your domain.
Once it's on disk, do a local grep and you're golden.
I use unused-css.com for this sort of thing. You simply put in your webpage, and it will look through the whole site (incl. login) and give you the CSS that you actually are using.
I've found it to be 95% correct - but it only doesn't pick up on things like some CSS browser hacks and some errors (ie. the CSS only displays after an error), so it should work fine for this.
You could also check the original template (assuming the template is a commercial one) to see where the id perhaps should be (they usually lay everything out in their demo template), but unused-css won't tell you exactly where it is used, only if it is or not. For that, I'd start with a view-source -> find on the major pages, and then try other mentioned solutions.
Get the whole site's source tree into an IDE like NetBeans or Eclipse and then do a recursive search for id="theid" on the root folder.
If this is not possible, how are you updating the CSS?
Assuming you don't want to do the grep approach:
Is the ID in question appearing in the actual content area of the page, or in the 'surrounding' areas? If it seems like it's not part of the content, but rather appears in a template, you could search the template files for it. As you're updating the CSS, I'm going to assume you can at least get a hold of the template files. Many text editors/IDE's will let you do a 'global search'. I'd load the template files in TextMate (my texteditor of choice) and do a "search in project" for the particular ID.
That will at least give you a semblance of an idea of where in the site that ID shows up. No, it won't be every 'page', but you'll know what kind of page it appears on (which, with a CMS, is really what you're after).
If the ID in question appears in the content, that is, it was hand-entered by content creators, you'll have to go another route. Do you have access to the database? If you can get a dump of the database (I think Joomla! is MySQL based), you can open the sql in something like Sequel Pro and do a search in the content records for that ID.
This is not actually as hard as it sounds. First place to look the index.php file for the template. This file should be pretty small without a ton of code unless the template is from a developer that uses a template framework. If the ID is in there, then it will show up on every page in the website since this is the foundation that every page is built on.
If you don't find it in there, then you need to determine whether it is displaying in a module position or in the component area. You should be able to tell the difference by looking at the index.php file from the template.
If it's in a module position, then the ID should only show up in instances of that particular module.
If it's in the component area, then it should only display in any pages being created by the component. That does leave the possibility of it affecting many elements you don't want changed. But there is a solution for that. you can use the page class suffix in a menu item to add a unique id/class to the page you want to change (depends on your template). With that unique suffix you can create a specific selector that will only affect the pages you want to change.
I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?
I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!
My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.
Do you experts have any advice? Thank you!
google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html
If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.
Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.
EDIT, additional info as pertaining to the original question:
The search engine friendly way to display content dynamically is to load it, then hide it from the user.
I'm currently making a project where I need to print out a receipt on a receipt printer.
At the moment i'm using the CSS mechanism media=screen , media=print to indicate what to print.
Problem is of course the header and footer which can't be removed, as it is client browser specific.
So i'm wondering if anyone has another suggestion on how to do the printing. Preferbly without using too much IO.
Generally speaking, if you need precise control, your best bet is to have a pdf, or other doocument format that is generated from the server, for your printing. (if the machines printing receipts are controlled, and have word, than .doc (html with an output type) is the easiest method. There are a number of third party controls for generating PDF from server-side code as well. Hope this leads you in a usable direction, since you didn't specify if you controlled the client machines in use.
One benefit to PDF is you can use it as a hard archive, as well as being able to email receipts as an attachment.
The header and footer information (Assuming you're talking about the URL showing up at the bottom of a page) is client-side and there is nothing you can do to change that from server side.
If all of your printing is going to be done from inside your company, you could have a group policy created for Internet Explorer printing to remove these company-wide. You could also just have instructions on your page on how to change these setting manually.
Another option is to print with a 3rd party application, such as PDF, or print it directly from the server if that option is available to you.
Do you mean the page header and footer?
If that's the case, wrap the header and footer in IDs and create CSS tags to target them and give them a much simpler styling, or you can use the CSS element display:none to remove them altogether in the print css.
You could load the content you want to print into an iframe, focus on it, and print that. That way you'll have exact control over what appears on the receipt.
It'd take a small bit of javascript, but I've had success doing similiar things when I wrote a custom contract printer.
It's not an ASP solution, but may help:
http://code.google.com/p/jzebra
It's a java plugin that can bypass the header and footer stuff.