SEO Basic knowledge & Best practices for Web Developer

BinhTD -

What is SEO?

SEO (Search engine optimization) is the task of optimizing your website to rank high with search engines (Google, Bing, Yahoo,...).

Search engine optimization is an indispensable part that helps your website easily reach users, thereby bringing great benefits. To easily optimize search engines, we need to know how search engines work.

How do search engines work?

Google search engine docs

For a website to be found and displayed when you perform a search on Google, the Google search engine must carry out three steps:

  1. Crawling: Google automatically downloads all resources from websites found on the internet.
  2. Indexing: Google analyzes the resources downloaded in step 1, categorizes them, and stores the information in Google's database.
  3. Serving search results (Ranking): When someone performs a search, Google uses its algorithm to return the most relevant and optimized information based on the keywords used in the search.

Classification of SEO Optimization Methods

SEO is divided into two types: On-page and Off-page.

  • On-page SEO: is the task of optimizing search engines on your own website, including optimizing content and enhancing user experience to help search engines easily understand and categorize your website's content.
  • Off-page SEO: is the task of optimizing search engines outside of your website by building links pointing to your website to increase the popularity and credibility of your website among users. Since the scope of this article is intended for web developers, we will focus only on Onpage SEO in this article.

Basic Factors Affecting SEO on Your Website

There are many factors within a website that affect its ranking on Google searches. The basic factors that directly influence the functioning steps of the Google search engine include:

  1. Links: The links within your website directly impact the Crawling step of the search engine, making it easier for the search engine to find existing URLs on your website.
  2. Contents: Optimizing your website's content directly affects the Indexing and Serving search results steps of the search engine. It helps the search engine easily categorize the content of your website through metadata, title, description, keywords, etc.
  3. UX (User Experience): Optimizing user experience increases user interaction with the website, as well as helps the search engine speed up data crawling and enhances the search engine's rating of your website.
  4. Device Compatibility: Search engines rank websites based on device compatibility, so ensuring your website is compatible with various devices will improve the search engine's rating. Additionally, since the majority of users access the web via mobile devices, the Google search engine prioritizes mobile-first crawling and indexing.

SEO best practices for developer

1. sitemap.xml + robots.txt

The sitemap.xml file is a map of your website designed to provide search engines with the URLs of your web pages, helping search engines quickly crawl the resources of your entire website. Adding a sitemap ensures that your website is properly indexed. It is typically located in the root directory of your website, such as https://www.example.com/sitemap.xml. The sitemap.xml file should ensure the following:

  1. Sitemap Size Limitations: All formats limit a sitemap to 50MB (uncompressed) or 50,000 URLs. If you have a larger file or more URLs, you must split your sitemap into multiple sitemaps.
  2. Sitemap File Encoding and Location: The sitemap file must be UTF-8 encoded.
  3. Referenced URL Attributes: Use absolute, fully qualified URLs in your sitemap. Google will attempt to crawl your URLs exactly as listed. For example, if your website is at https://www.example.com/, do not specify URLs like /mypage.html (relative URL); instead, use the absolute, full URL: https://www.example.com/mypage.html. Additionally, ensure your website is properly indexed by making sure all pages listed in your XML sitemap do not have 404 errors, wasted redirects, and have clear codes.

Example: A sitemap.xml file will look like this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
        <loc>https://www.example.com</loc>
        <lastmod>2022-06-04</lastmod>
    </url>
    <url>
        <loc>https://www.example.com/foo.html</loc>
        <lastmod>2022-06-04</lastmod>
    </url>
</urlset>

You can control which files crawlers can access on your website using the robots.txt file. The robots.txt file always resides in the root directory of your website, such as https://www.example.com/robots.txt. The robots.txt file contains one or more rules. When you do not specify otherwise in your robots.txt file, all files are allowed to be crawled entirely. A simple robots.txt file has two rules:

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: https://www.example.com/sitemap.xml

