SEO Tips to help you rank in all search engines

Below 10 SEO tips for both programmers and non techy people. Your knowledge doesn’t have to be great to get yourself seen by the top search engines. Most all SEO tips will work in the top search engines as all the search engines want to find you in the same way.

We will start with the non techy SEO tips first, then move on to what the developer can do. Firstly do remember no one can guarantee first page let alone first place. It is all up to the search engines algorithm and how you score on it.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

Content
This is now the most important one that anyone can do. Search engines look at your content to see how relevant you are to what the user is searching. When you write your copy make sure it makes sense and is reinvent to you. Don’t write your copy for search engines, write it for your company. If you write it perfectly to describe what you can offer then you will get pick up on that. When developers say use keywords, they are the search terms you are trying to get searched on. So if I wanted to get searched on ‘developer’ then I would try to use that in most places, but in context and not over used. You can over do it and search engines could see that you are trying to flood your content with keywords.

Summary
Write good, relevant and in context content for yourself not for search engines, while trying to get as many keywords in as you can with out over doing it.

 

Meta data
This is a more developer thing, but you can make sure it is all in and the correct details are in. The main ones to get in are the Meta Title, Meta Description and Author. There are a few others plus you can get in a favicon. These detail won’t directly increase your ranking, but this information will show on the search results in search engines, and will give the user more information for when they are choosing a site to visit, which in turn will increase visits. If you have a WordPress or content management that allows you to edit these, then it will save you hiring a developer.

Summary
Make sure either you or your developer has all the relavent details in your meta data to display your information better on search engines and in turn improve your visit rate.

 

Social media
A big thing these days is getting on social media and rightfully you should be on there. If you share a post about your site, then that one person shares it with their friends and so on, then you have just reach a few 100 people. The other part to it is that when you are sharing you link then others share it, the link counts as a inbound link. The more inbound links you have going to your website from verified places the better. Although a link from Facebook may not be the most valued link, as so many people link from there, it counts as something, plus it can lead to more people sharing that link in Facebook and out.

Summary
Get on social media and start posting to your relavent users. If it’s for fun then go on twitter or Facebook. If you want to be a full fledged company then go on Facebook and LinkedIn. If you are any one then get on Google+ as that is where Google can get the most information about you and then rank you better.

 

News feeds
The main aim is to get people to your website and sharing your website, so a new feed, blog or keep upto date section on your site is a must. When you write posts, write them for the users reading them. If they are good enough then you will get people regularly coming back to read more posts which is good, and then if they share that post for others to read even better as that means more people coming in. The other reason for this is to keep your site active. If your website is a static website and nothing changes then for all the search engine knows, you have packed up. If they see you are constaintly updating your site and changing then they will come back to crawl your site for content.

Summary
Get a news feeds to interest users to return to your site and share it. Also so your website doesn’t become stagnant and keeps active.

 

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

Link building
Linking building takes time, but is worth it if you get the result. Like the sections above, you want to get your name out there, get it shared and then get more inbound links to your website. As I also said you will get some value from social media inbound links, but you will get better value for your chosen industry if you post on things like forums, get news site to post about you and generally get your link on industry websites. The less the person has to do with you, but is in your industry the better it will be. This is because it means people are linking to you without having to know you. These kind of links would be better value then things like social media and non industry websites.

Summary
Get you link posted by others on industry relavent websites, forums and blogs, as much as possible. If not that then as close to it, by you posting on other forums.

 

Let’s get techy now with some developer tools for SEO.

 

Attributes
Go through all your elements and make sure you have all the SEO friendly attributes in them. For example links should have ‘title’ attributes and images should have ‘alt’ tags. These will give the user and the search engines more information about them elements. Some new attributes as such are the Google Rich Text Snippts. This again won’t directly improve your website ranking, but it will give Google more information and shows more information in the search results. This will then entise the user more to click on your link.

Summary
Make sure your elements are displaying as much information for search engines and users to pick up on your website.

 

