Responsive text?
-
Hello guys, thats in advance for any advice that you can give me, i have a issue about the responsive content.
The content (product title) that fits on 1024px screen, but doesn't fit at 768 / 600 so I want to know if is possible to show a small (modify) version of that title with doing a cloaking o similar
Ex:
Title at 1024:
Brand New Xbox One 500 GB Black ConsoleTitle at 768 / 600px
Xbox One 500 GB Black ConsoleAny advice?
Thanks!
-
Thanks!
-
It can be done in a many ways. With Bootstrap it could be done these ways:
Long detailed Title with many words
Short Title with few words
or
Long detailed Title with many words
Short Title with few wordsOr if you are coding it yourself, then create similar class names and in your CSS file define at what screen widths they are declared visibilty:visible; or visibility:hidden; - This is not cloaking, there is always a version of the text visible to the user.
-
I know, but i´m talking about changing the the phrase, not the size,
-
Hi Rafael,
In a responsive design you can definitely change any font size you want for different device widths, even h1 text.
You just give the h1 a class, or put it in a div with a unique class. Then in the CSS file you can use media queries to change anything like this... font-size:12px; line-height:16px; color:red;
I do it often to put my h1, h2, h3 tags anywhere I want on the page and make them any size or style I want without messing up the look of the page.
-
complete site to responsive, I saw your site but H1 don´t change only resize the divs.
Thanks for the answer
-
Nice job covering both approaches, Gregory! I found this helpful as well.
-
Are you converting a site to responsive, or just trying to hack a few things on a fixed with site?
If you are really making the page responsive, then I suggest using one of the pre-designed responsive site systems. I use Twitter Bootstrap. It's free and very easy to learn, even for a non-programmer. With Bootstrap your problem would be solved either by using a single title and changing the font-size for different device widths, or by presenting different versions of the title on different device widths. Like this...
Brand New Xbox One 500 GB Black Console
Xbox One 500 GB Black Console
In Bootstrap the class "hidden-desktop" actually means it is only visible on devices that are NOT desktops - which are tablets and phones. They tell you which screen width ranges are considered to be which device type. You can go to my site on a PC and pull the screen width across from wide to narrow to see how a Bootstrap site reacts to varying screen widths.
If you are just trying to hack a few repairs, you will need to do it in the CSS file with "media queries". Not too hard, but takes a little learning and experimentation to figure out. Your page HTML will need to have a "class" or "id" added to any element you want to adjust with the CSS.
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
-
Internal anchor text
Hello, I am wondering how to deal with internal anchor text. I read here and there that it shouldn't be too optimised but I also read that this is how google understands what my page is aout. I have breadcrumbs with my main keyword in the anchor text and can't change that it is automatic. In other words if i have 10 breadcrumb going to my top page with the keyword can I be penalised ?
Intermediate & Advanced SEO | | seoanalytics1 -
OK to change the anchor text of a link?
I have built a link on behalf of a ciient in a long, well-written article on a reputable website that accepts contributor accounts. I therefore control the link. I have since realised that the anchor text of the link could be optimized much better than it currently is (while still only being a partial match). Would I be punished by the algorithm for going in and changing the link? I know it's not 100% "natural," but then we're SEOs, and i don't think it's too implausible that a website owner may go in and do the same... Maybe if I add some text as well, it would make things look more natural?
Intermediate & Advanced SEO | | zakkyg1 -
Internal Linking from Menu or body text or both with exact match keyword?
I used to have my menu link to every page with my exact match keywords. I am a Magician and have pages for each county / town so I had a link to /magician-hampshire with the anchor text Magician Hampshire in the menu. I recently had my website updated and the developer told me this was very spammy have a menu that said Magician Hampshire, Magician Surrey, Magician Berkshire He suggested that I should now have a menu structure that says Areas Covered>Hampshire - Surrey - Berkshire etc.Google will know my website is about a magician and relate the two together. Is this correct or should I revert my menu back to anchor text of Magician (County) I am running wordpress and he said the title attribute can say Magician Hampshire but the Visible text is for the user and not Google. I also use the technique of doing site:rogerlapin.co.uk magician hampshire and then seeing the top 10 pages google has for me and placing a text link from each of these pages in the body text. When doing link analysis I now see I have two links to each page but understand that google will only account for the first one (from the menu) Questions:
Intermediate & Advanced SEO | | rnperki
Should I link to every main page from the Menu with the exact anchor text?
Does google only take into account the first link to a page it discovers?
Will it associate a link to a page with just the text of the county (Berkshire) to be related to Magicians in Berkshire as that is what the page is about? A few years ago I used to have at the bottom of each page Magician Hampshire | Magician Surrey | Magician Berkshire | Magician Sussex links - and to date a a lot of other Magicians employ this same technique. I was told google would slap them for it but so far it has not and it seems to be working for them. Many Thanks Roger http://www.rogerlapin.co.uk0 -
Two Pics, one bit of Text single anchor link?
Hi thereGurus, sorry Aspirants ;-), I have a really nice looking menu used in my standard page template that has some SEO issues now due to possibly causing 'too many onsite links' penalty/downgrade on some of my bigger pages going >120 links. Wanting to keep the nice menu, I want to work around the issues if possible. The menu is comprised of 7 buttons with various keywords pertinent to the site. On the menu, hovering over the keyword in a button eg 'Technology' causes this button with word inside to do an animated slide down and a picture representative of 'Technology' to appear where the button was with the original button directly below it, which then a side menu slides out of to the right to reveal 5 anchor links that represent the 'Technology' menu category. The first option in this sub-menu is supposed to have the same anchor link as the description image and the button/button text that being it is like a category description. Trouble I am having is that the slide out menu requires a separate div for javascript reasons. I have one anchor covering the button and the pop-up image, but then I need a second anchor for the first line of the slide out menu (otherwise fails W3C). This is adding 7 duplicate anchors to the page on a e-Commerce page that already has too many anchors IMHO. I read in HTML5 you can have an anchor holding a div inside, but how about an un'd div? The next four items on the slide out menu go to other anchor links so it first anchor needs to end prior to these, hence halfway through a div. Is there another way of making multiple items (across div boundaries etc) only go to/count as one single anchor link? Thanks for your help, Brad
Intermediate & Advanced SEO | | BM70 -
Sculpting anchor text percentage through disavow?
Hi there, should less-than-optimal links be preserved, if those links contribute to a more attractive anchor text percentage profile? I'm working on a client who spun a bunch of articles, using keyword word anchor text. No surprise, the strategy worked great up to the penguin update. About 90% of the client's links come from these spun articles. The other 10% of links are naturally occurring, quality links. Furthermore, these quality links are also keyword rich. Now, it occurs to me that if I remove / disavow the links coming from the spun articles, I'm left with the 10% of quality, anchor text rich links. I'm concerned that Google will see this percentage as too high, and lower the rank. Furthermore, I have a vague memory of watching some YouTube video, where an ex-Googler says that your brand name should be about 60% of your anchor text, and everything else lower. Finally, when I examine the anchor text in links coming into the ranking sites, they have 5-15% anchor text density on their keywords. So, I feel a bit of a contradiction: I should clean up all of the crappy links from the spun articles, but then that risks having only the keyword rich anchor text links active? Therefore, I'm considering leaving some of the crappy links active on non-relevant keyword text, such as the good 'ol "click here" link. Also, before answering this, I can already predict some of the answers on philosophical grounds: those crappy links from spun articles are not natural and garbage, so get rid of them. Fair enough, but I'm also interested in an answer on only the dimension of what will produce the highest rank for my client?
Intermediate & Advanced SEO | | ExploreConsulting0 -
Is white text on a white background an issue when...?
Hi guys, This question was loosely answered here (http://www.seomoz.org/q/will-google-index-a-site-with-white-text-will-it-give-it-bad-ratings), but I wanted to elaborate on the concern. The issue I have is this, http://www.searchenginexperts.com.au/preview/white-text-white-background-issue Of the four div elements on the page, which; is best practice for SEO? and which of them would not be penalized by google on the grounds of hidden text? The reason I ask is that I have a site that is currently implementing the first div styling, but if you either remove the image OR uncheck the repeat-x (in inspect element) the text is left as white on white. I have added the transparent image on green to prove that having a background colour to back up the tiled image is not always going to work. What can be done in this scenario? Thanks in advance, Dan (From my managers account)
Intermediate & Advanced SEO | | RuchirP0 -
Performing Internal Optimization Without Much Anchor Text?
Hi guys. We're in the process of building a new site, and are using a lot of icon based linking, image linking, etc. There is some basic text linking here and there, but not a whole lot. My concern is, because I'm not using actual anchor text, but just images, that crawlers are going to have a more difficult time determining what pages are about. Do I have a valid concern, or am I just worrying about nothing? If this concern is valid, what is the best way to remedy this concern? Alt img tags?
Intermediate & Advanced SEO | | CodyWheeler0 -
Custom Error and page not found responses
When there is a 500 Internal Server Error, is it better to return an HTTP 500 response and custom error page from the requested URL, or is it better to return a 302 redirect? The redirect would send the browser to the custom error page, which would return the HTTP 500 result. We tell Google not to index or follow our error pages, so if Google sees an error at a URL, we don't necessarily want Google to think that the URL should be ignored. That's why the alternative would be to redirect to a custom error page with it's own URL. Similarly, what's the best approach if the response is a 404? Return HTTP 404 and custom 404 page from the requested URL, or redirect? Thanks.
Intermediate & Advanced SEO | | dbuckles0