SEO For Developers: These Are The Things We Will Go Over

SEO
for developers

These are the things we will go over:
1. Overview of SEO
2. <Title> Tag
3. <Meta Description> Tag
4. <Image alt> tags
5. Links (follow links vs nofollow links)
6. Image links
7. URL best practices
8. HTTP status codes
9. Canonicalization (getting rid of duplicate content)
10. Robots Exclusion Standard (telling Search Engine Bots to Stop indexing certain webpages)
11. Sitemap Syntax (sitemaps tell Google what pages you have on your website)
12. Pagination ( )
13. Facebook/Twitter Social Metadata (makes your page pretty when you share on FB/twitter)
14. Rich Snippets and Structured Data (makes your page have rating stars on Google Search
Results)

Overview of SEO

Search Engine Optimization helps Search Engines crawl and index your site.

Technical SEO for Developers helps you make your website easier to read by Search Engine
crawlers, also called robots or bots.

If your website is more accessible to the Search Engine crawler, it will help your website rank
higher on Google Search Engine Results.

How do Search Engines work?

Search Engine Bots crawl through the internet via <a href> links.

This is an example of a link:

<a href="http://www.example.com/" >Example of a Link</a>

Links allow the search engines' automated robots, called "crawlers" , "spiders," or ‘bots”, to reach the
many billions of interconnected webpages.

Once the engines find these pages, they read the code, and store selected pieces in massive
databases. When they store webpages in their database, it is called indexing.

crawling : The Search Engine Crawler finds your webpage and looks through it.

Indexing : If the Search Engine thinks your webpage is a quality webpage, it will index it. Just
because your webpage is crawled, doesn’t mean it will get indexed.

When a User types a keyword in Google, Google retrieves webpages related to that keyword and
displays it to the User.

When a person performs an online search, the search engine scours billions of documents in their
database. Then it does two things:
1. it returns only those results that are relevant or useful to the searcher's query;
2. second, it ranks those results according to the popularity of the websites serving the
information.

How does a webpage rank high on Search Engines?

Lets say that you type the keyword “nurse jobs in san francisco” into Google.

The Search Engine Algorithm determines relevance and popularity of webpages that relate to “nurse
jobs in san francisco”

These are some of the many search engine ranking factors:
1. Number of Links to a your domain (the more links, the better)
2. Quality of links to your domain (links from The New York Times are better than from spammy
websites)
3. Number of keyword matches in the body of your webpage to the search Keyword
4. How closely the title of your webpage matches the Search keyword
5. Number of Shares on Social media sites

Links to Your Website

If another website links to you, this is considered an external link to your site. The more links you
have to your website, the more popular you become in the eyes of Search Engines. The more links
you have, the higher your webpage appears on the Search Engine Results Page.

Summary

● You need to optimize your webpage for Search Engines, so that more people can visit your
site
● Technical SEO means doing things to the code of the website so that you can rank higher on
the Search Engine
● Technical SEO helps the Search Engine Robots, or Crawlers, to crawl and index your
website.

1. Title Tag

Title tags are important because it tells Search Engines what your webpage is about. If
you don’t have a good <title> tag, Search Engines won’t rank you highly for certain
Search Keywords.

Title tags are put in the <head> of your page:

<head>
<title>Page Title</title>
</head>

Information:
Titles should be between 5070 characters, because they get cut off by Search Engines
You should put important keywords at the beginning of the title
Each Title should be unique
Put the Brand name after the Title

2. Meta description Tag

Meta description tags are important because they
provide short explanations of the contents of
your webpages. Meta descriptions are commonly used on search engine result pages (SERPs) to
display preview snippets for a given page.

<head>
<meta name = “description” content = “ Glassdoor helps you find a job and company you
love. Reviews, salaries and benefits from employees. Interview questions from
candidates. Millions of jobs.”>
</head>

Best Practices:
Best Under 155 Characters. Any longer and it will get cut off by the search Engine
Each Description is Unique
Well written meta tags influence people clicking to your website (click through rate)

Avoid having all the same Meta descriptions:

3. Image alt tags

Image alt tags are important because Search engines use <image alt> tags to understand
what that image is about. If you have a descriptive image, Search Engines will rank it for
that description.
If your image is a sunrise in Paris showing the Notre Dame, the file name shouldn’t be
alt = “DSC4536”, it should be: alt = “notre dame paris sunrise”

<image src = “picture.png”
alt = “Keyword“
width = “100” height = “100” >

You have to have describe what the image is, otherwise, search Engines won’t put your image
on Image search.

4. Internal Linking (helps Search Engines Crawl through
your website)

An internal link is a link that points to another page on the same website. Internal links are important
because they help Search Engine Crawlers crawl through all your website pages.

SEO Best Practice
Every single page in your website must be linked to from another page. If not, the crawler won’t be
able to find your pages. In the example Below, Page C and D are not linked to at all. A Search
Engine will not crawl through them, and won’t index them. Users won’t be able to find your page.

