Your Website Source Code Optimized for SEO

PART 1:

Every marketing professional knows how important SEO is in the age of digital technology. But if you’re on a marketing team with beginner to intermediate knowledge of SEO, what do you need to know to launch your first successful SEO campaign?

In this webinar, Sean Work, who manages the KISSmetrics blog, attempts to share everything you need to know about the foundations of SEO in 45 minutes. He discusses things like how to optimize your site, create content, and bring traffic to your site.

Sean previously worked as a SEO manager at Advantage Marketing Consulting Services, which provided search marketing services for Fortune 500 companies, such as Thomson Reuters and Samsung.

There are a few things to keep in mind when thinking about SEO:

  • Don’t bank on SEO to be the key driver for your business.
  • You can’t control Google, but you can control what goes on your site.

Know Thy Source Code!

This is what source code looks like:

website source code

If you look at the source code on any web page, you’ll see something like this. Source code isn’t scary. It’s simply the code that web browsers “read” to figure out how to display a webpage’s contents. Google and other search engines read your source code to find out what your site is about.

To view source code, you go to a web page and do one of the following (depending on your browser):

how to view a websites source code

Title Tag

The title tag is the most important element on any web page. If you do a ‘Control + U’ on any page, you’ll see the title tag in source code. It’s bounded by title tags.

titletag

You want to make sure you only have one title tag per page. What you put in the title tag is basically how Google decides what’s going to be in search engine results.

titletagexample

Google has been experimenting with changing this a little bit, but for most of the time, they repeat exactly what’s in your title tag into the search engine web page, so it’s really important that you craft your title tag so that it reads well and people will click on the link. A lot of people will tell you to put your most important keywords into this tag, but be careful about that. You don’t want to be obsessed with keywords. You want it to come naturally. Describe what the page is about and write it like you’re a copywriter. One thing to keep in mind is: how would you write this if you were going to write it as an advertisement in a brochure? The more naturally, the better chance people will click on it.

Meta Description

The next thing we have in any web page is the meta description, which looks like this:

metadescription

This is another piece of code that you have in the head of a page. You only have one of these. This is a description of the page. You can elaborate on what the page is about in more detail. A lot of companies skip over this and end up duplicating their home page meta description content on every page. In Google Webmaster tools, they tell these companies that there are a lot of duplicate descriptions. It doesn’t affect your search ranking and isn’t a large problem, but you’re ruining your chance at taking advantage of free advertising.

metadescriptionexample

As you can see, the meta description is the second piece of content or text underneath your title tag. This is some free advertising that Google gives you that you should take advantage of. People read it and this is how they determine whether they’ll click on your link to check out your content. Take time to think about what you want to put in your meta descriptions.

H1 Heading Tag

Another piece of code you have is the H1 Heading tag, which looks like this:

h1

H1 Heading is the main heading on a page. What you want to do here is write copy that’s warm and inviting once people click through and read your content. This is another step in bringing people into the rest of the content. The idea of the H1 heading is to have people think: “Wow, I’d really love to read the rest of this page.” Some people used to just copy the title tag content into the H1 and that’s okay. But you might actually want to have something a little more engaging, more specific for that page and makes more sense once users get there. This is important, as Google looks as these, so don’t try to keyword stuff in this page. Just make it natural and inviting.

Internal Links and Anchor Text

An important basic is how internal links and anchor texts work. On any web page, you’ll have links to any content. This is what the code looks like for any link.

html link

This can go to a link on your site or a link to another website. Another important thing is that the content nested by this tag is the anchor text. In the example above, “This is a link to my website.” is the anchor text. The words in the anchor text are very important thing that search engines pay attention to. It helps them figure out what that page is going to be about and they use it in their algorithm to understand what your entire site is about and what pages they should serve to their users. A lot of people used keyword-stuffing this to manipulate it. Remember to make the internal links and anchor text natural and usable.

Nofollow Links

The “Nofollow” Attribute goes inside an anchor link:

nofollow