Element structure
Same as above it is to display as much information as possible to search engines to search on you. Some of the basic elements you should use are for the title a H1 tag. This then tells the search engine this is the most important title and therefore the title of the page, but don’t have to many. If you over load a page with them, search engines won’t know what is important and it could effect you negatively. The new elements you can use are the HTML5 elements like header, footer and nav. These are great for showing search engines the structure of the website. Research into which elements are industry standards to find out which to use, as with HTML5 you can use anything, but not everything is recognised by search engines.

Summary
Make sure you use the elements to direct the search engines to the right content, like H1 tags. Look at HTML5 elements to give more direction to your websites structure, but make sure they are search engine standard.

 

SEO tools
Use the resources that are at your disposal. There are hundreds tools to tell you errors, ranking and corrections. The best ones are below:

  • Google Analytics – See your websites rankings and who your audience is to better target them.
  • Google Webmaster – This tool can tell you if Google has had any crawling error and more, so you can make sure Google and other search engines are able to crawl you website.
  • W3C – This is like the web developers standards body and can check your HTML, CSS plus RSS feeds to make sure there is no errors.
  • IIS SEO – If your website is on a windows server and running IIS, then you can download this plug in for IIS. It will tell you for any website errors, duplicate content and some SEO advice as well.

 

Optermisation
Search engines want to give the user the best website with the best information. Therefore you need to have a fast website to get a better score with the search engines. Ways to accomplish this is to minify all your CSS and plugins that you won’t need to edit most of the time. Good code, by which I mean only using as much character/elements as needed and also on the server side of code make sure it is not bloated, so make more reusable functions. Another handy tool is Lazy.js, this JQuery plugin will make it so your images don’t load in until they are in view. This way on the first load it is not as heavy and the spreads the loading.

Summary
Make as much of your code smaller and image sizes smaller to speed up your website to get better scored by search engines. Read my previous post about coding to perfection for more detail.

 

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

Readable code
One thing to avoid is having to many images instead of text. It may look better, but search engines don’t know what your image is. The alt tag of an image will tell search engines what the image is, but they won’t see it as important. The best thing is to code as much or all of the images as possible, so search engines have more content to read you on. This will also reduce the loading speed as you have less images to load.

Summary
Make sure you give the search engines as much to search you on as possible, so reduce the amount of images you use.

These tips can improve your website for not just the search engine but also for the users on your website. So get these done as soon as possible.

Coding to perfection

Being a developer you see a lot of code and in my persute to be the best, I look to perfect my code. When you want to be the best you need to not only have the best code, but it also need to look the best and be functional. There are certain things you need to do when coding to perfection to make it the best for not just yourself, but for others to read as well. You have to bare in mind that other people will be judging you on your code for a job maybe, and then also using your code which you want to be easy read for them.

So one part would be making you code condensed, so you don’t have functions that will be repeated over and over. The other thing people do is blot the code by having a lot of IF ELSE statements. My thought is always, if you have to use it more that once then make it into a reusable function. This just saves time copying code. You can make functions take a load of parameters and with some languages make them optional, so if the two uses you need it for aren’t parallel in what you need, you can make it optional. The only problem is when do you stop? You can make things as dynamic as you like, but there has to come a point when the function is so loosely made to what it needs to do, that you can’t understand it and could break any time.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

When making your variables and even id’s, you need to make logical names. When you code, you code for others to read it, especially if you are in a team. So the names of the variable need to be obvious for the person reading it to know what it is used for. Say it is for a title, then you could call it PageTitle. This is then straight away easy to see what it is for and even what type of variable it is. I always like to also camel case my variables as you can see. This is because I think if you don’t, then the word blurs into one word e.g. pagetitle or PageTitle. Some other would do it like page_title, which I feel is also ok to use. Even though you may need to be specific with you variable like the last example, you may need to make them a bit open, just in case you need to use them again for another thing. For example, things like HTML classes, you may have a class for a title of the about section. Now using a class called ‘AboutTitle’ may seem the best idea, as it tells the person reading it that it’s the class for the about title, but if you can re-use the CSS for that class then the best option is to call it PageTitle. This then still tells the person that it’s the CSS for the page title, but offers you the choose to use it on other titles.

