Better SEOThe search engine optimization (SEO) process helps to ensure that your content is accessible to search engines and that your topics match your audience’s search terms. Having someone available, whether a consultant or a staff member, to advocate for SEO as part of your production process will reap rewards such as more visits to your website from people actually interested in your products, services, or organization.

Search problem

The marketing manager for a product at global technology company, henceforth referred to as Brand X, engaged with Resources Online to improve the product’s visibility in Google search results for very competitive terms and to increase the percentage of traffic coming from organic search. (Organic search is the results the search engine delivers based on relevance versus results listed because they were paid for, i.e. ads. Users trust organic search results more than paid results.)  The company’s content development processes at that time did not include SEO considerations. Content was marketing-driven and lacked keywords. The details of basic on-page optimization—including metadata, image optimization, and other considerations—were left up to the developers who didn’t have SEO training or, worse, to nobody. The company’s website structure was also not search-engine friendly.

SEO approach

Resources Online started off by conducting keyword research on the product to understand how customers were searching for similar products and services, using generic terms, synonyms, and related terms. We then updated the webpages to include the most popular terms. This helped to ensure that the actual page content matched searchers’ queries. Throughout the process, our SEO specialists educated the Brand X marketing team about what search engines look for in terms of content length, topics, and substance, and we explored how to best meet those needs.

With a scheduled site redesign in the works, we also took the time to remove spider barriers and to make the site search-engine friendly. Spiders are code the search engines use to check pages on a website and identify and pull information that is then used by the search engine algorithms to deliver search results. If the spiders can’t effectively crawl your website and find key information, it negatively affects your site’s rankings.

Search engine results

Ranking. By knowing which high-volume keywords were important to track, we were able to refine and re-focus tracking of search rank. Year over year, the number of tracked business-critical generic keywords showed improvement in Google search results as follows:

  • 100%: The number of keywords in position #1 doubled.
  • 39%: Keywords on page 1
  • 35%: Keywords on pages 1 and 2
  • 20%: Average position of all tracked keywords

Number of keywords on page

Organic traffic. By revising metadata to make it more compelling and user-focused and by adding keywords, Brand X experienced the following traffic improvements:

  • 30%: The number of sessions from organic search engines
  • 25%: The number of new users coming to the site

Conversions. Better keyword targeting brought more qualified searchers to the site:

  • 54%: Purchase page clicks
  • 98%: Product trial sign-up page completions
  • 150%: Demo sign-up completions from organic

Configuration. We worked with the development team to:

  • Ensure that international content was delivered to the correct country or region, by applying hreflang tags.
  • Eliminate duplicate content, through the use of canonical URLs.
  • Capture link equity, by converting unnecessary 302 redirects to 301s.

Indexation. We added sitemap.xml files and removed spider barriers, thus allowing more pages to be indexed and found through search.

Number of pages indexed by SEO spiders

Building a strong SEO foundation and doing the ongoing SEO work takes time, persistence, and education, but the impact on traffic, discoverability, and conversions can be enormous. Ultimately drawing the right traffic to your site can result in the downloads or sales that directly impact your bottom line.

Posted in SEO.

Protecting your wordpress site from hackers

If you’re hosting a WordPress site, you’re likely already aware of the need for security. But you may not know just how complicated it is to set up and maintain a really secure website. It can be even more complex than designing the site itself or developing the content.

This articles covers a number of steps Resources Online routinely takes to make websites secure. It assumes a basic familiarity with WordPress, but not much more. To get technical details on the recommended solutions, do a quick online search.

Keep WordPress and your plugins up to date

This is the single most important thing you can do. Because WordPress is so widely used, when vulnerabilities are discovered, attackers know that there are many susceptible websites. There were six WordPress core security updates last year alone, along with many more plugin updates.

It’s critical that you continually monitor and patch your site.

The WordPress core application has the ability to automatically update whenever a new version is released. Automatic updates are also available for certain plugins. If your website is not that complex and you’re comfortable with code changes to your site without a thorough review, turn on automatic updates. In new installations of WordPress, this is on by default. Follow WordPress instructions to manually turn on automatic updates.

