SEO for Developers | 2020 SEO Tutorial

Summary

This video script offers a comprehensive guide on Search Engine Optimization (SEO) tailored for web developers. It emphasizes the importance of SEO for website traffic and outlines key on-page SEO techniques, such as optimizing title tags, meta descriptions, URL structure, and image compression. The script also highlights the significance of mobile-friendliness and minifying website files for faster loading times, ultimately enhancing the website's ranking on search engines.

Takeaways

• 📈 Understanding basic SEO techniques can significantly improve your website's marketing success and search engine rankings.
• 🔍 SEO has two main sub-categories: on-page and off-page. This guide focuses on on-page SEO relevant to web developers.
• 🏆 Title tags are crucial for search engines to understand a page's content and are a top on-page SEO ranking factor.
• 📝 Meta descriptions should be unique, under 150 characters, and contain primary keywords for relevance and click-through rates.
• 🔗 URLs should be readable, understandable, and reflective of the page's content for better search engine crawling.
• 🏷️ Other meta tags, such as meta keywords, viewport, charset, and author, contribute to a website's SEO, though not as significantly as title and description.
• 🎨 Favicons improve user experience and brand identity by making websites easier to find and visually recognizable in bookmarks.
• 🚀 Page loading speed is vital for SEO; compressing images and avoiding bloat with frameworks can significantly improve it.
• 📸 Using alt tags for images aids search engines in indexing and improves accessibility for users with disabilities.
• 🔗 Anchor tags with title attributes enhance user experience by displaying tooltips and can aid search engines in understanding link destinations.
• 📱 Mobile-friendliness is essential for modern websites, influencing Google's indexing and rankings, and often achieved with media queries in CSS.

Q & A

What is the main focus of the video?

The main focus of the video is to discuss the most important SEO techniques that web developers can use to improve the ranking of the websites they are building.

What are the two main sub-categories of SEO mentioned in the video?

The two main sub-categories of SEO mentioned in the video are on-page SEO and off-page SEO.

Why are title tags important for SEO?

Title tags are important for SEO because they help search engines understand what a page is about and are considered one of the most significant on-page ranking factors.

What should be the ideal length for title tags?

The ideal length for title tags should be around 50 to 60 characters.

How does the description tag help with SEO?

The description tag should be unique, contain the primary keyword, and be under 150 characters. It helps provide a concise summary of the page content, which can improve click-through rates from search engine results.

What is the significance of a URL for SEO?

A URL should be easy to understand and clearly communicate what the page is about. Readable and keyword-rich URLs can help search engines and humans better understand the content of the page.

What is the purpose of meta tags in SEO?

Meta tags provide additional information about the page to search engines. They can include keywords, descriptions, viewport settings, and other metadata that helps improve the page's SEO.

Why is having a favicon.ico beneficial for a website?

Having a favicon.ico improves user experience by making the website easier to find and recognize in bookmarks and tabs. It also enhances the website's visual identity and brand recognition.

How can images affect a website's loading speed and what can be done to optimize them?

Images can significantly slow down a website if they are large in file size. Optimizing images by compressing them without losing much quality can greatly reduce loading times and improve website performance.

What is the importance of mobile-friendliness in modern SEO?

Mobile-friendliness is crucial in modern SEO because Google prioritizes websites that are mobile-friendly in its indexing. Websites that are not optimized for mobile are likely to be ranked lower in search results.

How can keyword usage in headings and content contribute to SEO?

Using main keywords in headings, subheadings, and throughout the content helps search engines understand the focus of the page and can improve the website's ranking for those keyword terms.

Outlines

00:00

🌟 Introduction to SEO Techniques for Web Developers

This paragraph introduces the video's focus on essential SEO techniques relevant to web developers. It emphasizes the importance of SEO for website marketing and highlights the common confusion around SEO practices. The guide aims to clarify SEO basics specifically for developers, excluding topics better suited for SEO experts, marketers, and business owners, and begins with an explanation of what SEO is and its benefits for websites.

05:01

📝 Optimizing Title and Description Tags

The second paragraph delves into the significance of title and description tags in SEO. It explains that these tags are crucial for search engines to understand the content of a page. The paragraph provides guidelines for optimizing titles and descriptions, including their recommended length and the inclusion of primary keywords. It also demonstrates how to implement these tags in HTML using Visual Studio Code.

