Week 2: Learning Outcomes and Lab work.

 Hello all again! Welcome to week 2 of my blog.

Learning Outcomes

Initially for the lab I coded up two basic html files for a trail website called "Fish Creek Animal Hospital". I laid down the html which would mark up the basic structure or skeleton of the site. It will be added to at later stages as a learning tool. I then conducted some research on Meta tags and SEO, which is detailed below. 

charset and robots

Meta Tags

“The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.”
                                                                                                   -from w3schools.com

These tags are found inside the <head> element of the document and are unseen by the end user of the site. Four different uses of the meta tag are as follows:

  1. Keywords of the webpage. A few words summing up what your website is for, i.e. for a taxi business: “taxi, service, Dublin”. These add to SEO. Search engines will specifically hit on keywords.
  2. Author Who wrote this page? The author tag will let you know.
  3. Description. The description describes your webpage. Key in SEO and for accessibility. Write a few lines here explaining what youre page is about, this is distinct to keywords and a few succint sentences will help your SEO as well. 
  4. Viewport . Its important that your website looks good and works well on all devices in this modern age of phones, tablets and desktops. Gone are the days of only designing for one screen type, responsiveness is key for web development. This can be helped with the viewport meta tag.
  5. Charset Specifies the character encoding for the HTML document. UTF-8 covers most characters in most of the spoken languages in the world.
  6. Robots this tag controls how a page is indexed and seved to end users in Google Search results. The tag can be uniqely altered per page - for example if you do not want Google to index the page, content = noindex. Using "robots" will apply the rules to all crawlers. If you want a specific crawler then you will have to name it. Examples are googlebot, googlebot-news.

As you can see from above, <meta> tags are pretty important! I have implemented the above in the html files. Below is the code used:

<meta charset="UTF-8" />
<meta name="description" content="Vetinary Hospital based in Wisconsin, Fish Creek. We are a small business operating since 1970. We cater to all small animals, such as cats, dogs, hamsters and fish. Service is available 24/7, and home visits are also avaialble. Please call us for more details." />
<meta name="keywords" content="Vetinary, Vet, Animal, Health, Fish Creek" />
<meta name="author" content="Becks Kelly" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />



SEO guidelines

SEO means Search Enginer Optimization. Good SEO will increase traffic to your site. It's key to get a grip on this as its a free way of increasing traffic! Some guidelines and tips are detailed below.

1. Title tags. Title tags are used by search engines to figure out what the topic of a page is. They use the tag to see if the site is relevant to the users search. Words that are used in the search query come up in bold on google if they are also in the title tag. Users can use this to see if the page is relevant to what they are searching on the web. A good title can include the name of the business/ page and maybe a few more pieces of information. For example, Fish Creek Animal Hospital.

Best practise involves succinct and accurate descriptions, and also unique tags for each page.


2. Description tags. A description meta tag gives search engines a summary of what a page is about. Descriptions can be longer, up to a few sentences long. Similar to the title tag anything that the user searched for will appear in bold on the google search results page. Google may even use parts of these descriptions on the search result page.

Best practise involves not using only a collection of keywords (i.e. write a proper sentence), using unique descriptions for each individual page, NOT copying and pasting the entire page into the description and overly generic descriptions, i.e. "This is a horse page"

3. Consider the URLs used. Keeping them to simple names and clearly defining the documents and pages with nice URLs can aid search engines crawl your site. Its also nicer for users and visitors to have simpler URLs. It makes sharing easier and they are more likely to input the correct URL when searching for your site. URLs are also displayed in search results and highlighted in bold as with the above.

Best practise involves using words, simple structure of site, and one URL per redirect. It is also best to avoid capitalization altogether for simplicity.


4. As always, high user experience and decent website design across all devices will greatly improve SEO. Mobile pages are key in websites these days. A tool for delivering a good mobile page is AMP, it delivers mobile pages much quicker than before. Google has now switched to mobile-first indexing, so the emphasis on mobile presence become even more important than ever.


5. Page loading speed greatly influences whether users will stay on the website – it is generally said that users will wait 5 seconds before leaving. Generally the biggest culprit here is images. It is important to have images appropriate to the size of the device you are designing for and have it as small as possible. A “lazy load” is a great tool to ease the frustration of an end user, whereby a blurred version of the image is shown first and replaced with the high quality one when it loads.



Two pieces of code to improve the SEO of the Fish Creek website

Re-examining the meta tag description

Initially for the description tag I had the following:

<meta name="description" content="Vetinary Hospital">

I have since updated it to the following for the "index" page:

<meta name="description" content="Vetinary Hospital based in Fish Creek, Wisconsin. Open since 1984. We cater to small to medium sized animals including cats, dogs, hamsters, rabbits, fish and reptiles. Vetinary practictioners are on call 24 hours a day and available 7 days a week.">

Following best practise I will also have a different description for the "services" page:

<meta name="description" content="Vetinary Hospital based in Fish Creek, Wisconsin. Services include medical services, surgerical services and dental care. House calls are also available on request.">



Setting up a GitHub

I have set up a GitHub as a place to store my college assignments and connect with other programmers and people in tech. My GitHub username is @beckskelly. Over the next week I will begin uploading my code (just assignments for now but I will add my own projects eventually) and have a look at some other projects.

Comments

Post a Comment

Popular posts from this blog

Week 1: Learning Outcomes and Lab 1 work

Hello world! Welcome to my blog for my Web and U.I. class. Twitter Tasks Our first task was to join twitter and follow our lecturer. So, I reopened my old twitter account (https://twitter.com/Potpan__)  and followed @ dt265.  I also followed: @TOG_Dublin      A Community Hackerspace in Dublin, Ireland. Specialising in coding, electronics, crafting, making. @xkcd      Hilarious nerdy comic that often features mathematics and programming @selator Software developer, posts a lot about SW development @machine_person Python and sql developer @Jeffrey_Roe Engineer, director of TOG @wireframe Nice design company! Observations Wireframing vs. prototyping: What’s the difference? Wireframes are essentially a layout or base of the design. They indicate the structure of what you are displaying/ building. It is important to have the layout down before you start populating the site, as this will help fix initial problems/ issues without having to change the who...
Read more