The optimal structure for a website would look like this image below:

These kinds of links are not crawlable by Search Engines:
● Links in SubmissionRequired Forms
● Links Only Accessible Through Internal Search Boxes
● Links in Javascript, Flash, Java, or Other PlugIns
● Links on pages with Hundreds or Thousands of Links
● Links in Frames or IFrames

Search Engines can only crawl through these links:

<a href = “
http://www.example.com
”>Insert Anchor text here</a>

3. Links and Anchor Text

Anchor Text is the visible, clickable text in a link. Anchor text is often blue and underlined, such as
. (the words “this link” is the anchor text)
this link

Anchor text is important because Search engines use this text to help determine the
subject matter of the linkedto webpage. If the anchor text says “Chicago Dentist” and
the URL it links to is
www.bigsmiledental.com , the Search Engine will know that
www.bigsmiledental.com is about Chicago Dentists.

<a href = “ http://www.example.com ”>Insert Anchor text here</a>

Wikipedia uses a lot of Anchor Text to link to its other pages. You can see that they
internally link important keywords in all of their articles to specific pages on their site.
This massively improves user experience, page views and SEO.

4. Nofollow Links
Nofollow links are important to prevent your website from getting spammed,
especially comment spammed.
What is a Follow Link vs Nofollow link?

When a site page (example.com) gets a link
from (abc.com), the (example.com) page gets a small SEO boost.
Think of a link as a point, and the more links you have, the more points.
Google takes note of these points, watching how many links a page has and from what
sites. Google figures if a lot of people are linking to a certain page, it must be a really
good page! And Google Ranks the Page higher on the Search Results.

● Follow links are links that count as points, pushing SEO link juice and boosting
the page rank of the linkedto sites, helping them go higher in the Search
Results.
● Nofollow links are links that don’t help the page gain SEO boost.

Google invented Nofollow because a lot of people will comment spam websites in order to get
links to get a high increase in Search Result ranking.

This is what Nofollow Link looks like:
<a href = “www.example.com” rel=”nofollow> Example </a>

As a developer, you should remember to put a rel = “nofollow” in your comments section.

5. URL Best Practices

URLs should be kept short and human readable. This is good practice for search engines and
User experience. Google is good at crawling all types of URL structures, even if they're quite
complex, but spending the time to make your URLs as simple as possible for both users and
search engines can help you rank higher. Keep a simple URL structure.
Source: https://support.google.com/webmasters/answer/76329

Good URLs:
www.yelp.com/c/boston/indian
www.tripadvisor .com/
Boston
http://www.example.com/greendress

Bad URLs:

http://www.example.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1
http://www.example.com/results?search_type=search_videos&search_query=tpb&search_sort=relevance
http://www.example.com/search/noheaders?click=6EE2BF1AF6A3D705D5561B7C3564D9C2&clickPage=O
PD+Product+Page&cat=79

Overly complex URLs, especially those containing multiple parameters, can cause a problems for crawlers
by creating unnecessarily high numbers of URLs that point to identical or similar content on your site. As a
result, Googlebot may consume much more bandwidth than necessary, or may be unable to completely
index all the content on your site.