10:02

🔗 Crafting SEO-Friendly URLs and Meta Tags

This section discusses the role of URLs and various meta tags in SEO. It emphasizes the need for URLs to be readable and descriptive to improve search engine crawling. The paragraph also covers the use of meta tags such as meta keywords, viewport, charset, and author tags, explaining their purpose and how they contribute to better SEO rankings and website optimization.

15:03

🖼️ Enhancing User Experience with Favicon and Image Optimization

The fourth paragraph focuses on the user experience aspect of SEO, starting with the importance of having a favicon for brand recognition and ease of bookmark identification. It then moves on to image optimization, discussing the impact of large image files on website speed and providing a step-by-step guide on how to compress images using online tools, improving page load times and SEO rankings.

20:07

📱 Importance of Mobile-Friendly Websites and Minification

The final paragraph underscores the necessity of mobile-friendly websites, as Google prioritizes such sites in its indexing. It briefly touches on the use of media queries in CSS for responsive design. The paragraph also talks about minifying and compressing HTML, CSS, and JavaScript files to reduce file sizes and improve website speed, which positively affects SEO. Lastly, it reiterates the importance of keyword usage across various website elements for better search engine rankings.

Keywords

💡SEO (Search Engine Optimization)

SEO refers to the practice of increasing the quantity and quality of traffic to a website through organic search results. In the context of the video, it is emphasized as a crucial aspect of website development that can significantly impact a website's visibility and success. The video outlines basic SEO techniques such as optimizing title tags, meta descriptions, and URL structures to improve search engine rankings.

💡On-Page SEO

On-Page SEO involves optimizing the content and HTML source code of a page to make it more search engine-friendly. The video focuses on on-page SEO techniques that developers can implement, such as proper use of title tags, meta descriptions, and header tags, which directly influence a website's ranking on search engines like Google.

💡Title Tag

A title tag is an HTML element that defines the title of a web page, which is displayed in the browser's title bar or in the page's tab. It is a critical on-page SEO element as it helps search engines understand the page's content and is a significant factor in ranking. The video emphasizes the importance of optimizing title tags with relevant keywords and keeping them within the recommended character length to improve click-through rates.

💡Meta Description

A meta description is an HTML tag that provides a brief summary or description of a web page's content. It appears in search engine results as a snippet under the page title, influencing click-through rates. While not a direct ranking factor, a well-crafted meta description with relevant keywords can enhance SEO by improving the page's visibility and吸引力.

💡URL Structure

The URL structure refers to the format and components of a web address. A well-structured URL that is readable and descriptive can improve SEO by making it easier for search engines to understand the page's content. The video suggests using URLs that are easy to understand and include relevant keywords to better communicate the page's subject matter to both search engines and users.

💡Meta Tags

Meta tags are HTML elements that provide metadata about a web page to the browser and search engines. They can include keywords, descriptions, viewport settings, and other information that helps search engines index and rank pages effectively. The video discusses various meta tags, such as meta keywords, meta viewport, and meta charset, which are essential for optimizing a website's SEO.

💡Favicon

A favicon, or 'favorites icon,' is a small icon associated with a website that appears in the browser tab, next to the website's title. It enhances user experience by making the website easily recognizable and memorable among bookmarks. The video suggests including a favicon to improve brand identity and visual appeal.

💡Page Loading Speed

Page loading speed refers to how quickly a web page loads on a user's device. A faster loading speed improves user experience and is a ranking factor for search engines. The video emphasizes the importance of optimizing images and avoiding unnecessary scripts or libraries to reduce page bloat and improve loading times.

💡Mobile-Friendly Website

A mobile-friendly website is designed to provide an optimal viewing and interaction experience across a wide range of devices and screen sizes. With the increasing use of mobile devices for internet access, having a mobile-friendly website is crucial for reaching a broader audience and improving SEO, as search engines like Google prioritize mobile-friendly sites in their rankings.

💡Minification and Compression

