Search engine optimization (SEO) is the process of optimization of a website, which main purpose is to make it more visible among results from search engines (such as Google). There are tons of practices, tricks and tips that can be applied to improve a website in terms of SEO. Lets start with some basics.
It’s all about the phrases
Most people want to improve their position on search engines in terms of specific phrases. For instance, company selling their products would want to position their website for keywords including name and brand of their products. Obviously, the more unusual products, the easier it is to position it. Before starting any work, we have to understand that we do not position the whole website for a specific group of keywords. The best practice, in my opinion, is to create so called “Landing Pages”, which are pages created for a particular topic to position it for a specific search engine.
Add a sitemap
You should also start creating sitemaps, as soon as possible, if you haven’t done that yet. What are sitemaps? As www.sitemaps.org states: “Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling.”. This way Google and other search engines will crawl our websites much faster. They will also reach deep to the pages that might have been skipped otherwise. Although there are plenty of Rails gems (such as: sitemap_generator, rails-sitemap or dynamic_sitemaps) that help developers to generate sitemaps, I strongly recommend to do it yourself. Here is a simple sitemaps controller example:
class SitemapsController < ApplicationController SHOW_CACHE_EXPIRATION = 1.hour layout :false before_filter :init_sitemap def index @articles = Article.all end private def init_sitemap headers['Content-Type'] = 'application/xml' shopikon_expires_in SHOW_CACHE_EXPIRATION, public: true @sitemap = Sitemap.new end end
And a simple view for such action:
xml.instruct! :xml, version: '1.0' xml.tag! 'sitemapindex', 'xmlns' => "http://www.sitemaps.org/schemas/sitemap/0.9" do @articles.each do |article| @sitemap.add_link xml.tag! 'sitemap' do xml.tag! 'loc', path_to_article end end end
And that’s it! If you create sitemaps yourself, you have full control
over it’s content. It is worth mentioning that Google (or other
crawlers) will most likely visit all pages that are linked from pages
listed inside sitemap. If you want to avoid it, you can blacklist them
using robots.txt or with the following tag included in
<meta name="robots" content="noindex">.
Making your content discoverable with Landing Pages
Another good idea it to point to LPs (Landing Pages) via some kind of sidebar or internal ads. This way crawlers will crawl it much faster. The purpose of those landing Pages is to lure users and Google to our site. Landing Pages should include some kind of access points/navigation to other sites. So let’s say my website features bicycles, and I want to position it for “The best bicycles” phrase (or keywords “best”, “bicycles”), I have to create a landing page which is about “The best bicycles”. In many cases those landing pages are articles, news, blog posts, product details sites, or any other websites that are covering one topic at a time. The point is, that they should include some unique and valuable content such as a good article covering the subject, and/or some good photos if possible. Search engines, especially Google, are quite good at identifying artificial content or duplicated website content.
The first step is to form a proper URL of our landing page, or to come up with a good pattern for all of our future landing pages. The URL needs to be short and readable. It needs to include our phrase to indicate straight away what the website is about. Let’s say that we agree that our landing pages are articles on our blog. Our URL should be similar to this one:
The “/a/” represents article, so if it’s a blog post is should be “domain/bp/blog-post-title”. If it’s a product details page it should be “domain/p/product-name”. The most important thing is that the part after “/a/” should be unique and it should identify website content. Why “/a/” instead of “/article/” someone might ask? Assuming that Google take care of URL formats, we want to have only meaningful words in it(such as domain and slug - which is representation of our topic). Additional important tip is to replace all special characters, underscores for all the article titles, with the hyphens(“-”). For unknown reasons, Google treats them much better than underscores. Below is a simple Rails routing for such LPs:
get 'a/:slug', slug: /[a-z-]+\w+/i, to: 'articles#show', as: :article # assuming you are using all generated actions resources :articles, except: :show
Now that we know what do, we want the next step is how to do it. Let’s start with the meta data of our website. It has to include title tag, which in our example should look like this:
<title>The best bicycles</title>
The next one, is meta tag with description of this specific landing page. It should be a sentence or two about the content of the page. It’s recommended length is something between 150-160 characters, since most search engines truncate it automatically to 160 characters. A good practice is also to end it with a “call to action” - something like “Read more on Amberbit!”.
<meta content="Are you interested in bicycles? Do you like Mountain biking? Or maybe chillin sunday ride over the park?. Read more on AmberBit!" name="description">
The important thing about those two HTML tags is that they have to be unique through all of our landing pages. Google Webmaster Tools or other SEO tools such as Raven Tools always points to them while evaluating/crawling website. I’ll try to cover the benefits of using those tools in one of my next articles.
Simplicity is the key to success
Your content should be served first
Move your CSS to the top of the document. The first TCP packet of content that your browser is downloading equals to 1460 bytes. If this packet includes everything it need to start rendering the content, it totally will! It should not only include link to your CSS files (since it’s not recommended to use internal CSS styling) but also DNS prefetch tags. What are these? They are simple links with hrefs to all of external domains/services that we use on our website. If you use Amazon S3 or CloudFront for hosting your assets, or just images, add dns-prefetch tag so that the browser could identify it much faster and so that it won’t have to wait for it later on. An example of such tag:
<link rel="dns-prefetch" href="http://cdn.mydomain.com">
If you use Google Analytics you should also add it to dns-prefetch:
<link rel="dns-prefetch" href="http://www.google-analytics.com">
Switch on HTTPS
I suggest to always include full protocol in the links since later on it’s much easier to switch to HTTPS if needed. By the way, you should enable HTTPS protocol for your web site if you want to be higher in the ranking. The good idea is to redirect requests from HTTP to HTTPS with proper status 301. Thankfully, Rails has this functionality built-in .
Post by Paweł Sobolewski