Explanation of elements:

  • User-agent: Specifies which search engine crawlers the rule applies to. An asterisk (*) means the rule applies to all crawlers.
  • Disallow: Specifies the files or directories that are not allowed to be crawled. In this example, the /nogooglebot/ directory is disallowed.

2. Canonical

When Google crawls a website, there can be duplicate content pages for various reasons:

  1. Region variants: Content for US and UK regions might be accessible from different URLs but is essentially the same content in the same language.
  2. Device variants: Different versions for desktop and mobile.
  3. Protocol variants: HTTP and HTTPS versions.
  4. Site functions: Results of sorting and filtering functions on a category page.
  5. Accidental variants: A demo version of the website accidentally accessed by the crawler.

Having multiple pages with duplicate content makes it difficult for Google to distinguish which one to display in search results. Therefore, we need to standardize URLs to help Google select the representative page to display in search results.

Google supports the rel="canonical" link element to suggest that alternate versions of a page be ignored. Add an element with the rel="canonical" attribute to the <head> section of the duplicate pages, pointing to the canonical (standard) page.

<html>
<head>
<title>Explore the world of dresses</title>
<link rel="canonical" href="https://example.com/dresses/green-dresses" />
<!-- other elements -->
</head>
<!-- rest of the HTML -->

If the canonical page has a mobile version on a separate URL, add a rel="alternate" link element, pointing to the mobile version of the page.

<html>
<head>
<title>Explore the world of dresses</title>
<link rel="alternate" media="only screen and (max-width: 640px)"  href="https://m.example.com/dresses/green-dresses">
<link rel="canonical" href="https://example.com/dresses/green-dresses" />
<!-- other elements -->
</head>
<!-- rest of the HTML -->

Google uses links as a signal to determine the relevance of pages and to discover new pages to crawl. Google can only crawl your links if they are HTML elements with an href attribute.

Best Practices for Links:

✅ Good:

<a href="/product">Product</a>
<a href="https://example.com/product">Product</a>

❌ Bad

<a href="javascript:goTo('product')">Product</a>
<a onclick="goTo('product')">Product</a>

Using Anchor Text:

Anchor text helps users and Google understands the content of the page being linked to.

✅ Good

<a href="/sell-motorbike">Sell motorbike</a>

❌ Bad

<a href="/sell-motorbike">Click here</a>

Handling Untrusted External Links:

Untrusted external links can reduce your website's credibility. Use the rel="nofollow" attribute for untrusted external links.

Example:

<a rel="nofollow" href="http://danger.com">External link</a>

Explanation:

  • HTML Links with href Attribute:
    Google can crawl links that are HTML elements with an href attribute, ensuring they can follow and index the link properly.
  • Anchor Text:
    Using descriptive anchor text helps both users and search engines understand the destination of the link, improving the user experience and SEO relevance.
  • Nofollow Attribute:
    The rel="nofollow" attribute tells search engines not to pass any ranking credit to the linked page. This is useful for linking to untrusted or irrelevant external sites to avoid negatively impacting your own site's reputation.

By following these best practices, you ensure that your website's links are effectively supporting your SEO efforts and maintaining the credibility of your site.

4. URLs

Clear and Keyword-Rich URLs:
URLs should be clear, descriptive, and contain keywords that reflect the topic of the webpage. Avoid special characters, spaces, and use lowercase letters.

Example:

❌ Bad: /motorbikes/124432
✅ Good: /motorbikes/2019-honda-rs150/

Hierarchy and Structure:
Organize URLs hierarchically, especially if your website has categories, to make it easier for users and search engines to understand and categorize your content.

Best Practices:

 ✅ Good: /motorbikes/honda/2019-honda-rs150

Explanation:

  • Clear and Keyword-Rich URLs:
    Clear URLs that include relevant keywords help users and search engines understand the content of the page before clicking on the link. They also improve SEO by incorporating keywords that users might search for.
  • Hierarchy and Structure:
    Structuring URLs hierarchically, especially in e-commerce or content-heavy websites, improves organization and helps with SEO categorization. It also provides a logical path for users to navigate through different sections of your site.

