How to use Keywords for SEO and Web Sustainability

Advertise here with BSA

Keyword optimization is a well-known strategy for helping people find your content, both through search engines and when searching within a website. But did you know that by following SEO best practices you could also be making your website greener? That’s because web servers and devices that consumers use to browse the internet both use electricity. A lot of electricity. And most electricity is generated by sources that are not renewable or clean.

The more findable content is, the less irrelevant content a person needs to go through to find what they are looking for. Fewer pages loaded means fewer server requests are being made, and that fewer photos and videos are being loaded. In some cases, the customer may also end up spending a little less time on their phone, tablet or computer. All of that results in tiny energy savings, and those savings add up.

Now that you understand the connection between findability and sustainability, let’s take a detailed look at how to improve the findability of content through page level keyword optimization, a popular SEO technique.

Keyword Optimization: Where to Place Focus Keywords

In order to optimize a page for a focus keyword, you need to place it in a number of different places on a page. With the exception of your homepage or landing pages where you may need to optimize for several keywords related to your products and service offerings, in general, you want to optimize a page for a single keyword or keyword phrase.

After you’ve selected a focus keyword for a page, here is where you need to place it:

In the Title Tag of Each Page

The first place that you want to put your focus keyword or keywords is in the title tag of each page.

Examples of an optimized title for a homepage:

  • Electronics, Cars, Fashion, Collectibles, Coupons and More Online Shopping | eBay
  • Shoes, Clothing, and More | Zappos.com
  • Shop clothes for women, men, maternity, baby, and kids | Gap

Examples of an optimized title for a subpage:

  • Electronics | eBay
  • Popular Men’s Shoe Styles | Zappos.com
  • Womens Clothes: jeans, tops, skirts, dresses, pants | Gap

Optimized title tags have certain characteristics:

  • Avoid the use of duplicate title tags: Every page should have a unique title so that your pages are not competing with each
    other for relevance.
  • Optimized titles should be 70 characters or less.
  • Put company name at the end of your title tag to help build brand awareness.
  • Use consistent punctuation across all page titles in between your keyword and company name.
  • Balance keyword usage with usability, considering what language would be most compelling to the reader.

In the Description Tag of Each Page

The next place that you want to put your focus keyword(s) is in the description tag of each page. This is the brief description that shows up in search results, or when you share a page on Facebook or LinkedIn. While this description should be written for humans and not for search engines, you should include your keyword at least once. Write your descriptions in plain English, using compelling language that would make a customer want to click on a link. Optimized page descriptions should be 150 characters or less. Longer descriptions will be truncated in Google with an ellipses (…).

In the Main Body of your Content

Include your focus keyword 2-3 times, including once in the first paragraph of the page. In general, search engines are going to read things that appear in order first and they may or may not get around to reading things that appear lower on a page. It’s recommended that copy on each page be a minimum of 300 words for SEO purposes.

In a Heading within the Article

Headings, which are often labeled “Heading 1, Heading 2, Heading 3″, etc. or “H1, H2, H3″ in a content management system, help summarize a page’s contents.

Headings should be written to both include focus keywords, and to summarize what comes next. This helps people, and spiders, scan a page quickly to see what’s most relevant to them. It’s also an accessibility best practice, because screen readers enable visually impaired people to jump from heading to heading so that they can quickly get to the section that’s most relevant to them. When you think about it, the spiders that crawl websites also can’t see: they can’t see photos, multimedia content, or fancy font styles on a page. So it makes a lot of sense that SEO best practices are also often accessibility best practices.

How to use Keywords for SEO and Web Sustainability

This example from the Gap shows headings that help customers navigate to the style of jeans that they’re looking for.

Within your Page URL

Another place that you should put your focus keyword is within the URL of your page. Here’s an example from this post:

How to use Keywords for SEO and Web Sustainability

In this example, we’ve optimized the URL for the terms “SEO,” “keywords,” and “sustainability.”
Sometimes it’s not practical to include your keyword in the URL of each page. That’s okay. Your URLs should be short, descriptive and human-friendly, helping the reader (and spider) accurately predict what’s on that page. I recommend using hyphens to separate words instead of underscores. Avoid special characters (such as smart quotes or ampersands), which can break URLs. For that reason, whenever possible, try to configure your content management system so that you can manually edit your URLs instead of having them generated automatically from the headline of the page.

Within Image ALT Tags

As I mentioned above, search engines cannot “see” photos or multimedia content, so a number of accessibility best practices are also SEO best practices. When writing an alt tag for an image you should write a short sentence that describes the content of the photo, both for people and for spiders. Whenever it is practical and appropriate to your human readers, you should also include focus keywords in your alt text.

Note that when an image contains text, the alt tag should include a copy of that text so that visually impaired individuals and spiders can read the text. Put your keyword phrase as close to the beginning of your alt tag as possible. Similarly, videos should also be labeled with appropriate meta information such as a clearly written title and description (if not a transcript of the video) in order to be understood by a search engine.

Keyword Optimization: Put it into Practice

