Client side SEO
A layered assembly
- HTML forms the framework of your website. It contains the instructions for the browser to visualize text and other elements of your website. In the early days, HTML was the only thing you had. An up to date website would be HTML 5.0 compliant – this will make mobility support easy. But you must be careful that if the browser does not support HTML 5.0, you fallback to a legacy syntax.
- CSS is the layout layer. It defines the style of your website (font, colors, layout, …). In the early days, the HTML code did include layout. Nowadays, it’s “good practice” to place this in the CSS layer. By adapting some definitions in the CSS layer, you can update a whole website to a new corporate look. A modern style website should be using CSS.
Structure = HTML
And now a table: A table consists of 3 parts: Start-and-end of the table definition, start-and-end of a row, each time containing one or more start-and-end of a cell.
HTML: Assisting the search engine
- Pictures: make sure the “alt” text contains a clear description of what the picture all about. Make use of search keys. The search engine will not index the photo by itself (some experiments are going on with face recognition, well known places & buildings). Change also the file name of the picture to something meaningful (e.g. from can335654.jpg into sunset_ostend.jpg)
- Meta tags are used in the code block “head” of a page. Some of those are relevant for the search engine:
- meta name=“description” content=“”
- A description of your page in less then 150 characters. This text is the one displayed in the search results of your search engine. Is important for the click through rate, so reflect on what you put in. It should be an attractive text convincing people it’s worth to click.
- meta name=“keywords” content=“”
- This was in the early days the key location to enumerate keywords. People tried “Black hat” tricks here, like a long lists of key words with no relevance to the page. Don’t do that anymore, you will get penalized. You must fill it truly in, and the search engine will look at it. But the search engine will also look to your text and you will not be able to fool the search engine if you put in not related stuff.
- meta name=“robots” content=“”
- This instructs the search engine on what to do with this page. Should he index it ? Are the links on the page to be followed ?
- Values are: “Index, follow”, “index, nofollow”, “noindex, follow” and “noindex, nofollow”
- If you don’t provide this tag, the default selected will be “index, follow”
Layout = CSS
- CSS = Cascading Style Sheets
- Determines the looks of your webpages
- Colors, fonts, style, layout
- HTML = data and structure without layout
- CSS = layout without data and structure
- Website builders such as Weebly will just change the CSS codinng is you switch theme
Functionality = coding
- Although, with the latest HTML 5 standard a lot is possible without coding, you will have to resort to coding if you have advanced functionality requirements. Typical examples are browser games, complex field validation, calculations, dynamic data fetching.
- To conclude: Make sure text and navigation can be found in HTML. If you have this hidden in code, you risk that parts are invisible to the search engine.