DEV Community

Cover image for Page SEO Improvement Guide
João Godinho
João Godinho

Posted on • Edited on

Page SEO Improvement Guide

#webdev #beginners #seo #javascript

Overview

Search Engine Optimization (SEO) is crucial for pages to rank at the top of Google, Yahoo, and other search engines. Therefore, if you are involved in developing landing pages, it is essential to understand the techniques that can help you achieve a higher position in search engine results pages.

Table of Contents

HTML Semantic Tags and Meta Tags

In web development, the proper use of HTML semantic tags and meta tags is fundamental for creating well-structured and search engine-friendly pages.

HTML Semantic Tags

  • Semantic tags in HTML provide meaning to the content they enclose, making it clear and understandable both for developers and search engines.
  • Examples of semantic tags include <header>, <footer>, <article>, <section>, <nav>, and more. Proper use of these tags enhances the overall structure of your HTML, contributing to better SEO.

Meta Tags

  • Meta tags are snippets of code that provide metadata about a web page. The most common meta tags include those for defining the page's title, description, author, and character set. These tags are crucial for search engines to understand the content of a page and display relevant information in search results.
  • Example of meta tags include: 
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page title</title>
  </head>
Enter fullscreen mode Exit fullscreen mode

Helping the Crawlers: robots.txt and sitemap.xml

Robots.txt File

  • A robots.txt file is a crucial tool for guiding web crawlers on how to navigate and index your website.
  • It serves as a set of instructions for search engine robots, specifying which areas of your site should be crawled and which should be excluded.
  • Properly configuring the robots.txt file is essential to ensure that search engines index your content accurately.

In the robots.txt file, you can:

  • Allow or disallow specific user-agents from crawling certain parts of your site.
  • Direct crawlers to your sitemap.xml file.

Understanding and configuring the robots.txt file correctly is a key aspect of optimizing your website for search engine indexing.

Example robots.txt:

User-agent: *
Allow: /
Disallow: /private/
Sitemap: https://www.example.com/sitemap.xml
Enter fullscreen mode Exit fullscreen mode

Sitemap.xml File

  • A sitemap.xml file provides search engines with a structured list of URLs from your site, making it easier for them to discover and index your content.

  • Including a sitemap.xml file is an effective way to ensure that all essential pages are crawled and indexed.

  • In the sitemap.xml file, you list URLs along with additional information, such as the last modification date and the frequency of changes.

  • This helps search engines prioritize crawling and indexing your pages efficiently.

Example sitemap.xml:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/page1</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://www.example.com/page2</loc>
    <lastmod>2023-01-05</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.6</priority>
  </url>
  <!-- Add more URLs as needed -->
</urlset>
Enter fullscreen mode Exit fullscreen mode

Structured Data Markup: Rich Results When Searching

  • Structured Data Markup, particularly using JSON-LD (JavaScript Object Notation for Linked Data), is a powerful technique to enhance the visibility of your content in search engine results.
  • By providing search engines with additional context and meaning about your content, you increase the likelihood of rich results, such as rich snippets, knowledge graphs, and more.

Example JSON for Linked Data (JSON-LD):

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Example Company",
    "logo": "https://example.com/logo.png",
    "url": "https://example.com/",
    "description": "A leading company providing innovative solutions.",
    "sameAs": [
      "https://www.facebook.com/examplecompany",
      "https://www.instagram.com/examplecompany/"
    ],
    "contactPoint": {
      "@type": "ContactPoint",
      "telephone": "+1-234-567-8901",
      "contactType": "customer service",
      "areaServed": "US"
    },
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Main Street, Suite 45",
      "addressLocality": "Cityville",
      "postalCode": "12345",
      "addressRegion": "CA",
      "addressCountry": "US"
    }
  }
</script>
Enter fullscreen mode Exit fullscreen mode

Performance and Page Speed

Optimize Images

  • Loading Specific Images for Each Device

    • When optimizing images for your website, it's crucial to consider the variety of devices the users may use.
    • The <picture> element provides a powerful way to load different images based on device characteristics.
    • Example 
    <picture>
  <source media="(max-width: 600px)" srcset="path/to/mobile-image.jpg" />
  <source media="(min-width: 601px)" srcset="path/to/desktop-image.jpg" />
  <img src="path/to/fallback-image.jpg" alt="Alt Text" loading="lazy" />