Minification and compression are processes used to reduce the size of website files such as HTML, CSS, and JavaScript. By removing unnecessary characters and spaces, these techniques improve page loading speed, which is beneficial for both user experience and SEO. Smaller file sizes mean faster load times, which can lead to higher search engine rankings.

💡Keyword Usage

Keyword usage refers to the strategic placement of relevant words and phrases throughout a website's content to improve its visibility in search engine results. The video highlights the importance of including main keywords in titles, meta descriptions, headings, and content to increase the website's ranking for those terms.

Highlights

The video discusses crucial SEO techniques for web developers to improve website traffic and rankings.

SEO practices often have contradictory and outdated information, but understanding basics can significantly aid website success.

The guide focuses on SEO topics relevant to web developers, excluding those better suited for experts, marketers, and business owners.

SEO or Search Engine Optimization is the process of increasing website traffic quality and quantity.

There are two main sub-categories of SEO: on-page and off-page, with the video focusing on on-page SEO.

Title tags are essential for helping search engines understand a page's content and are the most important on-page SEO ranking factor.

Title tags should contain main keywords and be optimized for character length and click rate.

Meta description tags should be unique, under 150 characters, and relevant to the website's topic.

URLs should be readable, understandable, and informative about the page's content for both search engines and humans.

Other important meta tags include keywords, viewport, charset, and author, each contributing to better search engine understanding and rankings.

Favicons improve user experience and brand identity, making websites easier to find and visually identifiable.

Page load speed is vital for SEO, with faster pages ranking better; compressing images and avoiding bloated code can improve speed.

Alt tags for images help search engines index images and improve accessibility for users.

Anchor tags with title attributes provide clarity on link destinations and assist search engines.

Mobile-friendly websites are critical for modern online presence, with Google prioritizing mobile-friendly sites in search rankings.

Minifying and compressing HTML, CSS, and JavaScript files can significantly reduce file sizes and improve load times.

Proper keyword usage in titles, meta descriptions, headings, and content can enhance a website's ranking for those terms.

Transcripts

[Music]

hello everyone and welcome to another

javascript mastery video today we are

going to go over the most important

techniques that you can use to improve

the ceo of the website you're building

there are a lot of factors regarding seo

from a marketing standpoint luckily

understanding a few basics about ceo

will go a long way to your website's

overall success searching for best ceo

practices often returns contradictory

and outdated information or topics

related to keyword research content

optimization and link building it can be

really easy to get lost in all the

constant updates and dismiss ceo as

something only ceo experts should do

this ceo guide jumps right into the main

part it focuses only on ceo topics

relevant to the web developers it skips

ceo topics which are better suited for

ceo experts marketers and business

owners for example keyword building and

content optimization so let's dive right

in

firstly we need to explain what ceo is

and what are the main benefits of the

websites that follow good ceo techniques

and secondly we are going to go over

factors that developers can directly

implement to get higher rankings on

google

so ceo or search engine optimization is

the process of increasing the quality

and quantity of website traffic simply

put better ceo equals more visitors to

your or your clients site

there are two main sub-categories of ceo

on-page and off-page ceo

off-page ceo refers mostly to factors

that we cannot affect for example the

niche of the website of your client the

outside links pointing to it high

quality content etc on-page ceo on the

other hand is a developer's job it

greatly affects the rankings of the

website on google and other search

engines in this video we are going to

focus solely on the aspects of on-page

ceo that can be implemented directly by

you the developer quickly and without

any issues inside of here we have basic

index.html structure

if you're in visual studio code you can

just type html5

or html and then choose this syntax and

it is automatically going to generate it

for you if you're using

some other text editor this may not be

the case but then you can simply type

this out and then we are ready to go

so now that is out of the way we can go

back to our presentation and start with

our first ceo guideline

and it is the title

title tags are a huge signal in helping

search engines understand what your page

is about

they are arguably the most important

on-page ceo ranking factor and should

contain the main keywords that your page

is targeting

so what is the title tag inside of here

we can see that we googled saturday

night live for example and right here on

google search this saturday night live

dash nbc.com this is the title of the

website so you are actually choosing

what is going to be displayed and this

greatly affects the click rate if the

title is for example boring or too long

not many people are going to click on it

so it is really important that we

optimize our titles

uh and as it says here title tags should

be around 50 to 60 characters in length

