Do search engines treat masked text differently than solid color fonts?
-
In my attempt to decrease page load times, I ditched my custom fonts for google fonts. I figured out how to apply CSS mask-image to make this blazing fast loading google font have a chalk texture, which was an awesome improvement over the 3-5 second load times for those locally hosted web fonts.
I've read that Google penalize a site for poor contrast ratios between the background and text, but do search engines go by CSS or do they somehow compare the actual rendered site as an image? Using CSS mask-image to give my text that chalk appearance does produce minor transparent patches in text.
So have I saved 3 seconds on page load just to have search engines knock points off for funky text issues? All input welcome. The temporary site is here. https://website-1b14f.firebaseapp.com/
Kevin
-
Great job optimizing your page load times by switching to Google Fonts and applying a chalk texture using CSS mask-image! Regarding contrast ratios, search engines like Google analyze the rendered site as an image, not just the CSS. So, even with CSS mask-image, the actual rendered text contrast is what matters. To ensure good contrast, visit DaFont, select a font, check its size, and use a clear and readable font in a suitable size (at least 14px) on your site to maintain a good user experience and avoid any potential SEO issues
-
Yes, search engines generally treat masked text differently than solid color fonts. Masked text, which refers to text that is hidden or obscured in some way on a webpage (such as using the same color as the background), is often seen as an attempt to manipulate search engine rankings and can result in penalties if detected.
Search engines like Google aim to provide users with relevant and valuable content. Masked text can be used in black hat SEO techniques to stuff keywords or hide spammy content from users while trying to manipulate search engine rankings. As a result, search engines are vigilant about detecting and penalizing such practices.
In contrast, solid color fonts, which are visible and legible to users, are considered legitimate and are not penalized by search engines. It's important to use solid color fonts for your content to ensure that it is properly indexed and ranked based on its actual value and relevance to users.
-
Hi thanks for helpful information use this font your text more attractive and beautiful use in comments , post, text etc this font is more help and share your thoughts in beautiful texts this times new roman font generator is very helpful.
-
Hi Christy,
Site launched! The e-commerce part is still under development but the basic site has been up a couple months. Masked text doing great! No issues whatsoever on the SEO side. Ranking super high still and load speeds are good. Service workers will be activated in the coming weeks as we build out our food delivery platform. So, I'll mark my question as answered. https://www.88k.com.tw
-
Site not launched yet but no warnings on any SEO tools. You can run this site through any tests you want and see. https://website-1b14f.firebaseapp.com/
Schema all good and AMP valid. Content coming up next... FYI this is not a public site and content will change as we test new designs and functionality.
-
Hi Kevin,
Have you launched yet? We'd love an update on this!
Christy
-
Thank for your thoughts. You're right that I can't find a single article on this anywhere, but I've never been conservative when I comes to SEO. I'm always looking to see what's possible. I concluded that since unsupported browsers will simply display the original text without the mask-image (Firefox/Opera), I'm going to assume google search bots won't care about the image mask either.
On the SEO side, this method shaves 3 to 5 seconds off load times, so that can't be bad. The effects are amazing, even on Chinese fonts. I'll report back after launch and post here.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Different breadcrumbs for each productpage
Hi all, I have a question related to the breadcrumb. We have an e-commerce site. There is a difference in the breadcrumb when navigating to our products vs directly browsing to the URL of the product. When you navigate to the product the breadcrumb looks like this (also in the source code):
Technical SEO | | AMAGARD
Home > Sand > Sandpit sand > Bigbag Sandpit sand type xyz When you visit the product URL directly, the breadcrumb looks like this (also in the source code):
Home > Bigbag Sandpit sand type xyz Looks to me that can be confusing for a search engine and that it is unclear what the site's structure/hierarchy is like (and also for a user of course). Is that true? If yes, does this have a big direct negative impact looking at SEO? Thanks in advance!0 -
'duplicate content' on several different pages
Hi, I've a website with 6 pages identified as 'duplicate content' because they are very similar. This pages looks similar because are the same but it show some pictures, a few, about the product category that's why every page look alike each to each other but they are not 'exactly' the same. So, it's any way to indicate to Google that the content is not duplicated? I guess it's been marked as duplicate because the code is 90% or more the same on 6 pages. I've been reviewing the 'canonical' method but I think is not appropriated here as the content is not the same. Any advice (that is not add more content)?
Technical SEO | | jcobo0 -
Does an Apostrophe affect searches?
Does Google differentiate between keyphrase structures such as Mens Sunglasses & Men**'**s Sunglasses? I.e. does the inclusion/exclusion of an apostrophe make any difference when optimising your main keyword/phrase for a page? Keyword explorer appears to give different results..... I.e. no data for Men's Sunglasses, but data appears for Mens sunglasses. So if I optimise my page to include the apostrophe, will it screw the potential success for that page? Thanks 🙂 Bob
Technical SEO | | SushiUK1 -
Add translated content on different domain or not?
Hello, I currently have my dutch website in the domain of my country. Quite good SEO positions are there for this language. Now, i'd like to translate my full site to english, my target group would go over the whole world because i'm delivering an online service. Therefore, I don't think it's good to have this on my country domain? I have an identic .EU domain that's never been used (currently redirecting). What's the best choice? What are the + and - ? Could this have any effect on my current positions in dutch (homecountry domain) ? Thanks!
Technical SEO | | conversal0 -
Should we handle this redirect differently?
So our question is should we handle page redirection/rewriting in php or in .htaccess (with a specific problem we are running into outlined below). We have an ecommerce store in a subfolder of our site (example.com/store/). In the next folder down we have a group of widgets(www.example.com/store/widget-group1). Recently we put a .htaccess redirect in the top level folder (example.com/store/.htaccess), in order to re-write some URL’s and also 301 a page to another page. This seems to be negatively affecting our /widgets-group1/ subfolder however (organic traffic to example.com/store/widget-group1) took a nose dive 3 days after putting the .htaccess redirect in place on the /store/ folder and it has not recovered 8 days later). *Nothing appears outwardly wrong with the current setup to the eye when viewing the pages or requesting as googlebot (the only issue being the nose dive in organic traffic lol) *both subfolders are setup in apache config file to allow local overrides of .htaccess as follows: <directory store="" widget-group1="">Options -Indexes FollowSymLinks -MultiViews
Technical SEO | | altecdesign
AllowOverride All
Order allow,deny
allow from all</directory> <directory store="">Options -Indexes FollowSymLinks -MultiViews
AllowOverride All
Order allow,deny
allow from all</directory>0 -
Google appending keyword to local search result(s)?
I noticed an interesting change today in how one of my clients appears in the SERPs. Google seems to be appending a keyword to his listing title. Client website: www.mycalgarydentist.com Keyword: Calgary dentist Rank: #2 or #1 lately Title tag: Calgary Dentist | Ambiance Dental Google+ Local listing title: Ambiance Dental Link title in SERP: Ambiance Dental: Calgary Dentist That last point is what's interesting, and new. As of a couple weeks ago (before I went on holidays) his link would simply show "Ambiance Dental", which makes sense because that's the title of his Google+ Local listing. Given the above information, I can't see why his link in Google's SERP is "Ambiance Dental: Calgary Dentist" when doing a search for that keyword. When I do a search for "Calgary dentists" or other similar searches, he simply shows as "Ambiance Dental", not "Ambiance Dental: Calgary Dentists" To test yourself, use the Google AdWords Preview Tool (https://adwords.google.com/d/AdPreview/), change locality to "Calgary, AB, Canada" and search. I suspect this doesn't mean he's violating Google's guidelines for business listings (i.e. businesses aren't supposed to add keywords to their business title). I'm certainly curious why this is happening though. Can anyone provide any insight? Has anyone seen anything similar? calgary-dentist-search.png
Technical SEO | | Kenoshi0 -
Replace Header Text With Image
I have a static website that I would like to retheme. I have the mockup, and its spliced. The website holds nice rankings right now, and I want to keep them in place. The one thing that will change with this new design is the header will no longer be text, but instead an image. Is there a way to ensure googlebot still sees the H1 tag header exactly how it is now but use an image for the header instead? I dont want any blackhat tricks that will get me banned. Just wondering if there is a simple way to have googlebot see the header as text (not ALT img txt) so the site does not appear to have changed at all. (It hasnt, I only am changing the graphics and colors of background, and header image for better branding.
Technical SEO | | getbigyadig0 -
What's the difference between a category page and a content page
Hello, Little confused on this matter. From a website architectural and content stand point, what is the difference between a category page and a content page? So lets say I was going to build a website around tea. My home page would be about tea. My category pages would be: White Tea, Black Tea, Oolong Team and British Tea correct? ( I Would write content for each of these topics on their respective category pages correct?) Then suppose I wrote articles on organic white tea, white tea recipes, how to brew white team etc...( Are these content pages?) Do I think link FROM my category page ( White Tea) to my ( Content pages ie; Organic White Tea, white tea receipes etc) or do I link from my content page to my category page? I hope this makes sense. Thanks, Bill
Technical SEO | | wparlaman0