• Read more about SEO Guide For Drupal

A few tweaks and modules later, Drupal has easy to build SEO friendly websites. To achieve it, there are two sides involved:

Below are a few things you can do to improve SEO on your website just by working with content (texts, images, files).

Text content

Title

When you create a page on a website, the page title you decide on is used in several different places so it's important to get it right and make sure it's clear and useful.

Page title will appear:

All of above are picked up by search engines, so it's important to include relevant keywords in your titles.

Page titles should be clear and descriptive. If titles are too long to fit into a menu, or if you want to have a different menu link then the page title you could use the 'menu link title' field to display.

Drupal has a feature that allows you to specify a 'menu link title', you can find this at the bottom of the edit page form in the “menu settings” tab > “Menu link title”.

Please note, spaces in titles will be converted into dashes in the url, so do not use  dashes in titles. Maybe you could replace dashes with a colon to avoid “double dashed” urls.

Meta description tag

The meta description is the excerpt that displays under the page title and site name on the search engine's results page. If it's not filled in, the body copy will be used instead. This may lead to a cut off excerpt, but you could manually fill the ‘meta description’, or use the ‘summary’ field to avoid it.

In Drupal, the body text field on a page is accompanied by a summary field. It is important to fill this in. Sometimes, it's used on the site as a teaser to promote users to click the page and read the full copy.  Remember, it will be picked up as the meta description for the page if no meta description was manually added.

Headings

When adding or editing content to the Body, in the WYSIWYG toolbar at the top of the text field, you'll see a dropdown with a few headings options. Commonly, you will have a choice of heading 2, heading 3, heading 4, and normal/paragraph.

When starting a new section on a page, use one of the headings defined in the dropdown. Headings are picked up by search engines and will contribute to your search rank.

Besides helping out with SEO, headings are designed to draw the reader's eye so that they are able to find what they were looking for much easier. They are also useful for good content structure if the copy is long.

For SEO purposes you should only have the h1 tag used once on a page. H1 is commonly the page title.

Anchor Texts

This is the text that links to something else. For example, if I would like to point you to the about us page, then the anchor text is the (commonly) blue text you see.

Search engines compare the text written in the anchor to the link “behind” it. So if they anchor text includes keywords or phrases that will add value over time.

Anchor text is read by screen readers so it plays an important role in complain with accessibility requirements.

Please make sure that your anchor text is also descriptive.

Length

As a general rule the copy should be as long as it needs to be. Online content is not read in the same way as printed content, so keep things concise, clear and straightforward bearing in mind the user experience, not only the SEO.

As a reference, some SEO advisers recommend around 200 words as a minimum for page copy.

Files (Images, documents)

Filenames

Filenames should follow the following convention to eliminate technical problems and to improve SEO.

Filenames should be also descriptive.

Some good examples are: mobomo-logo-red.jpg, partnership-agreement-2017.pdf

Reference: https://support.google.com/webmasters/answer/114016?hl=en

Alt Text

This is a descriptive text that appears if an image cannot be loaded and is also used by screen readers. So here SEO is directly implicated with Accessibility. It's especially important if the image also acts as a link.

This text should clearly describe the image.

Filesize

Main thing you should know about files in web: Large file sizes slow down page load.

Users tends to abandon pages if the load time is greater than 3 seconds. So search engines “don’t like” to direct users to slow sites.

So, you can help to keep the page speed to a minimum by making sure the files you add are light.

A general rule is to try to keep images filesize below 70k, this sometimes is hard especially with large images (banners for example), so let’s say images should not ever be larger than 600k.  

Format

All images should be saved in jpeg format.

Documents should be saved as pdf or doc (for editable documents).

Other

404 and 403 pages

We are going to set up these pages for you, but it’s important that you fill them with accurate content given your audience. For example, you could add a link to your Homepage here or to an Archive / Search page to help your audience finding what they were looking for.

Please note these points listed above are changes you can apply without any tech support, they are just Content edits you can apply by yourself when adding / updating content for your website.

Here’s a few SEO related Drupal modules that makes developers lives easier.

• Read more about Mobile Strategy: Website Or Application?

Every company should have a mobile strategy but first you need to decide what's right for your business - a mobile application or a responsive website? Sometimes companies have one or the other or they may have both. This is all depending on the company and how they reach their users.

Some businesses have to choose between a mobile website or a mobile app based on their budget, let's discuss the pros and cons so that you can make the most educated decision whenever you're deciding on your mobile strategy. 