so let's get back to our visual studio

code and let's actually see where we can

put that title

uh visual studio code actually brought

our title right here so it is just a

title tag basic tag opening and closing

one and inside of here we can put the

title of our website

so let's type something like

learn

javascript

and then we can put dash javascript

mastery

this is one example of the title

and

you can see right here that it includes

many keywords for example it includes

javascript

or learn javascript as a separate

keyword and then we have the name or the

title of our website right now we can go

into the browser

right now we can open this file inside

of the browser by going into reveal in

finder or

something else if you're on windows

and once we have it opened we should see

the title on top of our page

so let's see so the page is now

completely blank nothing on there but

right here you can see that there is

learn javascript javascript mastery so

first step solved now we can get back to

our presentation and see what else

should we do

so the second thing that we need to do

is the description as with the title

description should be unique and should

contain the primary keyword as with the

title descriptions should be unique and

should contain the primary keyword they

should also be under 150 characters and

they should be relevant to the topic of

your website so let's see how we can

implement the description we can add our

description by creating a meta tag so it

is a self-closing tag and inside of here

we can write name equal to description

and content equal to the description

that we want to put in for example if we

are talking about javascript mastery we

can put something like this

so

the purpose of javascript mastery is to

help aspiring and establish developers

to take their development skills to the

next level and build awesome apps you

can also throw in a few more keyboards

but in here we have development web

development javascript and stuff like

that so basically this needs to be

suited to your own website we can also

create uh comments right here just so we

know what we are doing currently so this

is a meta description we already created

a title

we're going to go over these tags in

just a moment but for now let's get back

to our presentation third thing on our

list is url url needs to explain what

the website is about it needs to be easy

to understand and tell search engines

and humans what the page is about

so regarding the urls we cannot

implement that right here but we can

give some examples for example we have

someone's blog

uh let's say that the domain name of his

blog is

https

and then domain name or let's say his

name so john doe for example uh john

doesblog.com and now right here we'll

have something like slash blog

uh it would be nice if every blog so

every specific article has characters

something like this

or even

some

id code which is like this this isn't

readable neither to the browser nor the

search engine nor to the human so it

would be better if it were something

like slash blog and then slash

uh the

title so the title of the the each

specific blog let's say this one is

about dogs and then we can name it docs

or something like that so urls need to

be readable and then search engines will

crawl better

okay now that this is out of the way we

can go to the fourth one

fourth one is actually other meta tags

so uh with the title tag and the

description tag there are a lot of other

meta tags that are important not as

important as the description in the

title of course but they still hold some

value so in here we can see that we have

meta keywords attribute a meta keywords

is a series of keywords you deemed

relevant to the page in question so for

example if we go right here we can

create that meta tag for ourselves we

already learned that meta tags are self

closing tags and that we define them by

name so meta name equal keywords

and then inside of here we can put

content

and then

we can write our keywords

uh with comma separated values so inside

of here we can write something like html

css javascript

we can also do js

web

development

we can even divide it

and stuff like that they do not need to

be upper case they just are in this

example and this is basically it for the

keywords it simply helps google and

other search engines understand better

what the website is about

with the keywords we also have a meta

viewport it gives the browser

instructions on how to control the pages

dimensions and scaling

so in here we can see that visual studio

code already created a viewport for us

so we are simply going to put a comment

meta viewport this is one of the most

used viewports it simply scales

everything uh if your website is mobile

friendly we are going to get to that

later it simply scales it nicely on

mobile devices we can also create our

comment for our keywords so we're going

to type meta keywords

and this is just some other meta type

that we are not going to talk in

specific in this video but as you can

probably read from this it is about

compatibility with uh internet explorer

edge

so we're going to type

meta

edge for example doesn't matter

we have a few more meta tags for example

we have meta chart set which defines a

character set so we are using utf

basically all characters and it is in

english so it simply helps google and

search engines rank rank the website

better and we have author which is used

a lot with blogs so if your website is

something like a cms content management

system where a lot of new websites are

going to be generated inside of it then

we can add an author meta tag to each uh

one of the new websites so inside of

here we can just put a comment for our

charts chart set we use utf right here

which is basically universal so we can

type meta chart set

and inside of here at the bottom we can