When I have done some tutorials and courses, one thing that does get picked up is style. This isn’t a necessary thing to do, but the small things make a difference and if you are coding for perfection then you need to go by it. I am a .NET Web Developer, and so you may notice I reference to web coding, but the concentus applies to all languages. For style it is all about keeping things consistent. There is no 100% proper way to display your code, as it all comes down to how you code and what is readable  to you. The general theme though is what most people would keep to, like a unwritten standard. Here are some of the things to keep in mind.

Classes and IDs

When writing the classes and ids for elements, not only should you write them with logically names, but I also keep them to their own uses. For classes I use them for CSS, so if you need to know the style of the element then you can use its class or it’s parents class to search the style sheet. Then for ids, I use them for any server side uses. So if I have a function that uses an id you can get the id and search it on either side. This reduces the amount of time spent searching the class and getting nowhere then have using the id and also confusion.

Indents and next lines

This is best for readability, to next line elements and indent them. When you next line each element, you can then see when the next element starts, instead of having to read all across the line counting the number of openings and closes. This is then made even easier by indenting the elements. When you have an element and then inside another element, if you indent the inner one then you can see that  it is inside the other element easily. This can then be repeated as the more elements you put in, so you can then tell what is in where and where they begin/end.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

Example:

     

            Example

     

Commenting

fundamental part in all languages and programming applications, is to comment your code. When you are coding your script you know how it works, but someone else may look at it and think what the hell!?. So when you go through you code you should comment what does what and what the variable are getting passes. A good trick in .NET is with functions to put in C#, /// . This then auto generates a summary field so you can put in what it does, plus it also produces tags for the variable and if it’s a function then a field for what it should return. This is then shown when you hover over that functions name in another page, so you can then see what it is doing. Some times it is also good to do in the the visual side as well like HTML as if you have some complicated amount of it, you may want to give direction as to what it all is.

Organisation

A minor one, but then every little helps. I know some times you can’t help it in web developing as some functions for build order need to be in different places, but others you can. You should give some order to your code, like how you comment to give direction, you can also place your code in sections so you can see where you would have to look. For example in the front end of a web page, you would put all you JavaScript/JQuery in the Head and then the HTML in the body. This can then even be broken down so in the Head, you have you meta information, then your imports, then you JS. This then gives structure and again for someone reading you code, they can refer to what they need in an instant. The same context can be given to the back end of code and other pure scripting languages. You put your global variables declared at the top, then your OnLoad function underneath, finally put other functions in a decent order.

Theses are all the kind of practices I try to do when coding, which I would call coding to perfection. As it is then logical, functional and readable for anyone. Doing these simple things, that you would get into routine with anyway, would improve speed of coding, reading code and even the speed of your application. If any of you think there are other great techniques then please tell me as I would relish the chance to make my code even better.

Relative Vs Absolute Position

Building multiple websites and seeing a lot of other peoples code, I see how people use and miss use the property position in CSS. In particular it is between using relative and absolute positioning of the elements. They both have their place, but where is it?

The worst mistake I have seen is when developers over use absolute. I have seen when they want everything to be exactly where it is meant to be on a desktop design, and so they have position absolute everything into position. This is terrible, as the element then do not move well for responsive builds. One website I saw used all position absolute and then when they made the responsive it had about 20 media queries in the CSS. This was to move the elements 2px at each point. When you use the absolute position you are committing to the element being in that position no matter what. When you use position the code should be contextual and then should flow relative to each other. Over using or miss using the position absolute will result in more work later and restricting you to create better elements.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