SEO tips for URLs:
Choose shorter, humanreadable URLs with descriptive keywords
Google recommends that you use hyphens () instead of underscores (_) in URLs (for example,
www.newyorktimes.com/thisisthenameofthearticle
)
Exclude dynamic parameters (http://www.example.com/hotelsearchresults.jsp?Ne=292&N=461)
place content on the same subdomain. Don’t put content on different subdomains because Search
Engines will think it’s different websites

good: example.com/blog
NOT good: blog.example.com (different subdomains)

6. HTTP Status codes (when you want to get rid of
duplicate content)

HTTP Status Codes are important when the User lands on Page A, but you want to
redirect them to Page B. (Maybe because page A is identical to page B)

1. Use a 301 (permanent) redirect
2. Don’t use a 302 (temporary) redirect because Search
Engines won’t pass SEO power to the Content that is
good

7. Canonicalization (getting rid of duplicate content)

Canonicalization is important when you have duplicate content.

What is canonicalization? Look at the 2 webpages below. They have identical content, but the URLs are not
the same. Google will count this as 2 separate pages, lowering the Search Engine Rankings of both pages.

In this situation, you can use the <link rel= “canonical”> tag to indicate that Page A is the Canonical, or “Real
Page” that you want to rank on Google.

<head>
<link rel = “canonical” href = “www.example.com/thecorrectcanonicalpage”>
</head>

8. Robots Exclusion standard (Make search Engine
Crawlers NOT index certain webpage)

Robots.txt is a text file you create to tell search engine robots how to crawl and index pages on your
website.

You can tell them NOT to crawl and index certain pages, such as an Admin folder.

Robots.txt needs to be placed in the toplevel directory of a web server in order to be useful.
Example: https://www.linkedin.com/robots.txt

Block a specific web crawler from a specific folder
User-agent: Googlebot
Disallow: /admin/
Block a specific web crawler from a specific web page
User-agent: Googlebot
Disallow: /dont-crawl-this-page
Sitemap Parameter
User-agent: *
Disallow:
Sitemap:
http://www.example.com/none-standard-location/sitemap.xml

9. XML Sitemap

This is an xml sitemap: https://www.reddit.com/sitemap.xml

XML sitemaps are important because they are an easy way for webmasters to
inform search engines about pages on their sites that are available for
crawling. In its simplest form, a Sitemap is an XML file that lists URLs of a
website.

Default location is:

www.example.com/sitemap.xml

Benefits to using a xml sitemap

● Your sitemap can list all URLs from your site.
● Giving the search engines priority information.
There is an optional
tag in the sitemap for the priority of the page. This is an indication of
how important a given page is relevant to all the others on your site.
This allows the search engines to order the crawling of their website
based on priority information.

10. Pagination

Pagination is important because you might have a content section with many pages, like
this:

Search Engines think that Page 1 is different from Page 2 and Page 3. And they will
index Page 1, but not index page 2 or 3 because it thinks the other pages are duplicate
content.

What to do: Using rel="next" and rel="prev"
You can use
rel="next"
and
rel="prev"
to indicate the relationship between individual URLs. Using these
attributes tells Search Engines that you want them to treat these pages as a logical sequence.
Let's say you have content paginated into the following URLs:
http://www.example.com/articlepart1.html

In the
<head>
section of the first page (http://www.example.com/articlepart1.html), add a link tag pointing to
the next page in the sequence, like this:
<head>
<link rel="next" href="http://www.example.com/articlepart2.html">
</head>
On the second and third pages, add links pointing to the previous and next URLs in the sequence.
<link rel="prev" href="http://www.example.com/articlepart1.html">
<link rel="next" href="
">
On the final page of the sequence (http://www.example.com/articlepart4.html>), add a link pointing to the
previous URL, like this:
<link rel="prev" href="http://www.example.com/articlepart3.html">

11. Social Media Metadata (makes your webpage pretty
when shared on FB and Twitter)

How to Do this:

The Open Graph protocol enables any web page to become a rich object in a social graph. For
instance, this is used on Facebook to allow any web page to have the same functionality as any
other object on Facebook. It also works on Twitter.
Basic Metadata
To turn your web pages into graph objects, you need to add basic metadata to your page. We've
based the initial version of the protocol on
RDFa
which means that you'll place additional
tags in the
<meta> <head>
of your web page. The four required properties for every page are:
● og:title
- The title of your object as it should appear within the graph, e.g., "The Rock".
● - The
og:type type
of your object, e.g., "video.movie". Depending on the type you specify,
other properties may also be required.
● og:image
- An image URL which should represent your object within the graph.
● og:url
- The canonical URL of your object that will be used as its permanent ID in the
graph, e.g., "http://www.imdb.com/title/tt0117500/".
As an example, the following is the Open Graph protocol markup for
The Rock on IMDB
:
<html prefix="og: http://ogp.me/ns#">

<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

12. Rich Snippets and Structured Data (How to make your
webpage have rating stars on Google Search)

This is a Rich Snippet:

How to Add Rich Snippets to your page:
<script type
="application/ld+json"
>
"@context"
:
"http://schema.org"
,
"@type"
:
"Restaurant"
,
"address"
:
{

"@type"
:
"PostalAddress"
,
"addressLocality"
:
"Sunnyvale"
,
"addressRegion"
:
"CA"
,
"postalCode"
:
"94086"
,
"streetAddress"
:
"1901 Lemur Ave"

},

"aggregateRating"
:
{

"@type"
:
"AggregateRating"
,
"ratingValue"
:
"4"
,
"reviewCount"
:
"250"

},

"name"
:
"GreatFood"
,
"openingHours"
:
[

"Mo-Sa 11:00-14:30"
,
"Mo-Th 17:00-21:30"
,
"Fr-Sa 17:00-22:00"

],

"priceRange"
:
"$$"
,
"servesCuisine"
:
[

"Middle Eastern"
,
"Mediterranean"

],

"telephone"
:
"(408) 714-1489"
,
"url"
:
"http://www.dishdash.com"

}
</script>

Rich Snippets Resources:

http://schema.org/

SEO For Developers: These Are The Things We Will Go Over

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SEO For Developers: These Are The Things We Will Go Over

Uploaded by

Copyright:

Available Formats

SEO

What is a Follow Link vs Nofollow link?

<html prefix="og: http://ogp.me/ns#">

You might also like

SEO For Developers: These Are The Things We Will Go Over

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SEO For Developers: These Are The Things We Will Go Over

Uploaded by

Copyright:

Available Formats

SEO

What is a Follow Link vs Nofollow link?​

<html prefix="og: http://ogp.me/ns#">

You might also like

What is a Follow Link vs Nofollow link?