By implementing these best practices, you can create URLs that are both user-friendly and optimized for search engines, enhancing the overall SEO performance of your website.

5. Metadata

Metadata provides information about your website to search engines and social media platforms. Your website should include the following standard meta tags:

  • title
<html>
<head>
<title>Explore the world of dresses</title>
</head>
<!-- rest of the HTML -->
  • description
<html>
<head>
<meta name="description" content="Learn how to optimize your website for SEO by following this complete checklist." />
</head>
<!-- rest of the HTML -->
  • keywords
<html>
<head>
<meta name="keywords" content="seo complete checklist, seo tutorial, standard seo" />
</head>
<!-- rest of the HTML -->
  • robots
<html>
<head>
 <meta name="robots" content="index, follow" />
 <meta name="googlebot" content="index, follow" />
</head>
<!-- rest of the HTML -->
  • viewport
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<!-- rest of the HTML -->
  • charSet
<html>
<head>
<meta charSet="utf-8" />
</head>
<!-- rest of the HTML -->
  • Open Graph metadata
<html>
<head>
   <meta property="og:site_name" content="Blog | InvestIdea Tech" />
   <meta property="og:locale" content="en_US" />
   <meta property="og:title" content="SEO best practices: The Complete Checklist to Boost Your Site Ranking" />
   <meta property="og:description" content="Learn how to optimize your website for SEO by following this complete checklist." />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://investidea.tech/blog/seo-best-practices" />
   <meta property="og:image" content="https://investidea.tech/assets/thumbnail.png?tr=f-png" />
   <meta property="og:image:alt" content="SEO best practices" />
   <meta property="og:image:type" content="image/png" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
</head>
<!-- rest of the HTML -->
  • Twitter metadata
<html>
<head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@investidea" />
  <meta name="twitter:creator" content="@investidea" />
  <meta name="twitter:title" content="SEO best practices: The Complete Checklist to Boost Your Site Ranking" />
  <meta name="twitter:description" content="Learn how to optimize your website for SEO by following this complete checklist." />
  <meta name="twitter:image" content="https://investidea.tech/assets/thumbnail.png?tr=f-png" />
</head>
<!-- rest of the HTML -->

6. JSON-LD Schema

JSON-LD (JavaScript Object Notation for Linked Data) is a script embedded within <script> tags in HTML that combine JSON with Linked Data principles. Using JSON-LD with Schema markup helps make your website more engaging for users by providing additional useful information. For search engines, JSON-LD helps them better understand and interpret your website's content, facilitating more efficient indexing and classification.

  1. Recipe: Displays important information about a recipe or culinary topic, such as dish name, preparation time, calorie count, ratings, etc.
  2. Organization: Displays information related to the organization owning the website, such as name, address, phone number, and website URL.
  3. Event: Displays important details about an event, such as event name, date, location, etc.
  4. Product: Displays information about a product, including product name, price, ratings, etc.
  5. Review: Displays review and rating information for a specific product.

Example:

<html>
<head>
<script type=”application/ld+json“>
{
“@context“: “https://schema.org“,
“@type“: “Organization“,
“url“: “http://www.example.com“,
“name“: “Unlimited Ball Bearings Corp.“,
“contactPoint“: {
    “@type“: “ContactPoint“,
    “telephone“: “+1-401-555-1212“,
    “contactType“: “Customer service”
    }
}
</script>
</head>
<!-- rest of the HTML -->

Benefits of JSON-LD Schema:

  • Enhanced User Engagement: Provides users with more informative content snippets in search results.
  • Improved SEO: This helps search engines understand and index your content more accurately.
  • Structured Data: Organizes data in a standardized format that is easier for machines to interpret.

By implementing JSON-LD Schema markup, you can enhance your website's visibility in search engine results and provide richer, more relevant information to users.