The best position, which most elements inherit, is the relative. This is how you do responsive and fluid builds. It says it all in the name relative, you want the elements to react to each other, so you want them relative to each other. As one element comes in the  other one reacts to that and moves as well. This will work for about 90% of the structure of the code.

Though this is all said position absolute has it’s place. When you wish something to absolutely be in a position then it can work, but in a relative container. You may have for example a view button on a item and want to have consistency across all the items. To make the button fixed to the bottom and all inline then you can use position absolute so it sticks to the bottom. You do have to make sure you remember the relative container or it will be absolute to the window and not work.

Use relative and absolute but wisely.

E-shot dos and dont are leading to just dont

We have been doing HTML emails for clients for years now and over the time we have seen many changes in what you can and can’t do when building them. The problem is they are moving to what you can’t do, so are we soon going to loose the way we can code e-shots?

When we started you could basically use any HTML elements and style. This gave you the flexibility to code amazing emails and not have to use so many images. The problem was that some of these great elements were portals for hackers. They could use elements to break the email clients website and there for leaving it exposed. If the website the emails come on is of course HTML and you leave an open tag or effect the code on the outside in any way, then the hacker code have access to some hidden code.

Coming forward now there are less elements you can use and so it makes it harder to make the email as much text as you can. Due to the security again, images don’t load in unless the user lets them so you want to make sure that your email contain as much text as it can, but this is where you loose style. If you can make the text look good and put it in a attractive way so that the user does except the image, then you may loose viewers.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

Below are some pointier we have came across while doing these emails.

As much text as possible is the first point. As I said above, before the user sees all the nice images and design they have to accept them before they see them. This means you need to get their trust, if you do not already, with the text content on the email. Therefore the more text the better the return in viewers.

<font> tag is what you need round every bit of text content to ensure styling for them holds. The other good thing you can do is import Google fonts with this tag as well.

<table> tag and it’s children elements are the elements you should build the whole of your e-shot with. It seems it is what works to keep everything in format with out having to do an abundance of CSS work. 

<td> tag for padding. The other elements do not have any structure, so padding doesn’t work on them. If you want to use padding, then put your content inside the td and put the padding on this element. 

You will need to use padding a bit different in e-shots as well, because margin doesn’t work at all. The best way is anything you was going to put margin round, put padding round that.

<img> tag is ok to use, but as said before you want to avoid using as much img tags as possible. The other tip with these is to use the img width attribute and not the CSS width. The CSS styling one doesn’t work.

Color attribute has a small hitch that you can’t do and that is use work colours. If you try to use ‘white’ it will not recognise the colour and probably just inherit it colour instead, but if you use the hex colour ‘#ffffff’ then it will show fine.

Should we use libraries?

Backbone.js, Node.js, SASS and even JQuery. We add these libraries in every day to create better websites and faster, but we are just loosing our coding abilities? I wonder with all these libraries that we are creating and importing are basically making our websites for us and, our coding abilities more like setting up WordPress. So should we give in and use them or should we be creative and make our own paths?

When I started coding only a few years ago I was made to code everything from scratch. Apart from things like slideshows and fancy features, but more and more I see recruiters and companies asking for us to know how to use certain imports. We used JavaScript and JQuery to create our own amazing features and to make the websites more interactive. This also then showed more skill as you knew how to read and write hard code. When I now see most jobs are requiring you to know more about other plugins like Backbone.js and Node.js. These languages are meant to make it faster to code and mean that anyone can pick it up to know what you have done. I have tried to see it their way, but I just can not get to grips with why they are so good. I even attempted to code a game in Backbone.js to see if I could see the advantage, but got annoyed learning a whole new language. Instead I, quickly, created the whole game using just JavaScript and JQuery. The game is here if you want to play JS Space Invaders .

I do hear about all the good these languages can do and why they think it is better, which I may learn if I was to have a good chat with a hardcore developer that uses it. Mostly though I think it is the managers that like it as it is new technology. By saying that they are using what is the latest craze at the moment makes the company look like it is at the top of the stack and making new strides, but then all they seem to be doing to me is following the crowds.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