create meta

author and just below we can create a

new meta tag which has a name of author

and it also has a content

of the author's name for example john

doe

and we can close it and that's it there

are a lot of subtle changes right here

but each one of this helps google to

rank your websites better you can think

of that this way

most developers aren't concerned with

ceo and therefore your website which has

this is going to rank most likely better

than the competitors

okay we can get back to our fifth slide

which is favicon

so the main reason your website should

have a favicon icon is improving user

experience it is much much easier to

find the needed bookmark by image

associated with a certain website rather

than looking through different urls

so it goes side by side next to your url

uh it improves your visual identity

brand identity and simply makes your

website easier to find and look better

so as you can see right here on the

picture it shows on the chrome tab right

next to the title so we can go on the

internet and find some random favicon so

i can show you how to put it there so if

we go inside of the google and type

something like favicon we can see right

here we can click on any of this i guess

and we should see some favicons uh in

here we can generate favicons from

images which most people will find

really useful but we can also browse the

falicon gallery for example let's type

website

just something generic and if we right

click and save it we can save it to our

directory and then we'll be able to put

it inside of the website okay we are

back inside of the visual studio code

favicon is here make sure that you

rename it to favicon if it isn't already

we specify the favicon icon with a link

tag which is a self-closing tag

and inside of here we need to put rel

and it can be equal to

shortcut

icon

which is basically used for

accessibility we can also choose the

type of our image so we can type type

and it is going to be equal to image and

then forward slash ico

and the most important part we need to

target it so we're going to type href

and then we are going to type dot slash

favicon.ico

after we save that and we open our

website inside of the browser we are

going to see the changes so right here

on top if you can see next to our title

we have our favicon it is really small

but i hope you can see it it is also

going to show up when you save the

website so if you save it right here you

can see that the title and the favicon

are right here

great now we can get back to our

presentation and we can go to the next

very very important ceo tip

so

regarding ceo the faster the page loads

the better so we need to make sure that

we do not bloat the website with

different frameworks libraries jquery

for example and this goes for pictures

or images

so if you're posting an image in your

content you must compress it images are

one of the big causes of a slow website

there are a ton of different online

compressors

this is just one example so it is

compress

jpeg.com

if you go right here you can upload an

image and it is going to compress it so

let's see how this compression actually

works we can go on google and search for

copyright free images if you create

websites you are not allowed to use all

images you find on the web so unsplash

is a great website that has all the

photos that you can really use so inside

of here why not search for dogs dogs are

always cute

so inside of here

we can choose one image and we can

download it now we can put this image

inside of our visual studio code and we

can actually

display it in our html so we're going to

create an image tag which is a self

closing tag it is going to have a source

attribute with dogs.jpg

so inside of here uh if we save that and

put it as it is we can also just correct

the width to let's say 25 percent now we

can go back inside of the browser and

see how it looks and if you go right

here you can see an image now we can

choose the same image and then upload it

to our compressor

okay right here you can see that it has

1.6 megabytes

that is really a lot when it comes to

websites for example the whole size of

your html css or javascript can be in

kilobytes but this image alone has 1.6

megabytes which is a lot so now the

image was downloaded and we can put it

back inside of the visual studio code we

can rename it to something like dogs.min

that jpeg

and we can put it next to this image

just by typing dogs that mean that jpeg

with the same width

so now if we go back and go inside of

the website and refresh you should be

able to see the difference right

um

well i personally cannot see any

so this compressor does its job really

good it compresses the image but

basically the quality stays the same or

almost the same

it it is definitely unnoticeable to the

human eye but what happened to the size

of the file so if we inspect this images

let's see how the file size changed so

let's collapse this right here and then

let's open this right here so we can see

that the unminified version has 1.6

megabytes and that the minified version

has only

576 kilobytes so that is about three

times less than the original image and

the quality stayed almost the same

that's it for the images now let's see

what else can we do while we are at

images we also have some attributes so

attributes to this images can be alt

tags basically it stands for alternative

content

they help search engines associate

images with a web page's content so they

can properly index it within their

search results we can add our alt tag

right here so alt is equal to and then

the content

when you're doing alts you do not need

to say something like docs and then say

again images it already knows that this