This anchor link is actually a bit more complicated, because it has some JavaScript in it, but don’t be too overwhelmed by it. As you can see, Sean has outlined rel=’external no follow’. You can actually just do rel=”nofollow”. The “Nofollow” attribute tells Google and other search engines not to follow the link to the next page and not count it as link juice. You’re hugging up your page with no follows if you use them. You’re saying that you don’t want Google to focus on the next page. You want to direct Google towards things that you think are more important.

You should really only use this for comments in blogs to keep blog comment spam down, because oftentimes people leave links to other sites. The “Nofollow” tag was created to keep these spammy users at bay. In the past, people used to like the “Nofollow” tag to page sculpt, which means you try to direct your link juice to certain parts of the site that they really want you to focus on. You should abstain from doing this practice and just use it for editorial purposes and in your blog comments. For more information on nofollow and when to use it, check out Google’s documentation.

Image Alt Tags

The Image Alt tag is another tag that is extremely important, especially if you’re in eCommerce.

imagealt

What this does is that it tells a search engine what an image is about. As you can see in the example, the image is about lead management. This is how robots like Google know what you image is about and it helps your image become higher in the image search.

Don’t use ‘Image Alt’ tags for decorative images. Use them for:

  • Images of merchandise
  • Diagrams
  • Infographics
  • Your website logo
  • Screenshots
  • Photos of team members

…and other places where it’s an appropriate usage. Think of your ‘Image Alt’ tag this way: If you had to describe your image to a blind person, how would you describe it?

Canonical Tag

The Canonical Tag is a very important tag that came out relatively recently:

example of a canonical tag

It’s important because if you have a lot of web pages that have similar content, you can tell Google that the only page they should page attention to is a certain page. This is a good way to stop duplicate content. This is also important to syndicate your content, as you can have people who syndicate your content use this tag in their head of their page that they’re taking from you and pointing back to you as the original source. In essence, canonical tags are useful for setting a preferred URL for your content.

Now that you know the different tags and how they are important for SEO, watch the rest of the webinar to learn how not to get duped by duplicate content and learn about backlinks, content and user experience (UX).

PART 2:

10 Ways Coding Can Help Your SEO

Too many webmasters think of SEO in terms of things you do after a website is created, whether that’s optimizing specific on-page variables in order to maximize the odds of being ranked for particular keywords or the process of soliciting backlinks from qualified sources to power off-page SEO.

However, ignoring the important role that your site’s coding can play in its overall optimization is essentially the same as building your home on an unstable foundation.  Consider all of the following ways that coding can help your site’s SEO in order to avoid missing out on these critical benefits.

Tip #1 – Validate your code for search engine spider accessibility.

Keep in mind that the search engine spider programs have some serious limitations when it comes to crawling and indexing your site.  Since they really only read text effectively, other elements on your site, including image, audio, video, and script files, can all prevent important site text from being crawled and indexed appropriately.

To see for yourself exactly how the search engines interpret your pages, use the Webconfs “Search Engine Spider Simulator” tool to review your website.  If you notice that chunks of text are missing from your pages, validate your code correctly so that the search engines are able to find your information.

Tip #2 – Use coding to create SEF URL rewrites.

Creating search engine friendly (SEF) URLs is beneficial from both an SEO perspective and in terms of the user experience. The specific way you’ll need to modify your site’s code in order to minimize the number of extraneous characters and codes that are present in your URL will depend on the specific platform your site runs on.  If you use WordPress, Joomla, or any other CMS, you should have access to plugins or internal dashboard settings that will allow you to make the necessary changes.  In some other cases, particularly when it comes to open source ecommerce platforms, you may need to address your permalink structure within your .htaccess file.

Tip #3 – Clean your code to facilitate site speed improvements.

Although your site’s code might start out “clean,” over time, it’s common for website modifications to result in a number of different errors that can slow down your site’s operation.  For this reason, it’s a good idea to perform regular checks that account for all of the following issues:

  • Eliminate excess whitespace, while still keeping your code readable
  • Use an HTML validator to eliminate broken and unpaired tags
  • Use a broken link checker tool to remove invalid URLs

Tip #4 – Serve text-based alternative to on-page scripts.

As mentioned in Tip #1, the search engines can’t usually access information that’s contained within image, video, or script files.  However, as these elements can go a long way towards improving the user experience on your site, it isn’t a good idea to eliminate them entirely.