Mobile Website

Reach: Probably the biggest  benefit the mobile website has over a mobile app is the amount of reach you have; you’re able to access a much larger audience because of its discoverability and marketing potential, and it has low barriers to entry.

Content Sharing: If your primary goal is content consumption, a mobile website will usually suffice. While apps have the ability to make content sharing easy with a great design, a website can do these things with less overhead.

Ships Fast: Generally, obtaining an model view presenter (MVP) for a website requires less resources than launching a mobile app.

Marketing: Marketing a mobile website is easier and more effective than marketing a mobile application. Two tactics in particular work very well with website: Search Engine Optimization (SEO) and Pay Per Click (PPC).

Some disadvantages are:

Functionality: Products with singular functions are generally better delivered via a mobile application than a mobile website. If you think of calendars or email, Uber or Instagram, you'll likely agree that these functions are more effectively delivered through mobile applications than a mobile website.

Mobile Application

User Experience: The biggest benefit of a mobile app is the rich experience it delivers. Think of the UX on Facebook, Spotify, and some of your other favorite apps. Chances are the experience on the mobile application version is much more satisfying than their website versions.

Stand alone services: Applications are ideal for products that offer stand alone services. Weather, health, and banking apps all provide singular services to the user.

Re-engagement: While marketing an application via App Store Optimization is not very effective, apps offer push notifications. Push notifications are a great way to call the user to act even when they’re not actively engaged with your brand or product.

Some of the disadvantages are:

Storage: There is a limited amount of space on a user’s phone and your app is taking up some of that valuable real estate, I think we can all say we’ve seen the message “Storage Full”. When a user gets that message, they are then forced to decide whether or not to keep the app. Generally, apps get deleted before photos, emails, or other personalized storage.                                                                                                                                                                            

Best of Both Worlds

If you’re unsure which route to take (and you don’t have the budget for two builds), then Progressive Web Apps are a great alternative.

By combining the best of the web and the best of app, Progressive Web Apps maintain a website’s far reach and an app’s exceptional UX. Some of the benefits:

If you have questions about which mobile strategy is right for you, feel free to reach out to us! If you’d like to learn more about some of the mobile strategies we’ve put into place, check out the mobile apps and responsive websites we’ve developed.

• Read more about On-Page SEO Guide

We know that your website content is great and valuable but what use is that content if no one can find it? We have created this on-page SEO guide to ensure your newly published content is well optimized and visible in organic search listings.

1. Keywords

Before we begin writing our content, we’ll want to determine a keyword focus for the copy. A great tool to help determine a keyword strategy is Google’s Keyword Planner. It provides data such as your monthly search volume as well as visibility into your competition. You can stay as broad as you would like with your search or you could narrow your search to include specific regions, cities, even languages.

2. Copy

After we’ve established a priority keyword to target, we’ll want to weave it into the copy. It’s important to remember here that keywords should only be placed in the copy when it’s natural. Don’t stuff the page with keywords! It is important to write for the user first and search engines second.

There is not a magic number of times a keyword should be placed in a page but generally, it’s best to place it in the title or in an <h1> or <h2> tag. If it makes sense to put it in another place, great! But don’t go overboard.

3. Images

Because we know you’re up to date on web design best practices, we know you’ll have beautiful images thoughtfully displayed throughout the page. These images can be optimized, too.

There are three key considerations when optimizing an image: size, title, and alt text.

4. URL

Your new page or post is going to need a URL. There is a lot to consider here, but here are a few best practices:

”Awesome Blog Post” - /blog/awesome-blog-post/

5.  Cross Linking

Cross linking is a great way to increase user engagement and a search engine’s overall understanding of your website. Does your new page or post mention:

If so, link to them! Continuously serving up relevant content to the user is a great way to keep them engaged in the website. In fact, you might like this post on SEO for single page applications.

6. MetaData

Metadata is data that helps to describe other data- simple right? Well metadata also helps search engines understand what a specific page is about, it is a piece of the SEO process.

If you follow these basic guidelines then you can sit back and watch the traffic roll in!

• Read more about Why Drupal? Secure, Scalable, Social! (Part 2 of 3)

With Drupal, both developers and non-developer admins can deploy a long list of robust functionalities right out-of-the-box. This powerful, open source CMS allows for easy content creation and editing, as well as seamless integration with numerous 3rd party platforms (including social media and e-commerce). Drupal is highly scalable, cloud-friendly, and highly intuitive. Did we mention it’s effectively-priced, too?

