DEV Community

Cover image for SEO starter kit
Greg, The JavaScript Whisperer
Greg, The JavaScript Whisperer

Posted on • Updated on

SEO starter kit

SEO starter kit

Earlier I wrote about ld+json with a vue.js framework gridsome but let's take a step back. I want to focus on the barebone what do you need for an effective indexable "google-able" site.
Not too much too be honest and all the steps optional.
You should have a title in your <head> of course

<title>My Sweet Blog</title>
Enter fullscreen mode Exit fullscreen mode
<meta name="description"  content="This is an example of a meta description.”>
Enter fullscreen mode Exit fullscreen mode

Ok now the interesting stuff you should have a sitemap created at /sitemap.xml you could use an online one to generate it, but many frameworks will have a plugin to do it for you.
You also need to link to it in your <head>

<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
Enter fullscreen mode Exit fullscreen mode

Now you need to sign up here at the Search Console and submit that sitemap to Google to let the indexing begin. You can repeat this process with Bing if you would like.

These two tags say hey, include me in the search results. Technically you can omit them unless you want to block them but better to be explicit and say “hey google I’m here, index me”

<meta name="googlebot" content="index,follow">
<meta name="robots" content="index,follow">
Enter fullscreen mode Exit fullscreen mode

An Aside - Social tags


So while these won’t directly affect your SEO, they impact how your site looks when it’s shared which effects your backlinks; which DOES affect your seo.

Twitter

<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content=" Your Description">
<meta name="twitter:image" content="http://thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
Enter fullscreen mode Exit fullscreen mode

Facebook

<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your Description">
<meta property="og:image" content="http://thumbnail.jpg">
<meta property="og:url" content="http://index.html">
Enter fullscreen mode Exit fullscreen mode

Your secret weapon


ld+json sounds funny I know, I only stumbled onto it by accident whilst late night googling. It stands for linked data and it’s replaces microdata. What does it do? Well it’s basically a way to link data, google can take your blog post know where the title is the article body the cover image then put it all fancy like in their search results. Another tool could also take that data and use it in a different way.

I’m going to show the amp example, amp is just a google thing for getting your articles into their news feed.

    <html amp>
      <head>
        <title>Article headline</title>
        <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "NewsArticle",
          "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https://google.com/article"
          },
          "headline": "Article headline",
          "image": [
            "https://example.com/photos/1x1/photo.jpg",
            "https://example.com/photos/4x3/photo.jpg",
            "https://example.com/photos/16x9/photo.jpg"
           ],
          "datePublished": "2015-02-05T08:00:00+08:00",
          "dateModified": "2015-02-05T09:20:00+08:00",
          "author": {
            "@type": "Person",
            "name": "John Doe"
          },
           "publisher": {
            "@type": "Organization",
            "name": "Google",
            "logo": {
              "@type": "ImageObject",
              "url": "https://google.com/logo.jpg"
            }
          }
        }
        </script>
      </head>
      <body>
      </body>
    </html>
Enter fullscreen mode Exit fullscreen mode

You can test that your page will be rich result ready aka SEO-tastic with this tool you can find more example schema’s for things other than Articles here

Hope you enjoyed!

Top comments (2)

Collapse
 
jswhisperer profile image
Greg, The JavaScript Whisperer • Edited

This article made it into my Google news Amp feed, so meta!
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
divdev profile image
DIVDEV