You can use the following tools to create and validate JSON-LD Schema for your website:

  1. JSON-LD Schema Generator Tool: You can use the Schema Markup Generator tool from Technical SEO to create JSON-LD Schema for various data types such as Recipe, Organization, Event, Product, and Review. Here is the link to this tool: Schema Markup Generator.
  2. JSON-LD Schema Validation Tool: After generating JSON-LD Schema, it's important to validate it to ensure that it is correctly understood and processed by search engines, especially Google. Google provides a tool to check and validate your structured data. Here is the link to this tool: Google's Structured Data Testing Tool.

7. Semantic HTML

Semantic HTML tags are important for SEO (search engine optimization) because they indicate the role of the content within the tags.

That information gives search engine crawlers, like Googlebot, a better understanding of your content. This increases the chances that your content will be selected as a candidate for ranking on the search engine results page (SERP) for relevant keywords.

To put it simply, pages with correctly implemented semantic HTML have an advantage in SEO over those that don’t.

Semantic HTML elements are divided into two categories based on their usage:

  • HTML semantic tags for structure

+ <header>: The header tag defines content that should be considered the introductory information of a page or section

+ <nav>: The navigation tag is used for navigation links. It can be nested within the <header> tag, but secondary navigation <nav> tags are also commonly used elsewhere on the page.

+ <main>: This tag contains the main content (also called the body) of a page. There should be only one tag per page.

+ <article>: The article tag defines content that could stand independently of the page or site it’s on. It does not necessarily mean a “blog post.” Think of it more as “an article of clothing”—a self-contained item that can be used in various contexts.

+ <section>: Using <section> is a way of grouping nearby content of a similar theme. A section tag differs from an article tag. It isn’t necessarily self-contained, but it forms part of something else.

+ <aside>: An aside element defines content that’s less important. It’s often used for sidebars—areas that add complementary but nonessential information.

+ <footer>: You use <footer> at the bottom of a page. It usually includes contact information, copyright information, and some site navigation.

  • HTML semantic tags for text

Some common examples:

+ <h1> (heading): The H1 tag marks the top level heading. There’s usually only one H1 heading per page.

+ <h2> to <h6> (subheadings): The subheadings of various levels of importance. There can be multiple headings of the same level on a single page.

+ <p> (paragraph): A standalone paragraph of text.

+ <a> (anchor): Used to mark up a hyperlink from one page to another.

+ <ol> (ordered list): A list of items that are displayed in a particular order, starting with bullet points. One <li> (list item) tag contains a single item in the list.

+ <ul> (unordered list): A list of items that do not need to be displayed in a particular order, starting with ordinal numbers. One <li> (list item) tag contains a single item of the list.

8. Redirects

Redirecting URLs is the practice of resolving an existing URL to a different one, effectively telling your visitors and Google Search that a page has a new location. Google Search uses redirects as a strong or weak signal that the redirect target should be canonical. Two types of redirects:

  • Permanent redirects: A strong signal that the redirect target should be canonical, showing the new redirect target in search results. Examples: Redirect code HTTP 301, HTTP 308
  • Temporary redirects: A weak signal that the redirect target should be canonical, Show the source page in search results. Examples: Redirect code HTTP 302, HTTP 303, HTTP 307

9. Content

  • Server-side rendering

Server-side rendering and client-side rendering are two different approaches to rendering content for web pages.

Server-side rendering is also better for SEO because it allows search engines to crawl and index the content on a website easily. This is because the HTML is fully rendered and ready to be indexed as soon as it is received by the search engine's bots. This is in contrast to client-side rendering, where the content is generated dynamically by the client's browser using JavaScript. Search engines may have difficulty crawling and indexing content generated dynamically, as they may not be able to execute the JavaScript code required to generate the content.

  • Heading tag

Each page should have one and only one H1 tag used to denote article titles, category titles, tags

  • Image

The technical requirements for getting your content in Google's search results apply to images too. Since images are in a substantially different format compared to HTML, it means there are additional requirements for getting images indexed; for example, finding the images on your site is different, and the presentation of the images also influences whether an image is indexed at all, and for the right keywords.

  • Use HTML image elements to embed images: Using standard HTML image elements helps crawlers find and process images. Google parses the HTML elements in your pages to index images, but doesn't index CSS images. We should add "alt" to specify alt text for the image, if the image is not visible. That will help Google know the content of the image even if the image fails to load