In our “Why Drupal?” 3-part series, we’ll highlight some features (many which you know you need, and others which you may not have even considered) that make Drupal a clear front-runner in the CMS market.

For a personalized synopsis of how your organization’s site can be built on or migrated to Drupal with amazing results, grab a free ticket to Drupal GovCon 2015 where you can speak with one of our site migration experts for free, or contact us through our website.

_______________________________

SEO + Social Networking:

Unlike other content software, Drupal does not get in the way of SEO or social networking. By using a properly built theme--as well as add-on modules--a highly optimized site can be created. There are even modules that will provide an SEO checklist and monitor the site’s SEO performance. The Metatags module ensures continued support for the latest metatags used by various social networking sites when content is shared from Drupal.

E-Commerce:

Drupal Commerce is an excellent e-commerce platform that uses Drupal’s native information architecture features. One can easily add desired fields to products and orders without having to write any code. There are numerous add-on modules for reports, order workflows, shipping calculators, payment processors, and other commerce-based tools.

Search:

Drupal’s native search functionality is strong. There is also a Search API module that allows site managers to build custom search widgets with layered search capabilities. Additionally, there are modules that enable integration of third-party search engines, such as Google Search Appliance and Apache Solr.

Third-Party Integration:

Drupal not only allows for the integration of search engines, but a long list of other tools, too. The Feeds module allows Drupal to consume structured data (for example, .xml and .json) from various sources. The consumed content can be manipulated and presented just like content that is created natively in Drupal. Content can also be exposed through a RESTful API using the Services module. The format and structure of the exposed content is also highly configurable, and requires no programming.

Taxonomy + Tagging:

Taxonomy and tagging are core Drupal features. The ability to create categories (dubbed “vocabularies” by Drupal) and then create unlimited terms within that vocabulary is connected to the platform’s robust information architecture. To make taxonomy even easier, Drupal even provides a drag-n-drop interface to organize the terms into a hierarchy, if needed. Content managers are able to use vocabularies for various functions, eliminating the need to replicate efforts. For example, a vocabulary could be used for both content tagging and making complex drop-down lists and user groups, or even building a menu structure.

Workflows:

There are a few contributor modules that provide workflow functionality in Drupal. They all provide common functionality along with unique features for various use cases. The most popular options are Maestro and Workbench.

Security:

Drupal has a dedicated security team that is very quick to react to vulnerabilities that are found in Drupal core as well as contributed modules. If a security issue is found within a contrib module, the security team will notify the module maintainer and give them a deadline to fix it. If the module does not get fixed by the deadline, the security team will issue an advisory recommending that the module be disabled, and will also classify the module as unsupported.

Cloud, Scalability, and Performance:

Drupal’s architecture makes it incredibly “cloud friendly”. It is easy to create a Drupal site that can be setup to auto-scale (i.e., add more servers during peak traffic times and shut them down when not needed). Some modules integrate with cloud storage such as S3. Further, Drupal is built for caching. By default, Drupal caches content in the database for quick delivery; support for other caching mechanisms (such as Memcache) can be added to make the caching lightning fast.

Multi-Site Deployments:

Drupal is architected to allow for multiple sites to share a single codebase. This feature is built-in and, unlike Wordpress, it does not require any cumbersome add-ons. This can be a tremendous benefit for customers who want to have multiple sites that share similar functionality. There are few--if any--limitations to a multi-site configuration. Each site can have its own modules and themes that are completely separate from the customer’s other sites.

Want to know other amazing functionalities that Drupal has to offer? Stay tuned for the final installment of our 3-part “Why Drupal?” series!

• Read more about SEO for Single Page Applications

Six months ago, our criteria for developing apps using Client Side MVC(Single Page Apps or SPA) or Server Side MVC was either: Client side MVC if SEO (search engine optimization) was of no concern or Server side MVC if it was...

This strategy however has proven less applicable as SPA's popularity grows and server side MVC continues its decline. We often run into projects that need both client side MVC and SEO. Since most search engines do not execute JavaScripts on the html pages and content on SPA pages are mostly generated by JavaScript, indexing Single Page App pages yields bad SEO results.

The SEO Solution

Using (our favorite) AngularJS, here is one approach to solving the SEO problem for Single Page Apps. Note: The same approach can be used for other frameworks (e.g. Backbone and Ember) as well. See links under Resources for more details.