If your website is complex or you’re worried that an automatic update may break it, set up a testing environment and manually update WordPress. Modern versions of WordPress actually make this quite simple. The Updates page on your WordPress site shows a list of all available releases. You can install them individually or all at once with just a few mouse clicks.

If you have a lot of plugins, consider updating them a few at a time and, as you go, verify that the website still functions properly. This way, you can isolate the source of any potential problems caused during the update process. After you’ve made all the updates and verified the site functionality in your testing environment, follow the same process on the production site.

Note for developers: obviously, modifying WordPress core code or plugin code makes it very difficult to update plugins and stay secure. Use care!

WPImage749x756

Maintain good login security

Having secure code doesn’t help if you leave the front door open. One of the most common causes of WordPress site outages is the brute force login attack. That’s where an attacker writes code that repeatedly tries different passwords to log in to your site.

Take these steps to defend against this type of attack:

  • Always use strong passwords.
  • Disable the default admin account (a common target of attacks).
  • Limit user roles to only specific, required functions. For example, don’t make everyone an admin.
  • Rename the login page to something non-standard, so attackers can’t find the page. We have had good success with the Rename wp-login.php plugin.
  • Install a plugin to limit brute force attacks, force strong passwords, and force password expiration. If you are not installing a more comprehensive security plugin, try this Login Security Solution from WordPress.

Pick your plugins carefully

Every plugin you install on your site potentially contains vulnerable code. Virtually anyone can write and offer a plugin. Look for plugins that:

  • Are highly rated.
  • Have a large numbers of installs.
  • Are offered by reliable sources.
  • Have good user reviews.
  • Show frequent updates (indicating they are being maintained).
  • Are available on WordPress.org.

Some plugins have write access to your WordPress files and directories. A malicious or vulnerable plugin with that kind of access has complete control over your site. Be very cautious with these. And, in general, limit your plugins to only those you need, delete any unused plugins, and carefully consider the trade-offs when adding new ones.

Install a good WordPress security plugin

There are dozens of different steps and techniques available to properly secure a WordPress site. Installing a WordPress security plugin simplifies this process for developers and for less technical users. Security plugins can conflict with one another, so if you install more than one, be careful to select compatible plugins. Our favorite security plugins include:

BulletProof security, which provides more of a firewall, detecting and blocking malicious traffic before it gets to your WordPress installation. It does this through a series of rules defined in the Apache .htaccess file. Installation is simple: use the setup wizard, and select the options you prefer. The plugin generates and saves the correct .htaccess file to your web server.

Wordfence, which provides security from within WordPress itself. It not only provides basic firewall-level intrusion prevention, but also it:

  • Scans for infected files.
  • Compares all of your core and plugin files against the original versions.
  • Shows you real-time traffic to your site, which can allow you to detect and troubleshoot attacks.
  • Protects against brute force attacks.
  • Monitors disk space.
  • Logs traffic, allowing you to investigate issues.

We like using BulletProof security and Wordfence together because of their complementary features.

Back up your site!

Disasters, such as site corruption or hacker-caused data loss, are a lot easier to deal with if you know that you have a good backup of all of your code and content. Install a plugin to make daily backups of your website, including the code and database. Make sure to back up your server, as well. And test your backup to make certain it that can actually be restored.

Our favorite free backup plugin is UpdraftPlus. It supports automated backups, prunes old backups, does remote storage to Dropbox, and will even automatically back up your site and database at the moment you are installing new plugins, allowing for an easy rollback if something breaks. The paid plugin BackupBuddy is also an alternative to consider.

Monitor and maintain

Your site won’t stay secure on its own. You need to monitor your security logs, apply regular updates, look for suspicious or abnormal activity, verify that your backups are still working, and keep an eye on your database size and available disk space.

Your security plugin helps by notifying you of issues via email, but there’s no substitute for periodically logging in and checking things out.

For more information

Here’s to keeping your site safe and secure!