✅ Good <img src="puppy.jpg" alt="A golden retriever puppy" />

❌ Bad: <div style="background-image:URL(puppy.jpg)"></div>

  • Responsive images: Designing responsive web pages leads to a better user experience since people can access them across a plethora of device types. Web pages use the <picture> element or the srcset attribute of an img element to specify responsive images.

The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes. Example:

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">
srcset attribute

The <picture> element is a container that is used to group different <source> versions of the same image. It offers a fallback approach so the browser can choose the right image depending on device capabilities, like pixel density and screen size. Example:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>
picture element
  • Favicon

Favicon is the icon of the Website, an icon displayed in the top corner of the browser tab. When users want to access your website, they will see this icon as a logo representing the website.

  • Your avatar must be a multiple of a 48px square. Ex: 48px * 48px, 96px * 96px,...
  • Your favicon should be a visual representation of your site's brand, to help users quickly identify your site as they scan through search results.

To add a favicon to your website follow the codes:

<html>
<head>
<link rel="icon" href="/path/to/favicon.ico">
</head>
<!-- rest of the HTML -->

10. Loading speed

Search engines want to lead users effectively and quickly to your page to answer their queries. If your page speed is slower than your competitor’s website, Google will likely prioritize ranking them above. A slow-loading page will also have a high bounce rate, and your SEO will be useless if that happens. Some ways to speed up your website:

  • Activate browser caching.
  • Minify resources.
  • Enable image compression.
  • Implement a CDN.
  • Optimize media files.
  • Minimize HTTP requests.
  • Use a good web host.

11. Mobile-friendliness

Nobody is carrying around a desktop for quick searches. Most of them are made on the phone. A mobile-friendly site will always rank better than a desktop-only supported site. So as a web developer, you must make sure the website is compatible with a range of devices for good SEO.

Google also uses mobile-first indexing, which means your website’s mobile version gets crawled first. So if you want to be your search engine’s favorite, make sure your website works great on mobiles. There are three configurations you can choose from to create a mobile-friendly site:

  • Responsive design: Serves the same HTML code on the same URL regardless of the users' device (for example, desktop, tablet, mobile, non-visual browser), but can display the content differently based on the screen size
  • Dynamic serving: Uses the same URL regardless of device. This configuration relies on user-agent sniffing and the Vary: user-agent HTTP response header to serve a different version of the HTML to different devices.
  • Separate URLs: Serves different HTML to each device, and on separate URLs. Like dynamic serving, this configuration relies on the user-agent and Vary HTTP headers to redirect users to the device-appropriate version of the site.

12. Security

Google has made it clear that website security, particularly HTTPS encryption, is a ranking factor. Secure websites are more likely to rank higher in search engine results pages (SERPs). When visitors see that your site is secure, they are more likely to engage and return. Positive user experiences can lead to lower bounce rates and higher engagement metrics, which are beneficial for SEO. Some ways to enhance security for website:

  • Implement HTTPS: Ensure your website uses HTTPS encryption. Obtain an SSL certificate and migrate your site from HTTP to HTTPS.
  • Implement Content Security Policy (CSP): A CSP helps prevent cross-site scripting (XSS) attacks by defining which content is allowed to load on your site.
  • Encrypt Sensitive Data: Encrypt sensitive data stored on your server to protect it from unauthorized access.
  • Secure Hosting Environment: Choose a reliable hosting provider that offers robust security features, including malware scanning, automatic backups, and DDoS protection.

Conclusion

In general, there are some important points of SEO to be marked done for your website:

  • sitemap.xml + robots.txt
  • Canonical
  • Links
  • URLs
  • Metadata
  • JSON-LD Schema
  • HTML tags
  • Redirects
  • Content
  • Loading speed
  • Mobile-friendliness
  • Security