I hope that this article has given you a practical understanding of how to do page level keyword optimization. By following these best practices you will yield a number of benefits: driving traffic to your site, making your content more findable, improving accessibility and reducing your website’s carbon footprint.

Posted in Blog | Comments Off on How to use Keywords for SEO and Web Sustainability

Windows web design apps I can’t live without

thumbnailI’m honestly a bit wary of making a simple, flat declaration that “x is the best program for y”; real life is usually trickier than that.

As a guy who tries out new software for fun (I’m a riot at parties), I can tell you from painful and often disappointing experience that finding the right tools for your trade is a very personal journey. Tools that look great on paper will so often lack that one crucial element that would make them an effective part of your workflow. Your workflow you see, is everything.

So, before I list the “best” design and development tools for Windows, permit me a moment to quantify what I need from the software that I use:

  • Cross-platform compatibility — Sometimes I switch to Linux for a while.
  • Specialization — I prefer tools that do one thing well, rather than one-size fits all suites that do everything half-baked.
  • Speed — Nothing more annoying than a slow, bloated program. This is especially true when you need to switch between programs quickly, and often.
  • Customization — There are times when I’m not happy unless I’m able to extensively configure and tweak my process. Constant improvement is essential in our field and our tools should accommodate this need.
  • Fast changes to live sites.

There. Now we can start…

 

Writing my code

I design websites in the browser. When you think about it, this means that from the moment I stop wireframing, I begin to express my visual intentions with code. From that moment on, my most important tool in the whole process, besides the browser itself, is my code editor.

By now, most everyone has heard of Sublime Text. Do I really need to go into all of the details? Suffice it to say that the customizable interface, blinding speed, cross-platform versions, and myriad extensions make my life easier. It was, without a doubt, the best seventy dollars that I ever spent.

Windows web design apps I cant live without

There is an up-and-comer that has my interest, however. Adobe’s Brackets may still be in the Alpha stages, but it is quickly becoming a powerful text editor in its own right. It already has a decent feature-set, a growing library of extensions, and a thriving community.

Windows web design apps I cant live without

Once the Live Preview feature works with local WordPress installs, and once the whole program is a bit less crash-prone, it may be a powerful contender to the throne. As things stand, I’m happy to watch the program grow. It’s come a long way in a short time.

 

I still need an image editor

My choice in image editors is brought to you by small budgets! And the need for a cross-platform solution! And sometimes slow hardware!

That’s right ladies and gentlemen, I use the unfortunately-named GIMP for raster graphics, and Inkscape for my vector editing needs. I’m not going to turn this article into a GIMP vs. Photoshop debate. They are two very different beasts.

Windows web design apps I cant live without

 Windows web design apps I cant live without

Because I design in the browser, I have no need to create high fidelity image mockups. I use image editors to make individual graphic elements only. I create them separately from each other, as I need them. Thus, GIMP and Inkscape do the job, and they do it well.

One definite “pro”, besides the price tag: GIMP has, in my experience, always worked well on low to medium grade hardware. This is perfect for me, because I sometimes don’t have access to my nice, powerful desktop; and my slightly older laptop must sometimes suffice.

 

Putting files on the server

The number of FTP programs out there is… staggering. For basic uploads, I stick with the tried-and-true, cross-platform FileZilla. It’s free. It works. I’m used to it.

Windows web design apps I cant live without

 

Making changes on the fly

One common Windows-based task of mine is quickly editing live sites that need very small changes. I mean, who wants to reboot and switch to a different OS for a five-minute change?

For the smallest changes, I’ll use Komodo Edit. It’s a bit slower than the previous text editors I mentioned, but you can install an FTP browser extension which enables quick live changes. It’s perfect for fixing typos, basically.

Windows web design apps I cant live without

Oh, don’t get me wrong. It’s a powerful IDE in its own right. I’ve used it to build full projects before. But, it is slow, and Sublime Text’s command-based workflow suits me better.

Now, if you need to make somewhat more extensive edits, and/or want to work with something like LESS or SASS while working on a live site, Fling might just be the miracle you were looking for.

Windows web design apps I cant live without

Basically, Fling allows you to set up synchronised folders over FTP. Just edit the files in your local folder. Fling will scan the directory for changes every time you save, and upload only the relevant files. It’s such a simple concept, and yet so useful.

It’s free for non-commercial use, but if you need to do a lot of live edits, the paid version is worth it, I think.

 

Bonus tool: WinLESS

If you’ve read many of my previous articles, you’ll know that I love LESS CSS. I’ve tried just about every LESS compiling app I could get my hands on, and I’ve liked quite a few of them, such as SimpLESS and Koala, for example.

But SimpLESS has stopped working on my desktop for reasons unknown (it still seems to work for others, though). Koala simply couldn’t compile one of my stylesheets, once. The only Windows-based LESS compiler that has not failed me so far is WinLESS. Give it a try, if you haven’t already.

Windows web design apps I cant live without

 

Do you design on Windows, which are your go-to tools? What are your priorities for design software? Let us know in the comments.

Appareo Font Family – Vintage, Weathered Typeface – only $12!
Windows web design apps I cant live without

Source

    

Posted in Blog | Comments Off on Windows web design apps I can’t live without