Do you think the hiding particular content from the mobile version of a website can harm your SEO? I have a page that has around 3 long paragraphs of content. On the desktop, this looks fine - but on a mobile there is far too much content before being able to click my categories on the page. What I've decided to do is write a media query to hide all but the first paragraph in this section. Could Google think that I'm trying to use black-hat techniques or would they understand that my content is visible on mobile?
Thanks!
The {display:none} tag within your CSS for the para you're trying to hide will be read by Google. But the question here lies whether they will consider it after parsing the media query.
Highly doubtful considering they read "present" code and do not read multiple instances of it, as recorded spider data is mainly the code on your HTML page without considering the ifs and buts of CSS & JS.
IMO, you should not be penalised for this as long as your content is unique and you're not indulging in any black-hat tactics.
Maybe you need this one for hiding content for mobile devices.
#media all and (max-width: 479px) {
.content .mobilehide{
display: none;
}
}
<div class="content">
<p class="mobilehide"> This will hide on mobile version </p>
</div>
It's hard for most of us to know at what point Google will draw the line and say that your site is breaking cloaking rules.
Maybe take a look at this forum post on Google's Product Forum for a little more info.
Related
I have got some HTML working fine in 2 web pages, but at one point, I grab the innerhtml of the container div and mail that to the user.
The same code, even when it's all in the email code, doesn't function the same way. Is this something that only works in browsers?
Here is some sample code that isn't working as I'd like :
<div class="flex" style="display: flex; flex-direction: column; margin:11px 0; ">
<div style="order: 2">Growth <strong> 2</strong></div>
<div style="order: 5">Safety <strong>5</strong></div>
<div style="order: 3">Income <strong> 3</strong> </div>
<div style="order: 4">Tax Efficiency <strong>4</strong> </div>
<div style="order: 1">Liquidity <strong> 1</strong></div>
</div>
ADDITION :
OK... most of what I'm finding around on the web, leads me to believe that displaying the code that I shared earlier will not transfer to email. So I have a different question.... is it possible, that when I save the div's innerhtml to the field for insertion into the email that I can put the sub divs in the correct order BEFORE sending to the email? so the email just has to display it, not process it.
So curious how I can actually move the subdivs around... as often happens, I got asked to do this at the last minute and don't have time to learn an entirely new system, but if someone knows how this can be done and maybe point me to the right link, that would be great.
Thanks very much guys for your comments so far.
Using flexbox (or any of the modern css methodologies) in email templates is simply no good.
You can find information about what to use in an email template here.
If this is your first time building an email template, I suggest that you use a semantic framework for doing this with a bit of ease. An email building framework takes into consideration all the requirements for a responsive email that is displayed in the same way across various email clients.
As from my experience so far, Foundation for emails (zurb email stack) is the best option of doing so. Like I said, it is semantic, and easy to understand (and use). Everything is automated for you, it even has browser-sync applied to it.
Sample syntax:
<container>
<row>
<columns small="12" large="6">Column One</columns>
<columns small="12" large="6">Column Two</columns>
</row>
</container>
July 07 2019 - UPDATE: You can also use a nice little tool by the folks at MJML which allows for even easier template creation, because of its own editor and live template view.
Is this something that only works in browsers?
In a way, yes.
Most email clients only support very basic HTML and certainly nothing newer. Don't rely on new HTML/CSS/JavaScript to work in them properly; even older doesn't always work well - still need to lay out pages with tables and use inline styles for visuals.
flexbox isn't supported by all email clients. It displays, it can work, see below for an explanation, but not the way you may expect. I ran your sample code as-is using Zurb Foundation for Email template 1.05. I did not add any flexbox CSS. I ran the results through Litmus.com and further verified the results with actual email clients (Outlook, Gmail, Apple Mail).
This is how your results looked in Outlook 2013:
This is how it looks in Gmail:
The results I saw in testing mostly follows the look of Outlook 2013 email, which includes Yahoo, AOL, IOS on various devices and others.
Bold characters were ignored by IOS devices like an iPhone or an iPad. In Outlook.com (Hotmail), it looks closer to the results shown with Gmail.
Your code will display with most major email clients, but your results not be consistent and it will not sort. Using flexbox and divs is not an approach that will bring you the best results across all email clients.
You could combine specific css to help enhance what you are attempting to do, so that you can use the same code base as you might with front-end development.
Flexbox is supported
This article is several years old, but flexbox works on Apple and Android devices, but might require a -webkit tag. display:-webkit-flex; I never added that or any flexbox css.
Flexbox is not supported across the board and using it might cause more problems than it fixes. For more information, visit:
https://litmus.com/community/discussions/1500-using-flexbox-in-an-email
Like many people I suspect, I have an existing website that I am trying to modify so it works well on much smaller mobile screens. I am happy to make a great deal of concessions in order to do this. However my main problem is the site's logo. Happy to swap it out for something small and static, but what I have in the original site is a Flash file for the logo. Yes, big mistake but then hindsight is a marvelous thing. What I have to deal with is a logo which is:
> * Specified in an external style sheet
> * Specified in an external XML file
> * Has additional hard coding in the HTML (size, placement etc)
> * Has an actual external Flash file too of course
So my historical decision to go with Flash has consequences in at least four different kinds of file as well as every HTML and PHP page in the site.
My question then is what is the minimally disruptive way I can modify the existing site to specify something smaller and simpler than I have at the moment? I am happy to not have the Flash file feature in the mobile site, if that helps. Thank you.
I found the answer in a web technology I was not previously familiar with called "media queries" and I urge anyone unfamiliar with the concept to Google it and find a good primer. In a nutshell, media queries allow you to insert a section in your style sheet that queries the maximum (or minimum) screen resolution of the device your site is being viewed on and specify an alternative set of styling instructions for that event. It's like introducing an If/Else construct to your style sheet.
In my case I simply created an alternative logo - smaller and a static .jpg image. Then I worked out the screen size threshold below which I wanted the smaller logo to appear in, and then wrote my media query, which looks like this:
#media screen
and (max-device-width: 1023px) {
#flashContent { display:none; }
#altlogo { background-image: url("/images/mobile_logo.jpg"); width: 318px; height: 43px; margin-left: 2%; margin-bottom: 1px;}
}
The first part says not to show the Flash logo, while the second specicies an alternative. Of course you also need to create a hook inside the HTML for this to operate, hence adding the following div right after the original flashContent div:
<div id="altlogo" role="img" aria-label="My Smaller logo"></div>
Note I don't want to stray too far from my original question into the realms of an extensive introduction to media queries, but I will add that the parameters to my additional div serve as a way round the accessibility issue of being unable to add an 'alt' tag to the substitute logo image. Screen readers will detect and read out these parameters in lieu of an alt tag. There are other issues unaddressed here such as loading two logos when you only display one, but these are completely solvable issues that are beyond the remit of my original question to address here which I leave to interested parties to research.
I know this type of question has been asked a 1000 times, and 99% of the time someone hurries in and gives media queries as the solution. It no longer is the optimum answer.
The Situation: I have video in the background on a webpage - that does not render on a mobile device, so I want to use an agent to detect mobile and simply swap the css page to a mobile friendly version.
Please do not post a media query as the solution because my cell phone is 800x1200 and my tablet is 1900x1200, more than my desktop:1600x900 so a media query wont work.
Hoping someone can post an entire solution with the agent and insert where the css reference goes becuase I dont want to mess that up..
Im presently using an agent that redirects to a separate mobile page but that means maintaining 2 pages vs. one with stripping css instead. (1 page and 2 css files)
I think many here will find this answer helpful as many with this question have no answer.
thank you..
PS - please be detailed Im a noob.
thanks
If your using http://code.google.com/p/php-mobile-detect/ something along the lines of the code below should work.
<?php
include 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if ($detect->isMobile())
{
?>
<link rel="stylesheet" type="text/css" href="mobile.css">
<?php
}
else
{
?>
<link rel="stylesheet" type="text/css" href="noneMobile.css">
<?php
}
?>
Very simple example but would work in your case. You could go into more detail with $ddetect->isTablet() etc, full list here http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect
In direct defiance of the question, I'm going to say that as of 10/12/21, Media Queries are absolutely an option once again, as in most situations they will work.
If you're looking to target the page width, you'll use the following. This is a quick fix, and most likely is the main reason for OP's question, as it doesn't address the fact that some devices have resolutions shared by desktops, yielding a mobile experience on desktop, or vice-versa.
#media (max-width:400px)
To circumvent this, you want to use the following to check for the device width instead:
#media (max-device-width: 400px)
This deals with the DISPLAY size, versus the webpage size. It's not perfect, but combining this with device heights, and vendor-specific queries, you can fix most situations with CSS. The bonus is that you can keep the web page optimized without needing extra JavaScript or PHP, or any other additional web technology, and for the fringe cases, you can use the options provided here.
I'm having some issues with css and inline styles on an email campaign I'm doing.
Firstly I ended up cheating a bit in that I was hiding elements (display:none;) to make them appear in the right order when using the #media css. The issue here was when displaying on a desktop isp (gmail) it ignored the (display:none;) and ended up showing double content in places. So to the double content disappear I used (display:none !important;) which then affected the mobile version.
There are some mobile templates I've seen online which don't appear to have had much testing as they simply do not work across multiple mail clients.
The code is here if anyone has any suggestions or help http://www.makeyourownmarket.com/test/test-doc.html
Some tips for responsive emails:
Put your !important declaration on all of your #media only screen and (max-width: 480px) CSS
Think of workarounds, if display:none; isn't working, try width:0;height:0; on your inline CSSand then override with width:100px !important;height:100px !important; in your mobile styles
You will need to do extensive testing, having an account/device for all the significant email clients is the best, but http://www.emailonacid.com works in a pinch.
I'd recommend doing a little more research into HTML emails and their limitations.
This article is a good starting point:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some tips:
Don't place CSS in a STYLE tag as this won't work across all email clients.
Use inline CSS only
Use Tables for layout
I would be very surprised if media queries would work consistently in email clients. I'd avoid trying to use those and instead concentrate on creating a basic, solid email template which displays consistently across the most popular email clients.
I dont think responsive design is the right way for emails. Usually emails are made inside the table because of many mail clients. You could find more about this here Nettuts
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 7 years ago.
Improve this question
I'm just wondering if display:none is affecting my sites seo as I have for certain keywords dropped rank in google over the past few days since implementing this into a new homepage re-design.
I am using wordpress and displaying random post images on the homepage, getting the excerpt and hiding it using display:none and when a user hovers the image it displays the excerpt as a tooltip.
I have read a few conflicting articles on this and watched Matt Cutts youtube video but that doesnt really give me an answer for the way I have implemented it.
So I am hoping someone on here can give me a bit more insight as to whether it is not good seo practice or doesn't make much difference?
Thanks
The Google bot don't care about CSS display:none, what the googlebot see is your html source. whatever is hidden with css is visible on the html source.
There are secondary checks for your CSS files, that check if you have any display: none; on your css If you have there is some sort of checks on what is hidden (links, chunks of keywords, etc.). If you are found to hide keywords or links you will be punished :)
Other common check is the css for your links, things like a {display: none;} or a {color: #ffffff;} will raise a flag. in the last one a check to determinate the background color of body or any container is done.
Matt Cutts will not tell you exactly how it works because it is a huge task that so far had big failures as css sometimes get complicated and you require a lot of checking.
There is just simple red flags on a site if there is a display:none;
As a side note if you have a style block on your html (<style type="text/css"> .some-class {display: none;}</style>) or a div with the style on it (<div style="display:none;">keyword</div>), Googlebot will pick that faster as it is visible on your html source.
You mention that you had implemented this into a new homepage re-design, and I wonder if you had given a time for Google to pick the changes on your site ? Remember that you can make improvements on your site but googlebot will see them 'who knows when'
Although you apply display:none style to your element, it doesn't matter with seo because your element dom still exist and what seo looks for is the dom and its content, not UI.
What i understand from your problem, is that google might black listing your website links. As hidden text/div are considered as Black Hat SEO technique and hurt your website very much.
I don't claim to be an SEO expert, but generally speaking if you're trying to fool the site crawlers (by hiding tons of keywords) that's bad for SEO because you're likely to get blacklisted. If you hide content because it helps user interface, shouldn't be any negative effects. Since it's an automated process, err on the side of caution generally because, for example, if you're blacklisted you can't argue your case for including every city name in the lower half of the state in a hidden div.
Crawlers are apparently not very good with JavaScript (and many users have JS disabled anyways) so perhaps have the content shown by default then hide it with JS/CSS hover.
.keywords
{
visibility:hidden;
}
<div class="keywords">
keyword 1
keyword 2
keyword 3
keyword 4
</div>
or better :
.keywords
{
display:none;
}
<div class="keywords">
keyword 1
keyword 2
keyword 3
keyword 4
</div>