🐻 Bear with me.
I know it sounds like link bait, but it’s not. It’s true. I’ll prove it with code.
Last month, I created a one-page website to help with my SEO business. I relied on HTML alone, without any CMS. Let’s see how I built it.
Page Structure
I needed an appealing image (or video), a title and a bit of content. So I used a basic HTML structure. I don’t need anything more:
<!doctype html>
<html lang="en-IE">
<head>
<meta charset="utf-8">
<title>My Awesome Page Title</title>
<meta name="title" content="My Awesome Page Title">
<meta name="description" content="My awesome page description, tested to fit exactly inside Google's search result snippet.">
<meta name="viewport" content="width=device-width, initial-scale=1">Next, I needed to make it friendly. Not socially awkward. So I added Open Graph tags:
<!-- Open Graph / Facebook -->
<meta property="fb:app_id" content="258226424436680">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/">
<meta property="og:title" content="My Awesome Page Title">
<meta property="og:description" content="My awesome page description, tested to fit exactly inside Google's search result snippet.">
<meta property="og:image" content="https://www.example.com/assets/banner.jpg">
<meta property="og:locale" content="en_IE">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.example.com/">
<meta property="twitter:title" content="My Awesome Page Title">
<meta property="twitter:description" content="My awesome page description, tested to fit exactly inside Google's search result snippet.">
<meta property="twitter:image" content="https://www.example.com/assets/banner.jpg">As my business is also a local business, I had to add local details:
<meta property="place:location:latitude" content="51.288826">
<meta property="place:location:longitude" content="-7.198071">
<meta property="business:contact_data:street_address" content="37 The Hill, Howth, Co. Dublin">
<meta property="business:contact_data:locality" content="Dublin">
<meta property="business:contact_data:country_name" content="Republic of Ireland">
<meta property="business:contact_data:postal_code" content="A24 BH81">
<meta property="business:contact_data:website" content="https://www.example.com/">
<meta property="business:contact_data:email" content="name@example.com">
<meta property="business:contact_data:phone_number" content="01 234 5678">
<meta property="business:hours:day" content="monday">
<meta property="business:hours:start" content="09:00">
<meta property="business:hours:end" content="17:30">
<meta property="business:hours:day" content="tuesday">
<meta property="business:hours:start" content="09:00">
<meta property="business:hours:end" content="17:30">
<meta property="business:hours:day" content="wednesday">
<meta property="business:hours:start" content="09:00">
<meta property="business:hours:end" content="17:30">
<meta property="business:hours:day" content="thursday">
<meta property="business:hours:start" content="09:00">
<meta property="business:hours:end" content="17:30">
<meta property="business:hours:day" content="friday">
<meta property="business:hours:start" content="09:00">
<meta property="business:hours:end" content="17:30">This all goes into the <head> element. I had to add a canonical tag and a hreflang tag:
<link rel="canonical" href="https://www.example.com/">
<link rel="alternate" href="https://www.example.com" hreflang="en-IE">Next, I needed microdata. Here’s the relevant scripts:
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "WebSite",
"name": "My Awesome Page Title",
"url": "https://www.example.com/"
}
</script>
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "My Awesome Page Title",
"logo" : "https://www.example.com/assets/images/logo-symbol.png",
"url" : "https://www.example.com/",
"sameAs" : [
"https://twitter.com/awesome",
"https://www.facebook.com/awesome"
]
}
</script>Done. I could have preloaded/prefetched some of the libraries I’m using (such as the Google fonts or the Font Awesome icons), but the page is fast enough.
Next, I created a valid HTML page structure with the correct elements: <header> for header elements, <nav> for navigation, <main> for the main content and <footer> for, obviously, the footer. I created a full hierarchy of headings and didn’t overuse any elements. By full hierarchy, I mean I used all heading types, and did not skip any (e.g. <h1>, then <h3>). Google will get upset.
I also had breadcrumbs:
<p>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://www.example.com/" itemprop="url"><small itemprop="title">Home</small></a>
</span> »
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://www.example.com/" itemprop="url"><small itemprop="title">My Awesome Page Title</small></a>
</span>
</p>See how I reused my page title in lots of places?
I put some contact details in the footer and I correctly loaded my JavaScript files in the footer with an async attribute.
I also used Google Tag Manager to load all tracking scripts and snippets.
Next, I created a sitemap.xml file, added an SSL certificate and added my site to Google Search Console, Bing Webmaster Tools and Google Analytics.
Job done!
Feel free to copy and adjust to your own needs.