</picture>

  • Lazy Loading

    • For images that are not essential in the initial page load, implementing lazy loading is essential. This technique delays the loading of images until they are about to come into the user's viewport, preventing unnecessary resource consumption and enhancing page speed.

  • Choosing the Right Image Format

    • When it comes to image formats, WebP stands out as the optimal choice for achieving fast-loading websites and improving SEO. Consider converting your images to WebP format for the best performance.

  • Image Optimization Tools

    • Here are some websites that can help you optimize your images:
    • Upscale or resize your images: I Love IMG
    • Compress your images: TinyPNG
    • Convert your images to .webp: Convertio

Optimize code

  • Minification and Concatenation:

    • Ensure that your CSS and JavaScript files are minified and concatenated to reduce download size.

  • Lazy Loading of Resources:

    • Consider delaying the loading of non-essential resources using the async or defer attribute for scripts or by implementing lazy loading techniques for images and other resources. Example of Lazy Loading for JavaScript: 
    <script defer src="your-script.js"></script>
    • Libraries like Next.js have features such as asynchronous loading using Dynamic import. For instance, you can use the following example: Example: 
    const DynamicComponent = dynamic(() => import("./Component"), {
  loading: () => <p>Loading...</p>,
});

  • Serving Static Resources from a CDN:

    • Explore the use of a Content Delivery Network (CDN) to serve your static resources. This can improve loading speed, especially for users in different geographic regions.

  • Analyzing Dependencies:

    • Review your dependencies and remove those that are unnecessary. Sometimes, libraries come with more features than you actually need.
    • And it's important to avoid deprecated libraries.

Mobile-friendly

  • Having a mobile-friendly landing page is crucial because crawlers access your website using a mobile device with a low-connectivity 4G internet connection. Improving performance is essential to achieve good metrics and rank higher in search results.

Accessibility

  • Avoiding colors with low contrast

    • Lot of users can't read pages with low contrast.

  • Navigating with keyboard

    • Making your website navigable using a keyboard is important for people who can't use a mouse. It ensures everyone, including those with disabilities, can easily use your site.

  • Alt texts to help screen readers

    • Alt text describes images for those using screen readers, ensuring everyone, including people with visual impairments, can understand and access your content.

Other basics

  • HTTPS and security

    • Most browsers will issue a warning for sites without HTTPS (SSL), potentially causing your page to lose traffic.

  • Monitoring and running performance tests frequently

    • Regularly monitoring and conducting performance tests on your website is essential to ensure optimal user experience.
    • A useful tool for performance testing is PageSpeed Insights.
    • It offers insights into your website's performance, highlighting areas for improvement. These insights are valuable for enhancing your SEO, performance, and all core web vitals metrics.

  • Google Search Console

    • A web service by Google that allows website owners to monitor, analyze, and optimize their site's presence in Google Search results.
    • You can request Google indexing here and test your page to check if it can be indexed on Google. It's also possible to submit your sitemap.xml for validation.

Do I need perfect metrics to be indexed?

  • Achieving a perfect score on all metrics is not a strict requirement, but it is a goal for developers.
  • Aiming for excellent metrics not only improves website performance but also makes the web faster and more accessible, benefiting all users, including those with disabilities.

Read More at:

Thanks for Reading! :)

  • Thanks for reading. I hope you gained insights into web page performance, indexing, and ranking your page on search engines like Google.
  • If you have any questions, feedback, or suggestions, feel free to reach out. Your engagement is appreciated!

Contacts

Top comments (1)

Collapse
 
shakilahmed007 profile image
Shakil Ahmed •

Exciting read! 🚀 Can't wait to implement these SEO tips for a boost in page performance. Thanks for sharing, always eager to enhance my digital strategy! 👍

Read next

velan profile image

Mastering Bruno: A Beginner's Guide to API Clients

Velan<> -

danrot90 profile image

Writing high quality tests

Daniel Rotter -

cryptosandy profile image

From Web2 to Web3: A Developer’s Guide to the Shift

Crypto.Andy (DEV) -

blamsa0mine profile image

How to Create a Dynamic Popover with CSS and JavaScript 🚀

A0mineTV -