Instead, a better alternative from a coding perspective is to serve up alternate, text-based versions of the information you’d like the search engines to index.  As an example, when serving up Flash files, consider using the SWFObject2 library, which will automatically deploy alternate text-based content whenever it detects users or search engine spiders that can’t process these file types correctly.

Tip #5 – Set up “noindex” tags on your robots.txt file.

While there’s no way to control the behavior of the search engine spiders with 100% accuracy, telling them not to index certain pages on your site through the use of “noindex” tags on your robots.txt file can be useful from an SEO perspective.  This tag should be added to your robots.txt file for any pages that shouldn’t appear in the search results, including:

  • Shopping cart and checkout pages
  • User dashboard pages
  • Archive pages
  • Contact pages

Tip #6 – Use “rel=canonical” to deal with duplicate content issues.

If you use a CMS program like WordPress, Magento, or Joomla to build your site, chances are you’ve got duplicate content issues that result from the way these platforms create URLs.  Whenever you add a new post to your website, it’s not uncommon for these systems to automatically generate any or all of the following options:

  • Yoursite.com/post-name.html
  • Yoursite.com/category1/post-name.html
  • Yoursite.com/category2/post-name.html
  • Yoursite.com/archive/date/post-name.html

Because all of these different URLs redirect to the same page, you risk being subjected to duplicate content filters within the search engines if you don’t specify exactly how each of these URL variations should be treated.

The best way to instruct the search engines on how to handle your URLs is through the use of the “rel=canonical” tag.  This feature can be added to the <head> section of your website either by hand or through the use of a plugin and tells the search engines to disregard, redirect, or index a given page for the specified URL.

Tip #7 – Set up 301 redirects to ensure proper PageRank flow.

When it comes to setting up proper 301 redirects, there are two coding situations you’ll want to consider from an SEO perspective.  First, use this code to inform the search engines that both www and non-www versions of your URLs should be treated the same.

Second, if you ever move content within your site (for example, if you change the title and permalink of a blog article), create a 301 redirect to inform the search engine spiders of the move.  Doing so will minimize the potential loss of PageRank that can occur when backlinks no longer resolve to your former URLs.

Tip #8 – Use microdata to create rich snippets.

One recent addition to the SEO developer’s toolbox is microdata, a new language that allows you to add several levels of clarifying data to your site’s HTML tags.  Not only can these elements help your site to be indexed and ranked correctly, they can also boost your clickthrough rates from the SERPs through the creation of enhanced search result listings known as “rich snippets.”

As there’s some speculation that overall clickthrough rates from the Google SERPs are being weighted as a ranking factor, adding these new features may help a site’s SEO in addition to driving extra traffic from the search results.

For more information on what rich snippets are and how to create them through the use of microdata, check out Schema.org.

Tip #9 – Combine script files to speed up load times.

Recently, site loading speed has gained significant importance as a search engine ranking factor, based on Google’s stated desire to reward fast sites in the search results.

Unfortunately, if you’ve built out your site using tons of different scripts in order to provide additional functionality for your visitors, loading all of these various code files at once can bring down your site’s performance substantially.  By combining these individual code sheets into a smaller number of files, you’ll minimize the long load times caused by excess script demands and improve your site’s overall SEO.

Tip #10 – Utilize CDNs to minimize necessary launch resources.

Finally, if you’ve made all of the possible modifications to your website’s code, and you still haven’t been able to achieve measurable improvements in your site’s load times, consider utilizing a content delivery network (CDN) to serve up content from external websites in order to minimize the total resources needed to launch your site.

CDNs like Amazon’s popular S3 service or RackSpace are an especially good idea if you host a large number of images, audio files, or video files on your site.  If you feel that excess file demands may be dragging down your launch times, look into serving up remote content via CDN services.  They’re often quite cost-effective to use, and they can make a big difference in terms of your site’s overall SEO.

Source: https://blog.kissmetrics.com/website-source-code-seo/

Source: http://www.searchenginejournal.com/10-ways-coding-can-help-your-seo/45402/

 

 

Share This:

Leave a Reply