Tag Archives: Mobile SEO

chompdigital

WordPress Front-End SEO Plugin – Titles, Meta Descriptions & H1’s



After weeks of researching available WP plugins catering to SEO, I found that no such plugin existed in the community and so I decided to develop one myself. Between all of the highest in quality SEO plugins for WordPress, none of them seem to have any user friendly front-end editing options and all share similar features. When it comes to adjusting a WordPress websites SEO it can be a time consuming process because you have to visit each page or post on the back-end of WP in order to make your edits. As web developers we appreciate tools that enable us to work faster, smarter and not harder. With that in mind, I created the first ever stand-alone front end, Ajax driven, SEO editing plugin for WordPress websites.

With my new 2013 SEO front end WordPress plugin, you have the ability to edit post and page meta information when directly viewing the page. This saves you half the amount of time it takes to edit your sites SEO if you compare it to your natural habits of optimizing in WordPress.

WordPress Front-End SEO Plugin

Now let’s dive into how it works.
After installing and activating the plugin you will notice a green tab that will appear across the front-end of the site labeled “SEO”. When clicking on the new tab a popup form will appear, showing you your current meta title, meta description and main page or post H1 title. Currently this plugin is defaulted to work directly with the Yoast SEO plugin but don’t worry it can work with any other WordPress SEO plugin that is supported by meta keys. If you already have Yoast SEO installed you’re ready to go out of the box and may begin editing your SEO instantly. If you’re not using the Yoast plugin, open up the plugin file and change the current Yoast post meta keys to match your current SEO plugin meta keys. That’s all!

Download The Newest Version – 2.1
*Some themes and plugins may have conflicts.

Change log 3/28/13 1:30am v2.0:
*Fresh new look
*Freshened up Ajax and Jquery
*Compressed CSS and removed inset borders
*Now in a mobile friendly and responsive design (Edit your meta on the go, woohoo!)
*Added live character count for meta title and description.
Meta Title: 76
Meta Description: 145

 

Download the plugin and test it out!

If I’ve made your optimizing life easier,  leave your comments. 

chompdigital

Jetpacks MiniLeven – Use It, Customize It & Be Transparent



Reaching your customers and visitors on mobile is a must these days and I’m going to show you how you can easily take advantage on your WordPress site using the Jetpack Mobile Theme called “MiniLeven”. In this overview, I will be going over some simple how-to’s, how to customize the MiniLeven theme and go over why it’s important to be transparent between desktop and mobile devices. Now let’s get mobile.

How-To Activate & Install Jetpack MiniLeven Mobile Theme

Activating the MiniLeven theme is quite easy, all you have to do is install Jetpack, enable it, and then click activate on the mobile theme option as seen below. Don’t worry too much if your visitors happen to see the default design when active because I’m going to show you how to fix that in a matter of minutes. After you have activated the mobile theme pack you’ll want to check things over from your mobile device and make sure that everything is being displayed properly. When I say properly, I mean check to see that the correct menu items are showing, posts, pages etc. If you have a custom theme installed Jetpack mobile might not work to your advantage, a simple click on deactivate will fix that and put your site right back to normal.

MiniLeven Jetpack Theme

After you have done all of the above and everything looks kosher, let’s start digging into improving the current setup and go over the basic items that are integrated out of the box.

How To Improve The Jetpack MiniLeven Theme

Improving this theme is quite simple and there’s only few items that you may want to consider adding to it. Out of the box, MiniLeven offers a clean crisp look and has all the standard features that we’re all accustomed to using that WordPress has to offer. Remember if you’re using a custom theme MiniLeven will not support items like custom sidebars, custom post template etc. Knowing that this theme might not give you everything you want, it does make your site more user friendly and will help improve the transparency and quality of your site.

One of the first things you will notice that needs improvement is the use of custom menus. This theme currently does not support custom menus but there are ways to fix this and one of them is by using the “Exclude Pages” plugin. The Exclude Pages plugin will allow you to remove any pages from the default page list that WordPress uses to create menu items based on the order of your pages. If you’re currently using custom menus for your desktop version this plugin will not effect it and will not remove any menu items that you have already created. Now I know I just mentioned installing a plugin and if you read my last post about Speeding Up WordPress For Better SEO then you already know that I do not recommend installing a lot of plugins. After you have tackled this small improvement you should look things over once again from your mobile device(iPhone, iPad, Android etc.) just to make sure that your menu items are exactly the way you want them and that you’ve got a good handle on how to setup your menu for mobile.

As you can tell, I only went over one thing on how to improve this theme and do you know why? The answer is “Simplicity”. You do not need to get carried away and stuff every addon or feature known to man on the mobile version of a website. Think about your readers. Do you think your mobile readers/visitors want to see a lot of unnecessary content or ads, most likely not. With a smaller screen, it’s wise to take in consideration of what’s really needed on mobile and what’s not. Save your custom goodies for the desktop and serve your pop up ads and social widgets there. To me, mobile sites are even more for the reader than desktop and they should be easy to read and easy to follow. Another thing to consider is speed and factoring in mobile SEO.

Customizing The MiniLeven Theme & Mobile SEO

Customizing the MiniLeven is just as easy as modifying a basic WordPress template. You do not need to be pro in order to make changes, you just need to know the basics in CSS and HTML for most of it. If you want to add custom features like a different comment tool or social integration, this will require some knowledge of the WP codex and minor php.  Now let’s start diving in and customizing your MiniLeven theme to match your desktop site.

Changing The Colors To Match Your Branded Site

  1.  Download and open the following file located here: /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css

The first thing you’ll want to do is change the navigation, highlights, border colors etc. to match your current desktop theme. All color changes will be done using CSS only in the style.css file.

minileven-screenshot

Below are some of the basic and common styles that you’ll want to change first to help get you started with styling your mobile theme. All you have to do here is change the color hex to match your desktop theme.

.page-title{color: #666}
.menu-search{background: #222}
.search-form #s{background: #222; border: 1px solid #00587f }
#access ul.nav-menu{background: #fff}
.main-small-navigation .menu{background: #f9f9f9; border: 1px solid #e9e9e9}
#access ul li{border-bottom: 1px solid rgba( 0, 0, 0, 0.1 )}



Pretty simple right? If you’re happy with the way things look after making these changes you’re ready to move on to the custom stuff. Before I dive in and teach you how to implement custom features and addons, backup the entire MiniLeven theme that you have just made changes too and save a copy to your desktop. Always play it safe and keep a copy of your work just in-case you need to revert back to your most recent major changes.