Part 9: Making Your Website Searchable (SEO)
The object of creating your portfolio website is two-fold:
- To direct employers and clients to your online portfolio
- To be found by people searching the web for what you provide
People you give your site address to have little problem finding your site. But what about people who don't know you?
Making sure your website is findable, and will show up at the top of the search results, is called Search Engine Optimization (SEO).
Here are some basics of Search Engine Optimization:
Overall
The biggest changes recently is that Google is improving rankings for sites that are:
- Mobile-ready (I understand that this means that you include the viewport metatag mentioned at the beginning of the Mobile instructions.)
- Uses a secure website (https instead of http). This means any information sent from and to the site is encrypted so it can't be intercepted, particularly important for sales transactions. This will cost you or your client more than a standard http site.
Google's ranking is a "moving target"; here's one company's evaluation of what matters to Google.
Keywords
Keywords are words that the people you are trying to attract to your site are likely to use to search for the information or services you provide.
- Keywords for graphic design might include "graphic design", "web design", "websites", "brochures", "ads", "logos", and so on.
- Keywords for photographers might include portrait, landscape, sports, studio, nature, or large format.
- Illustrators' keywords might include subject matter, style ("cartoon", "photo-realistic"), conceptual vs. illustrative, and medium (such as oil, watercolor, pen and ink, and digital).
Analytics trackers like Google Analytics, can tell you the keywords people use to find your site.
You want to use your keywords in your title, in your meta tags, and in your site copy, as we'll explain below. But don't overdo it (such as headlines like: Graphic Design, Graphic Design, Graphic Design!"). Otherwise, Google could blacklist you and you won't show up in their searches at all.
Search Engine Elements
There are four elements that search engines such as Google use to find your website online:
- title tag
- Meta tage: description
- Meta tag: keywords
- Using keywords in the text on your website
All of them rely on keywords.
Title Element
The title element is placed in the head just after the meta charset, like this:
<head>
<meta charset="UTF-8">
<title>Title</title>
The text in the title element tells the search engine what's on the page, and is used as the title of the entry on the results page of a search. So ideally it should say something about what's on the page.
These are a little lame, but your title page could say, in order from worst to best:
- Susan Smith, Student
- Susan Smith, Student Portfolio
- Susan Smith Graphic Design Portfolio
- Web and Print Graphic Design | Susan Smith
- Web, Print and Logo Design in Baltimore | Susan Smith
Ideally, the title should include keywords that people you want to look for you will use to search for you.
The maximum number of characters you should use in the title element is 55 characters; after that, Google (and probably most other search engines) show an elipsis rather than your text. So it doesn't pay to go over.
Meta Tags
Meta tags consist of data that is available to browsers, search engines, robots, and other non-human devices, but is not directly displayed on web pages. Meta tags are coded in the <head> element.
Description Meta Tag
The most important information you can provide to the search engine after the Title element is the description meta tag, a short (less than 115 characters), human-readable description that further explains what the website provides. It should use as many keywords that people will use to search for you as is practical and still worth reading.
An example might be:
<meta name="description" content="Susan Smith creates on-target, strategic, eye-catching ads, graphic design, web design, logos and branding.">
Keyword Metatag
Because it is abused so much, search engines rarely use keywords, but it is a useful exercise to come up with a list of keywords because it will be helpful in crafting the copy for your site. The keyword meta tag would be listed right after the description meta tag like this:
<meta name="keywords" content="art director, ads, advertising, graphic design, corporate identity, web design, direct marketing, logos, publications">
Using Keywords in Text
One of your requirements for your website project is that you have a short descriptive "blurb" on your home page. This is intended to further improve your site's ranking in search engines, as search engines "read" your site and record the words it finds to speed up its search. If you have the keyword in your title, description and on your home page, when that keyword is searched you will be listed above someone who only uses that keyword once.
An example of a good blurb for your home page might be:
"I am a super-enthusiastic publications design student who will graduate from Towson University in 2016. I have experience in publications design, print design, web design, logos and branding. I've worked on the student newspaper Towerlight , with the Towson University Campus Communications, interned at Baltimore Magazine and have completed freelance projects for several area businesses. Samples can be seen on my Portfolio page.
"Contact me when you're ready to discuss your next publication design design project or looking for your next hire."
One of the advantages of using keywords in text is that you aren't limited to the 115 characters of the meta tags. But writing for the web should be short and sweet. Keep your sentences to 25 words and your paragraphs to 100 words.
Each Page
Finally, make sure each page has it's own title, meta description, keywords and text, based on the content of that page. It won't do you much good if your home page title is the same as your contact page title; the search engine will think they are the same page. And the more distinct pages you have, the more that will increase your SEO ranking, too.
Site Map
A site map is a list of pages on a website. Google and other search engines use it to understand the organization of your site content. Search engine web crawlers like Googlebot read this file to more intelligently crawl your site.
If you search "site map generator" you will get a number of free sitemap generators. Generate the sitemap(s) and include them on the first level of your site ("next to" the index.html file) and the browser bots that scan your site will find them.
Final Validation
If you are using Dreamweaver, look through the code for line numbers that are in red, indicating there is a problem. Click the red numbers and they should give you an idea what the problem is.
If Dreamweaver that you have unclosed elements and aren't sure what they are, you can insert your cursor before the </body> element at the bottom of your page, type </ and hit return, and it will auto complete whatever hasn't been closed. Look for those unclosed elements, close them, and try again until you get </body> right before </body>, and then you'll know all the unclosed elements. (Working on these instructions I had as many as six unclosed <p> elements I had to go back and find.)
Once you've fixed all the line number errors, go to File>Validate>Current Document (W3C) and your document will be validated.
W3C HTML Validator
If you don't have Dreamweaver, copy the code from your page, go to the HTML Validator at https://validator.w3.org/, paste your code in, and it will tell you on which lines your html has errors. Fix the code and repeat the process until you don't have any errors.
If you are having problems with your css, they also have a CSS Validator at https://jigsaw.w3.org/css-validator/.