BLOG_2

 

LAB 2

Part II – Using <meta> in an HTML5 page

1.     Identify four different uses of the meta tag.

Four different uses of the metadata are:

1.SEO optimization: The meta tag is used to provide search engines with information about the content of web page.

2.Character set declaration: The meta tag defines the character encoding for the document .For example “UTF-8” ensures the page can display special characters and symbols correctly.

3. Meta refresh(redirect) tag: This tag is used to automatically refresh or redirect the user to another URL.

4. Meta Cache-Control: This tag instruct the webpage not to cache the webpage

 

1.               Copy the head section/make a screenshot of one of the web pages with the meta tag and paste into your blog.

 <head>

<!--Meta tag for character set-->

<meta charset="UTF-8">

<!--Meta tag for description of website-->

<meta name="description" content="This is a webpage for Fish Creek Animal Hospital">

<!--Meta tag for refreshing the page every 30 sec-->

<meta http-equiv="refresh" content="30">

<!--Meta tag to give keywords-->

<meta name="keywords" content="Animal hospital,Veterinary services, 24/7 pet care">

<title>Fish Creek Animal Hospital</title>

</head>

Part III – Search Engine Optimisation (SEO) (record in blog)

  1. Use ChatGPT to understand better how to incorporate SEO techniques when coding in HTML/CSS. Then use the aforementioned articles or other articles to corroborate which are correct techniques.
    1. Comment on what you found on ChatGPT and whether you could corroborate the techniques outlined by Chat GPT.

ChatGPT provided various techniques to incorporate SEO techniques when coding in HTML/CSS such as title tags, meta descriptions, header tags and page structures. These techniques outlined by ChatGPT matched with SEO advices given in provided articles as follows:

 

Title tags: For title tags, ChatGPT emphasized on including relevant keywords under 60 characters that describe the page content accurately. This advice is like the guidance from Hobo Web’s article on title tags which stressed keeping titles between 50-60 characters and including primary keywords at the start of the title tag. (Hobo Web, 2024)

 

Header tags: According to ChatGPT proper use of header tags helps the search engine understand the hierarchy and importance of content. This advice is like the suggestions given by Pasquale in his article “H1 Tag and SEO: Easy and complete guide for 2022.” However, unlike ChatGPT which focused on using only one H1 tag per page, Pasquale suggests that using one, multiple or no H1 tag is not completely wrong if it gives value to web page. (Pasquale,2022)

 

Meta Descriptions: According to ChatGPT meta descriptions create concise, keyword rich description of the webpage to improve search rates. Ideal length of meta descriptions should be between 150-160 characters. Moz’s beginner Guide to SEO also supports the fact that meta-descriptions affect click through rates but doesn’t impact on search engine rankings. It also suggests keeping meta descriptions between 50-160 characters (including spaces between words) or to 680 pixels. (Moz, 2024)

 

Mobile responsiveness and page speed optimization: According to ChatGPT, creating a mobile-friendly website using responsive design and optimizing the speed of website are the key factors for search engine optimization. This argument is supported by Backlinko’s article on “SEO Trends in 2024 and How to Adapt” by Leigh McKenzie. Here he explains the trends in search engine optimization using AI. (McKenzie, 2024)

 

    1. State four SEO guidelines that you will employ when designing your own websites.

1.     Unique and descriptive title tag

2.     Using header tags properly

3.     Using clear and concise meta descriptions

4.     Mobile friendly website design

 

 

  1. Write two pieces of code that you will include on your Fish Creek website to improve the SEO of the website.

a.      <!-- Meta tag for keywords to improve SEO -->

<meta name =”keywords” content = “Fish Creek Animal Hospital, pet care, veterinary services, surgical services, dental care for pets.”>

b.     <!-- Meta tag for mobile optimization-->

<meta name= “viewport” content = “width=device-width, initial scale=1.0”>

 

References

Hobo Web (2024) How to Write the Best Title Tags for SEO & UX (2024 Guide). Available at: https://www.hobo-web.co.uk/title-tags/  (Accessed: 14 October 2024).

Pasquale, L. (2022) H1 Tag and SEO: Easy and Complete Guide for 2022. Available at: https://increasily.com/h1-tag-and-seo-easy-complete-guide/  (Accessed: 14 October 2024).

Moz (2024) Beginner's Guide to SEO. Available at: https://moz.com/beginners-guide-to-seo   (Accessed: 14 October 2024).

McKenzie, L. (2024) SEO Trends in 2024 and How to Adapt. Backlinko. Available at: https://backlinko.com/seo-this-year  (Accessed: 14 October 2024).

 

Comments

Post a Comment

Popular posts from this blog

BLOG_1

  LAB 1 Part I Read the following article:     https://www.invisionapp.com/inside-design/wireframe-prototype-difference/ a.      In ChatGPT, investigate the disadvantages of using wireframes and prototypes. Copy and paste the output of ChatGPT into your blog Disadvantages of Wireframes 1.Lack of Detail ·        Visual limitations ·        Interaction Limitations 2.Miscommunication ·        Unrealistic Expectations ·        Over-focus on Layout 3.Time-consuming for Complex Projects 4.Limited Usability Testing   Disadvantages of Prototypes 1.High Resource Demand ·        Time and Cost ·        Iteration Burden 2.Misleading Fidelity ·        False Confidence ·        Neglecti...
Read more

BLOG_4

Image
Part I – Coding a Fish Creek Website 1. Alter your Fish Creek code (from previous labs) to use the following: a.       Classes and ids b.      Centring layers c.       The position attribute d.      The float attribute The screenshot of updated code of Fish Creek Website with above mentioned alteration is as follows: index.html code   services.html code                styles.css code  Ensure No. 1 is complete before you answer 2 & 3. Test your code with the HTML validator ( http://validator.w3.org/ ) and the CSS validator ( http://jigsaw.w3.org/css-validator/ ). (record in blog) What are the problems that are highlighted? No errors or warnings were shown. Were you able to fix them?   Test your code across three browsers. (record in blog) The three browsers i...
Read more