: Buttons or text navigation in mobile website When building a mobile site, will using JPG buttons for navigation penalize the SEO for the site? (Assuming I use proper keyword alt text for the
When building a mobile site, will using JPG buttons for navigation penalize the SEO for the site? (Assuming I use proper keyword alt text for the buttons)
Stylistically the site obviously looks better with some simple buttons, but does this decrease the juice I may gain from simple text links?
More posts by @Correia994
4 Comments
Sorted by latest first Latest Oldest Best
None of the answers so far answer your question about the impacts/benefits to SEO, so here goes:
The filetype used to make the "button" (jpeg, gif, png etc.) makes no material difference to your SEO
Using inline images (img) requires the use of alt attributes, which would be used as the anchor text for your linked button
CSS background images, or image replacement techniques can also be used to replace the anchor text with an image. If done correctly (there's lots of good resources on this), there will be no negative SEO impact.
Consider this however, one of the critical elements for mobile performance is speed (now a ranking factor) - so you should consider the need to add additional HTTP requests for those navigation images, rather than styling with CSS.
Check out this they have a ton of basically pre-done CSS and you can make great looking buttons by simply doing: <button class="btn">I'm a button</button>.
Though before using it I would suggest you learn a bit of CSS.
You can also create CSS buttons and have the best of both worlds, a nice looking button which functions on mouse hover down etc. Plus text on the button which is a little better I think than alt tags.
As for menus which are responsive it's pretty common for a select menu to appear in place of a horizontal menu on desktops or iPads. For examples you can review Canvas theme from Woothemes.
I would use .pngs, repeat the image to make a button (or just use a PNG button) and then place some text on the top of it. All can be done in CSS really easily. I would suggest looking at this - Add the CSS files they provide and then just add the class #button or #full -width button to all of your links. They are really simple and the framework as a whole is brilliant for developing on mobile devices.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.