Brick LayerIf you’re even slightly familiar with search engine optimization (SEO), you know that SEO requires constant and steady work, like laying bricks, to drive and keep your page high in search results. It takes time and consistent effort to rise in the rankings and to stay there. You also understand the importance of creating good content focused on the right topics and keywords, plus the need to acquire authoritative backlinks.

Build a well-structured site

For a site to be found in search, the search engine’s online robots must first crawl it—that means the robot walks through all of your site pages to create a map, and it categorizes the contents of each page. Your site structure and form can make this much easier:

  • Create discrete pages, each focused on a single, specific topic that corresponds to users’ specific keywords/searches. This allows the engines to clearly know which pages should surface for which keyword search.
  • Use a broad-to-narrow approach, if necessary (that is, a broad topic page that links to pages on narrower sub-topics).
  • Avoid creating more than two levels of folder structure. Instead, keep the site structure as you flat as you can, placing the most important pages closer to the root.
  • Create a clear navigation structure. This is better for usability anyway. Basically, if showed your menu structure as an outline, would a random person be able to understand it? If so, chances are that the search engines will, too.
  • Make it easy for engines to map your site by providing an actual map for them. See http://www.sitemaps.org/ for information about sitemaps.
  • Consider also using the schema element to tell search engines about your site structure. For example, if you run a restaurant, your schema would have sections for menu, hours of operation, location, reviews, and reservations. If you use the correct schema elements, search engines can actually display all of these items right on the search results page.

Use correct semantic structure

In addition to creating a logical site structure, make sure that you use the correct technical tagging and methods. To some extent, your site needs to speak the language of the search engines. Be sure to:

  • Use clear page-naming conventions. Pick your structure, and stick with it. Make sure that you use real-language URLs, even if they are wordy. Someone reading the last part of your URL should know what the page is about, such as /creating-videos-with-adobe-premiere-on-mac.
  • Include any blog or related assets as a subfolder or subdomain, so that they accrue SEO benefits to the home domain. For example, our blog uses www.ronline.com/blog, accruing SEO benefits to the main site at ronline.com.
  • Use valid, semantically correct HTML. Errors in HTML can cause the engines to bypass a page or to lower its ranking. For example, all headers should use header tags (such as H1, H2, or H3). The engines look for these tags and check the keywords in them to help determine the main topics on the page.
  • Where you use images, always add alt text. Since they can’t read images, the engines use the text as a proxy to determine what the image is about.
  • Include a Title and Description metadata tag on every page. They are critical to search results.

Keep important content visible on the page

Images, videos, widgets—we pack a lot into our websites. But not all of these are visible to search engines. Problems result when key information—information that could help with your ranking—is buried in a format that search engines can’t plumb. Here’s how you can avoid problems:

  • Don’t embed text in images. For example, if you have a header with your tagline, and the header is an image, Google and Bing can’t read the text in the image. So, the tagline is lost to them.
  • Similarly, don’t bury important information in Flash, Silverlight, or videos.
  • If you use widgets to pull in content, try to ensure that the content is considered “on the page” rather than embedded. For example, JavaScript-dependent content can’t be indexed. If the content is not in the page’s raw HTML as served up by the server itself, that phantom content won’t accrue SEO benefits to your page.
  • If you have dynamic content or links that are accessed via JavaScript, provide an alternative HTML structure just for search engines that allows them to find your content without executing JavaScript.

Build for measurement

As you know, SEO is an ongoing activity, and you need to be able to track how you’re doing and to make improvements where necessary. To get basic reporting, add analytics to your site:

  • Properly install Google analytics and/or another analytics package on the site and its pages.
  • Set up goals in Google Analytics, based on your business needs and site design. You might want to measure, for instance, how many sign-ups happened on forms and to track the paths the users followed before completing that action. Goals help you do this.
  • If you’re redesigning an existing website, gather any baseline data from previous versions of the site, for comparison purposes.
  • Make sure assets on subdomains or folders use the same analytics code, so you can trace traffic from them.
  • Set up regular reports that you can analyze at least quarterly.

Put the user and content first

