Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chapter Search Engine Optimization SEO Requirements

See original GitHub issue

Search Engine Optimization

SEO, or Search Engine Optimization is important to get the word out about items on a website. Search engines have evolved over the years, so much so that they will accept dynamically updated meta descriptions and keywords. Note, even if you provide a meta description, search engines may not use them.

Examples

Regular Search Result

For reference, a regular search result will look something like this:

RegularSER

It contains a title (Events), the URL of that page, and a meta, or search engine provided, description.

Event

A well optimized Event based web application will have a SERP(Search Engine Result Page) that looks like this:

MeetupGroupEventSERBreadcrumbs

You’ll see that this Meetup Group’s search result has the following elements:

Breadcrumbs
Title
Event details

Rich Snippets

The idea behind SEO is to provide as much information as you can in a readily accessible format so that search engines can accurately crawl, index, and display the right information. Occasionally, as you can see below, search engines will experiment and create new ways to display information to their users in rRich Snippets. Without proper information, the chances of seeing our information front and center inside a rich snippet is diminished.

GoogleGeneratedSnippet

Take a look at the optimized head of FreeCodeCamp (minus stylesheets and style rules)

<head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport">
    <link as="style" href="/css/bootstrap.min.css" rel="preload">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="sitemap" type="application/xml" href="/sitemap.xml">
    <link rel="shortcut icon" href="/icons/icon-48x48.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <link rel="manifest" href="/manifest.webmanifest">
    <meta name="theme-color" content="#0a0a23">
    <meta name="generator" content="Gatsby 2.16.4">
    <title>Learn | freeCodeCamp.org</title>
    <link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=9f5ad2623a4f88040540963d2f9e4368">
    <meta content="summary_large_image" name="twitter:card" key="meta-stylesheet-0">
    <meta content="https://s3.amazonaws.com/freecodecamp/curriculum-diagram-full.jpg" name="twitter:image:src" key="meta-stylesheet-1">
    <meta content="https://s3.amazonaws.com/freecodecamp/curriculum-diagram-full.jpg" property="og:image" key="meta-stylesheet-2">
    <link as="script" rel="preload" href="/component---src-pages-index-js-f9397fa0c4a5ee666125.js">
    <link as="script" rel="preload" href="/app-094f1795c942e8d8d08b.js">
    <link as="script" rel="preload" href="/commons-de36b182030f85112f28.js">
    <link as="script" rel="preload" href="/styles-4e1edf9a3c5ad31d2e86.js">
    <link as="script" rel="preload" href="/webpack-runtime-39005359922e7b67188c.js">
    <link as="fetch" rel="preload" href="/page-data/index/page-data.json" crossorigin="anonymous">

Key SEO Elements:

General/Mobile/Screen optimization - usually first 3 meta tags in the head (utf-8, ie=edge, width=device-width)
Meta Description and Keywords
Title tag
Canonical tag
Robots.txt - tells what URLs search engines should/shouldn’t crawl
Favicon and Apple retina images
Social Media specific meta (Twitter, Google)
Meaningful HTML tags - keep the hierarchy (h1>h2>h3)
Good use of unordered and ordered lists (FAQs, checklists, etc)
Sitemap.xml - list of important URLs
HTTPS - search engines do not place priority in driving traffic to “unsafe” sites

Important SEO Aspects to Consider

Automatically generated the Schema markup via JSON structured data based on fields completed by the Chapter’s Admin

The Event types
- Event Schema Reference
Breadcrumbs: useful for direct navigation from the search engine
- Breadcrumb List Schema reference
Example of JSON structured data

    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "Event",
            "location": {
            "@type": "Place",
            "address": {
                "@type": "PostalAddress",
                "addressLocality": "Denver",
                "addressRegion": "CO",
                "postalCode": "80209",
                "streetAddress": "7 S. Broadway"
            },
            "name": "The Hi-Dive"
            },
            "name": "Typhoon with Radiation City",
            "offers": {
            "@type": "Offer",
            "price": "13.00",
            "priceCurrency": "USD",
            "url": "http://www.ticketfly.com/purchase/309433"
            },
            "startDate": "2013-09-14T21:30"
        }
    </script>

🚧 Coming Soon - SEO Meta Template

Optional References

Quick & Easy SEO Guide

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

allellacommented, Jul 28, 2020

@Zeko369 good to know there’s an easy way to work in best practices.

As with most SEO plugins, there appears to be a lot of bells and whistles.

It’s likely a good idea to still have someone here looking out for the most important items and having the list above would be a good guide for what we don’t want to miss.

Even for an MVP, we don’t want to launch without things like good title tags, semantic tags, meta descriptions, etc.

1reaction

ceciliaconsta3commented, Mar 6, 2020

Thanks @allella, I posted this from tablet and must have missed that altogether. Will complete the last section this weekend.