is an image so this is redundant you can

just type dogs or

uh for example two dogs

playing and then your image is actually

going to show in google's search results

while we're at this we can copy this and

put it inside of this compressed image

and then we can delete this and simply

add a comment

uh

optimized uh image with an alt tag

simple as that

okay now this doesn't change anything

in how we see the picture this just

changes how search engines index it and

also it is used for accessibility so for

example for blind people it is going to

read this text to them so they can

actually know what the image is about we

also have anchor tags so anchor tags are

basically links and we can specify the

title of an attribute it is displayed as

a tooltip in most browser basically it

appears in a small bubble

we are going to see how it looks just

now so we can create a normal anchor tag

that looks like this

and we can put href which points to

https and then

google.com

and inside of here we're going to write

google

okay so if we go back to our website if

we click it it goes to google as we

anticipated

okay now that is ready we can actually

go back and put an title tag

to our anchor tag so inside of here we

are going to say something like google

this is just a basic example but with

some links it isn't clear where the link

is going so uh there can be something

else in the title for this example we're

going to use just google and then if we

save and refresh when you hover over the

link you can see that this google title

showed up and this also helps search

engines

okay let's go back to our presentation

and this eighth tip right here is one of

the really really important aspects of

ceo nowadays everyone is using a phone

sometimes or for some websites or most

of the websites actually we access them

by a phone so

why would you limit yourself to not

having a mobile friendly website it is a

critical part of your online presence

for the last few years google's indexing

has been really focused on promoting the

websites that are mobile friendly and

the ones that aren't are going to be

ranked lower on the google search so it

is really important to implement that

mobile friendliness

uh we are not going to do that right now

because we do not have a website right

here uh we can create that in another

video if you'd be interested creating a

whole website from scratch with html and

css for example with deployment but for

now let's just say how we can make the

website mobile friendly so in here we

already mentioned that we have this meta

viewport right here the most of the

mobile friendly optimization is going to

be happening inside of the css file

where you're going to use media queries

so i'm just going to put it right here

media queries you need to use media

queries to

showcase your website differently across

all devices

and now to our ninth tip which is minify

and compress we already mentioned that

the smaller the file size the faster the

website will load and the google is

going to rank it better so when you

minify your website css html and

javascript files you can uh well save

not shave some valuable time off of your

site's slow speed okay so

how are we going to

uh shave of that some valuable time

um basically we need to minify and

compress our js html and css

the same thing with the two images we

compressed it we can also compress our

html js and css there are a lot of

websites that do this online i'm going

to put one of them in description

this one basically covers all three of

them so what minification actually is

is that if you go inside of here you can

see that there are a lot of spaces right

here so we have a space space space

basically humans use spaces to improve

readability but the browser doesn't need

spaces so we can remove something like

let's say this space right here this

space and all of the spaces that we have

uh this of course looks stupid in

website that has 26 six lines but

websites that have a lot of lines and a

lot of different uh

logic for example in javascript they can

be compressed and simplified a lot

so that's it for this tip and the last

step is keyword usage so if you're

creating a website for a client and he

doesn't yet know what you want to put on

the website make sure that keywords

appear in a title meta description and

headings so if the website is about

let's say javascript as we said right

here we need to use the main keywords

across all the websites so they need to

be used inside of the content of the

keywords description title even the url

or the domain name we need to place the

main keywords in headings subheadings

and basically anywhere where we can

squeeze it so for example if our page is

about javascript and the branded

javascript mastery we can for example

create an h1 every website needs an h1

and then we can simply put learn

javascript

with

javascript

mastery

simple as that we used a lot of keywords

and although sometimes it may seem

repetitive the more keywords that you

put the website will rank better for

that keyword term i really hope that you

learned something new

if you like this video feel free to stay

tuned and subscribe to javascript

mastery a lot of new people have been

joining lately and the growth has been

amazing we are just about to hit 10k

subscribers so feel free to be one of

them this was more of a beginner

oriented video but here in javascript

mastery we cover everything from

beginner html and css all the way to

javascript and then react deployment and

building different projects and websites

so if you like the content that i'm

creating feel free to subscribe and stay

tuned for more

[Laughter]

[Music]

[Music]

you