SEO is important, but all of Google’s and Bing’s search algorithms are designed to surface the right content at the right time. That means that, first and foremost, you need to provide good content on specific topics. Most of us can’t sacrifice usability for SEO:

  • Include pages that cover specific topics and questions that your target customers will search for, within contexts relevant to your business goals. For example, if your customers will be asking “How do I?” questions for which your product or service is a solution, add pages for those questions.
  • Write helpful content, and write it well. The search engines penalize pages with typos and poor grammar. Guess what? So do users.
  • Make sure the structure supports copious cross-site links. Cross-links (links between pages on your site) are good for SEO and, when chosen well, they also support the readers’ search for additional or related information.
  • Design the site for regular—preferably frequent—content updates. The search engines credit websites that are kept up-to-date. When you update your website with current content, you also increase the chances that people searching for the latest info will come to you.
  • Provide and share content that others want to link to. This gets to the backlink issue. Ideally, you want pages on your website that provide information or entertainment valuable enough that other authoritative websites or bloggers link to them. That will greatly help your ranking.
  • Practice good, audience-focused writing techniques. Write for your audience, using the terms they understand. If you’re doing that right, your pages have a better chance of appearing when the right keywords are searched. If you need some help, you can also use Google’s tools to research keywords for your industry.

To achieve high SEO, there is a lot required on the content side of the equation. Build that content on a solid foundation using these basic steps and watch as, over time, your site gains authority and improved ranking in search.

Mobile devices now make up 28 percent of total web traffic, but many websites look and behave poorly on phones. I’m sure you’ve experienced the frustration of trying to use a website on your phone that was not designed for mobile. Take a look at these examples of sites that could do a much better job for their mobile visitors. The pages and fonts are so small that you must zoom in to the point context is lost. Too often, sites have problems like this, with important pages and functionality that don’t work at all.

Mobile website with problem 1 Mobile website with problem 2 Mobile website with problem 3


Until recently, the best solution was to build multiple versions of your site for each type of device. This solution was expensive and time-consuming, and it required a lot of duplication of content. A new approach has emerged, called responsive web design. Responsive web design means you build your site only once, but you do so in a way that lets it look and work great on phones, tablets, and PCs.

How does responsive web design work?

Simply put, you design your content and layout so that, as the screen size changes, the content and layout rearrange themselves on the webpage to fit into the new space. Here’s an example of the same website on three different screen sizes:

Caradigm Website Desktop

Here is the same website when viewed on a tablet-sized device:

Caradigm on Tablet

Here it is when viewed on a phone:

Caradigm Website on Mobile Phone

Key things to notice:

  • The content is the same on all three screens, but the page layout changes and images are shrunk down in size or cropped.
  • The menus at the top of the desktop page won’t work so well on mobile. So, on a mobile device, the whole menu shrinks down to one small button, often called a hamburger. You click this button to see the whole menu, and you click it again to hide it.

You can experiment with this effect yourself, right on your desktop. Go to this site that we built, http://www.caradigm.com, and change the width of your browser window. As your browser window gets narrower, you see the layout change.

How does a responsive design affect website content?

If you want a mobile-friendly website, keep the small screen experience in mind when creating website content. Those lengthy, clever headlines and voluminous paragraphs that some marketers are tempted to write simply don’t work on mobile. Nor do highly detailed images and complex page layouts, such as product comparison tables and diagrams. Some considerations for creating content that works across all screens include:

  • If you have a significant mobile audience, pick content and features based on activities that these users commonly do, such as read on the bus or save content for deeper review later.
  • Write your headlines for mobile first—a shorter headline will always work on the desktop, but a longer headline will not always work on mobile devices.
  • Break your body copy up into smaller, more easily consumed chunks of information. This is a web content best practice anyway, but it’s even more critical for mobile readers.
  • Plan your page layout using grids. Grids work well in responsive design because content in columns and rows can easily be placed in a new layout with fewer columns, without breaking the flow of content.
  • If you use a lot of photography or images for branding, of course you’d prefer to preserve that creative approach and to keep it consistent across all screens. But the requirements of showing an image on a 14-inch-wide screen desktop are much different from those for a 2-inch-wide phone screen. One effective approach is to use photography and images that work well when the left and right sides are cropped. Then you still have the high-impact widescreen image on the desktop, and you have a carefully cropped and sized image for mobile devices—one that still communicates your brand but does so in a more compact way.
  • If you have highly complex images, diagrams, and other visual communication elements, plan on having simpler alternatives that can appear on smaller screens—or eliminate them entirely.