Most search engines support the hashbang URL convention - when they see #! in a url, they will substitute it with ?_escaped_fragment_ instead.

For example:

http://example.com/#!/products 

will be indexed at the expanded url:

http://example.com/?_escaped_fragment_=/products  

So the idea is to store and serve the pre-rendered pages (snapshots) at the expanded urls. The snapshot of a page contains the DOM content already rendered out by JavaScript.

It takes several steps to make this work:

1. Enable hashbang on the client side

Since by default Angular routes (urls) uses the /#/ prefix, we need to use the following to make routes to use the /#!/ hashbang format.

$locationProvider.hashPrefix('!'); 

For apps that use the HTML5 pushState, we will need to add

<meta name="fragment" content="!"> 

to the <head> section of the to-be-indexed pages. In Angular apps, push state is enabled with:

$locationProvider.html5Mode(true);   

2. Route urls with escaped_fragment to cached pages on the server side

Rails/Sinatra - use Rack middleware to redirect to pre-rendered urls  Node/Express - use middleware to redirect to pre-rendered urls  Apache - use mod_rewrite to rewrite to the pre-rendered urls  Nginx - use proxy to the pre-rendered urls 

For Rails apps, you can determine in the Rack middleware if a request is coming from the crawler by checking if '_escaped_fragment' is present on the request and redirect to the pre-rendered urls:

query_hash = Rack::Utils.parse_query(request.query_string) if query_hash.has_key?('_escaped_fragment_')   # redirect to the pre-rendered urls   ... end 

3. Capture, store, and cache the pre-rendered snapshots

Do this on a regular basis, preferably as soon as content changes are made to the pages that need to be indexed. Note: Only capture SEO worthy pages.

There are a number of tools that can be used to take snapshots of web pages. PhantomJS, CasperJS, and Zombie are great options.

Here's an example of JavaScript that uses CasperJS (which uses PhantomJS and provides some nice higher level browser functions) to capture the page:

var casper = require('casper').create(); var url = 'http://localhost:3000/#!/';    casper.start(url, function() {   var js = this.evaluate(function() {     return document;   });   this.echo(js.all[0].outerHTML); }); casper.run(); 

You can parameterize something like this, and run it against all the pages that need to be indexed by the search engines.

Here are the screen shots of the Angular TodoMVC app (with Rails backend):

Screen Shot #1 - Original AngularJS rendered content

Screen Shot #2 - As crawler sees it, no content was indexed (simulated with JavaScript turned off in the browser)

Screen Shot #3 - Snapshot taken with CasperJS, served at the expanded url with all the content

As you can see, the snapshot (Screen Shot #3 above) has all the content from the original page (Screen Shot #1) sans styling, ready to be indexed by the crawlers.

SPA SEO Services

Not interested in the DIY method? Here are a few services that provide SEO for Single Page Apps:

• Prerender.io
• Brombone
• SEO.js

If you use Divshot (you should take a look if not), SPA SEO support is built in, they partnered with Prerender.io to bring you this nice feature. See the details here:

• Divshot SEO for Single Page Apps

Resources

• Backbone: SEO in JS Web Apps
• Ember: Make Your App Crawlable with Hashbang Location

• Read more about Utilize Canonical URLs in Your Rails Applications

Today came the announcement that all of the major search engines are going to support a ‘canonical’ URL hint that will allow site owners to specify a single URL for content that may be replicated across many URLs (such as for categories etc.).

To make use of this in Rails applications, I’ve written a plugin that allows you to easily specify canonical URLs for your content. To install it as a gem, just add this to your environment.rb:

config.gem 'mbleigh-canonical-url', :source => 'http://gems.github.com', :lib => 'canonical_url'

Using it is extremely simple; just add this to the <head> section of your layout:

<%= canonical_link_tag %>

And in your controllers, any time you want to specify a canonical URL you can do so like this:

class BlogController < ApplicationController   def show     @post = find_post # assume this is a standard blog post type record     canonical_url blog_post_path(post.year, post.month, post.day, post.slug)   end end

Now any time the show action is run, no matter how the routing came to be there, a single canonical URL will be shown in the header. If no canonical URL is specified in the controller (or through the canonical_link_tag helper directly) the helper will not output anything, making it completely harmless to add to any application.

The source for the plugin is available on GitHub. So go forth and canonize your applications!