I can appreciate that it is good for consistency as you can create a pattern for other developers to follow. This goes for things like LESS and SASS as well. The head developer can create a template of how to create each website and then the lower developers will follow it. This is then made easier with the plugins as they already have a standard, like backbone.js using the MVC(or more like MV) pattern that is stardard. With JavaScript you would have to build the rough, bespoke template instead for example:

Backbone:

Model

        Person = Backbone.Model.extend({
              initialize: function(){
                             alert(“Hello world”);
               }
        });
       
        var person = new Person;

 

View

       SearchView = Backbone.View.extend({
               initialise: function(){
                      alert(“Alerts suck.”);
               }
        });

       // The initialise function is always called when instantiating a Backbone View.
        // Consider it the constructor of the class.
        var search_view = new SearchView();

 

JavaScript

       Var ModelNamespace = {
              Function ModelFunctions(){
                      alert(“Hello world”);
              }
       }

       Var ViewNamespace = {
              Function ViewFunctions(){
                      alert(“Hello world”);
              }
       }

These are both the same, but the backbone.js has its MV built into the library. The thing that make Backbone better is that it is standard, so any developer will know what has been done, but the JavaScript you will have to read into the code more. This makes the Backbone.js more readable to the new developers you hire and so faster to get them to the level you want them.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

The other advantage is speed, which is why most companies go for these libraries as they want things done faster and out the door. The aim of the game is to get as much work done to the best level, so when you have methods of making it faster then you take them. It is the same reason why people go for WordPress as it is prebuilt and very fast to get them out the door. A CSS method most people use is SASS or LESS, which I do like a lot and agree with, but it is still another import. The advantage is the declaration of CSS values to keep consistency to the project and also for easy change of the template. If you was to do the below you can change the colour scheme of the whole website quiet instantly and with minimal effort. Also you would be able to have a consistent box-shadow across the website.

SASS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

       body {
               font: 100% $font-stack;
              color: $primary-color;
       }

       a {
              font-size:14px;
              color: $primary-color;
       }

CSS

       body{
              font:100% Helvetica, sans-serif; 
              color: #333;
       }

       a {
              font-size:14px;
              color: #333;
       }

Although it can speed up code in the present, it can slow things down later. If your using a plugin and then there is an update to a browsers or another plugin, then you may not get support. The example of what I had before is Twitter. We were using a Twitter library in our system and then Twitter released the update to oauth. The program we had built in to the system didn’t support this and the developer that built the program didn’t either. This resulted in us not knowing how to correct the issue or source it either. It took us longer then to find another resource to fix the new update, while our service was down for a few weeks. This of course is not except able and the bigger the company the worse the damage. If you build something yourself then you know not just that it is supported, but you also know how it’s built for future work. It can also protect you from bugs. If you now know what code is in your program then you know of any vurualbilities, but if it is not your code then there could be a loop hole that bugs creep in.

Once you have finished your program one of the common problems is the speed, but unlike plugins you don’t have to go shopping for a new one. You can now access your code to then speed it up or to add more features. With plugins you would have to find the right one and be happy with any flaws, unless you are going to read through all their code. This is also if you can read through their code. If the developer has minified it or even worst compressed it then you may not be able to gain access. This is what happened with the Twitter issue above. The code file used was a DLL and so we couldn’t even access to code to find the bug.

When you then bring in things like backbone you need a developer that knows the language. Backbone is basically another language that you will need to know to update any code. This can come hard for recruiting as you will need a developer that is fluent in JavaScript and Backbone. Although it is a big thing and a lot of developers are going with it, you have some great coders that don’t though. This then could limit you to what kind of developers you have.

Although we say this, there is one library we all use and have learnt like another language and this is Jquery. It is over looked as we use it in just about every website, but this is a plugin to make coding faster and it does work. It is neatly compressed and as it is so big there will always be support for it.