Doesn’t this limit my design options?

Yes, but within reason and for a good cause. We’ve all gotten used to designing websites for which we have complete control over where everything appears. We can have all kinds of fancy overlapping elements with drop shadows, gradient shading, complex layout of content, and highly interactive animations. But the reality is that many of your users are irritated by this kind of design on mobile devices. They require a different approach. Some considerations for mobile design include:

  • Stick to the grid. Modern responsive design frameworks require that the design be done on a grid. Don’t design elements that don’t fit within the grid. Try to track down a Photoshop template file that was created for the responsive framework your development team has selected.
  • Select images much more carefully to support either scaling up and down or that can be cropped to work well with different aspect ratios and screen sizes.
  • Design for fingers. Fingertips are generally between 40 and 80 pixels wide, meaning that click targets should be a minimum of 30 to 40 pixels in size.
  • Think about the mobile experience while designing the desktop. Don’t tack mobile design onto the end of your design process. Doing so will just result in rework.
  • Create lightweight designs that load quickly.
  • Consider letting your developer do the initial mobile design. This may seem crazy, but it can be quite effective to have your developer build a few pages out of your desktop design and then see how they look on mobile. You can use that as a starting point for tweaking the mobile experience. This works because your developer will be using a mobile framework, such as Bootstrap or Foundation, which automatically lays out your desktop experience for mobile. This is a lot less work than building duplicate Photoshop files for mobile for every page template on the site (a method which isn’t even feasible when your framework won’t cooperate with your ideas).

Here’s an example of a Bootstrap-compatible design in Photoshop on a 12-column grid:

Responsive Design Grid

 

What else should I know?

There are a few key considerations that marketing managers and site managers should understand before working with developers on a mobile site, including:

  • The most exciting development in responsive design is the availability of responsive web design frameworks, such as Bootstrap and Foundation. These third-party libraries are open source, free to download, quickly customizable, and based on CSS and JavaScript. Using these frameworks, we’ve found you can cut your mobile and desktop HTML development effort by 80 percent. Gone are the days when you have to write and debug your HTML to work on 20 different mobile phones and eight different desktop browser versions.
  • Ideally, you select your responsive design framework before beginning site design. This enables you to communicate the framework requirements to the designer and allows the designer to create a design that works well with your selected framework. The framework might have certain settings for gutters, margins, and column layouts. There may be Photoshop templates you can deliver to the designer. And the framework will have predefined controls such, as drop-downs and edit boxes.
  • After you receive completed desktop designs, ask your developers to build the first few pages of the desktop experience. You might also consider mobile first. This design approach states that designing for mobile first actually produces a better, more customer focused desktop site.
  • Test those desktop pages on narrower viewports, and work with the designer to tweak the mobile design. You may find that your responsive framework does a pretty good job but that it needs some additional work to match the overall site design. You may also find that some elements of the desktop design need to be changed because they will never work well on mobile.
  • Test page-load performance on mobile devices. You’ve probably gotten away with some heavyweight pages on the desktop with high-speed connections, but your mobile users will notice un-optimized images, bloated JavaScript, and slow pages immediately. You risk having mobile users abandon your site.
  • Although frameworks do a lot of the device and browser compatibility work for you, you still need to test and tweak, at least on the iPhone with iOS 7, Android 2.3 and 4.x, Android tablets, iPads and iPad minis, and Surface tablets. And, on the desktop, you should cover Chrome, Internet Explorer (9, 10, and 11), and Firefox.

Building websites for different sized screens is a critical step for most organizations that value traffic to their sites. By planning ahead for mobile content, creating designs that work on the desktop and the phone, and building a responsive website using a framework, you can produce a beautiful, functional site that delights your visitors.