Build a Professional Multi-Page Business Website | No Frameworks - Kmacims

Section 6: SEO and Social Meta Tags

You’ve built the pages. The navigation works. The layout looks professional. But there’s a layer of your website that most visitors never see — and it’s the layer that decides whether they ever arrive in the first place.

That layer lives inside the <head> of every HTML page. It’s made up of meta tags: short declarations that tell search engines what your page is about, and tell social platforms how to display your link when someone shares it. They are invisible to the eye but enormously visible to machines — and those machines determine a huge portion of your site’s traffic.

In this section, we will add two categories of meta tags to every page: SEO meta tags (for search engines like Google) and Open Graph tags (for social previews on LinkedIn, WhatsApp, Facebook, and anywhere links are shared). We will do this entirely in HTML — no plugins, no frameworks, no JavaScript.

The Six Essential OG Tags in Code

When a potential client shares your services page on LinkedIn, the preview that appears is controlled entirely by your Open Graph tags. A missing or poorly configured og:image means LinkedIn falls back to a random image from your page — or shows nothing at all. A well-crafted meta description is your 155-character advertisement in Google search results. These tags are not optional polish — they are foundational business infrastructure.

A <meta> tag is a self-closing HTML element that lives inside <head>. We are adding two <meta> tags:

SEO meta tags — primarily meta name=”description”. This gives search engines a plain-language summary of each page. Google uses this text as the snippet shown beneath your page title in search results.

Open Graph tags — prefixed with og: — are a protocol created by Facebook and now adopted universally. They define a rich card (image, title, description) that appears whenever your URL is shared or pasted anywhere on the social web.

Essential Open Graph pattern include (replace placeholder values):

<!– Open Graph / Social Preview –>

Both og:url and og:image require the complete URL including https:// and your domain name. Relative paths like images/og-image.jpg will not work — social media crawlers do not resolve relative URLs from the page’s location. Always use the full URL: https://www.kmacims.com/images/og-image.jpg.

The Canonical URL Tag — Preventing Duplicate Content

There is one more tag that belongs in every page’s <head>, and it is not a <meta> tag — it is a <link> tag with rel=”canonical”. It tells search engines the definitive URL for each page, preventing duplicate content penalties.

Consider your homepage. It might be accessible at all of these four different URLs simultaneously. This means that a crawler sees four duplicates:

Home

https://kmacims.com.ng/index.html

https://www.kmacims.com.ng/index.html

Without a canonical tag, search engines must guess which version is “the real one.” They may split link equity (SEO value) across all four URLs, reducing each version’s ranking power. The canonical tag resolves this ambiguity definitively.

For example:

Your rel=”canonical” href and your og:url should point to the exact same URL on every page. They both declare “this is the definitive address of this content” — one to search engines, one to social platforms.

Writing Unique, Relevant Meta Tags for Each Page

The worst mistake you can make with meta tags is copying the same title and description across every page. Search engines detect this immediately and treat the pages as duplicate content. Each page must have a unique title, a unique meta description, and a unique og:title and og:description that reflect its specific content.

Think of the meta description as your 155-character advertisement in Google search results. It should answer two questions for the searcher: What is on this page? and Why should I click this result over the others? Use active language, include your most important keyword naturally, and end with an implicit or explicit call to action.

Google truncates meta descriptions at around 155–160 characters on desktop and 120 on mobile devices. Always front-load the most important information. Every word counts.

Complete <head> Templates for All Four Pages

Here are the complete, production-ready <head> blocks for each page. Copy each one directly into the corresponding HTML file, replacing only the domain name (www.kmacims.com.ng) with your actual domain before going live. Everything else is already tailored to each page.

Simply replace the domain string before deployment. Until then, leave the tags in place; they cause no errors locally.

Replace the content of <head> tag in the index.html with the following:

<head>
  <!-- Character Encoding & Viewport -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Primary SEO Tags -->
  <title>Kmacims Web Solutions | Professional Websites Built with Clean Code</title>
  <meta name="description"
        content="Kmacims Web Solutions builds fast, modern, and professional business websites using clean HTML and CSS — no frameworks, no bloat." />
  <!-- Canonical URL -->
  <link rel="canonical" href="https://www.kmacims.com.ng/index.html" />
  <!-- Open Graph / Social Preview -->
  <meta property="og:type"        content="website" />
  <meta property="og:site_name"   content="Kmacims Web Solutions" />
  <meta property="og:url"         content="https://www.kmacims.com.ng/index.html" />
  <meta property="og:title"       content="Kmacims Web Solutions | Professional Websites" />
  <meta property="og:description"  content="We build fast, modern, and professional business websites using clean HTML and CSS. No frameworks, no bloat — just great web work." />
  <meta property="og:image"       content="https://www.kmacims.com/images/og-image.png" />
  <!-- Twitter / X Card -->
  <meta name="twitter:card"  content="summary_large_image" />
  <meta name="twitter:site"  content="@kmacims" />
  <!-- Stylesheet -->
  <link rel="stylesheet" href="css/styles.css" />
</head>

Replace the content of the <head> tag in the about.html with the following:
<head>
  <!-- ── Character Encoding & Viewport -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Primary SEO Tags -->
  <title>About Us | Kmacims Web Solutions</title>
  <meta name="description"
        content="Learn about the team and mission behind Kmacims Web Solutions — building professional, performance-first websites for businesses that want to grow." />
  <!-- Canonical URL -->
  <link rel="canonical" href="https://www.kmacims.com.ng/about.html" />

  <!-- Open Graph / Social Preview -->
  <meta property="og:type"        content="website" />
  <meta property="og:site_name"   content="Kmacims Web Solutions" />
  <meta property="og:url"         content="https://www.kmacims.com.ng/about.html" />
  <meta property="og:title"    content="About Us | Kmacims Web Solutions" />
  <meta property="og:description"  content="Meet the people behind Kmacims Web Solutions. We are a team driven by clean code, great design, and a genuine commitment to our clients' success." />
  <meta property="og:image"       content="https://www.kmacims.com.ng/images/og-image.png" />
  <!-- Twitter / X Card -->
  <meta name="twitter:card"  content="summary_large_image" />
  <meta name="twitter:site"  content="@kmacims" />
  <!-- Stylesheet -->
  <link rel="stylesheet" href="css/styles.css" />
</head>

Replace the content of the <head> tag in the services.html with the following:
<head>
  <!-- Character Encoding & Viewport -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Primary SEO Tags -->
  <title>Our Services | Kmacims Web Solutions</title>
  <meta name="description"
        content="Explore web design, development, and consulting services from Kmacims Web Solutions. Fast, clean, results-focused websites for modern businesses." />
  <!-- Canonical URL -->
  <link rel="canonical" href="https://www.kmacims.com/services.html" />
  <!-- Open Graph / Social Preview -->
  <meta property="og:type"        content="website" />
  <meta property="og:site_name"   content="Kmacims Web Solutions" />
  <meta property="og:url"         content="https://www.kmacims.com.ng/services.html" />
  <meta property="og:title"       content="Web Design, Development & Consulting — Kmacims" />
  <meta property="og:description"  content="From responsive web design to performance-first development and expert consulting — see exactly how Kmacims Web Solutions can help your business online." />
  <meta property="og:image"       content="https://www.kmacims.com.ng/images/og-image.png" />
  <!-- Twitter / X Card -->
  <meta name="twitter:card"  content="summary_large_image" />
  <meta name="twitter:site"  content="@kmacims" />
  <!-- Stylesheet -->
  <link rel="stylesheet" href="css/styles.css" />
</head>

Replace the content of the <head> tag in the contact.html with the following:
<head>
  <!-- Character Encoding & Viewport -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Primary SEO Tags -->
  <title>Contact Us | Kmacims Web Solutions</title>
  <meta name="description"
        content="Ready to start your next web project? Get in touch with Kmacims Web Solutions — we respond to every enquiry within one business day." />
  <!-- Canonical URL -->
  <link rel="canonical" href="https://www.kmacims.com.ng/contact.html" />
  <!-- Open Graph / Social Preview -->
  <meta property="og:type"        content="website" />
  <meta property="og:site_name"   content="Kmacims Web Solutions" />
  <meta property="og:url"         content="https://www.kmacims.com.ng/contact.html" />
  <meta property="og:title"       content="Get in Touch | Kmacims Web Solutions" />
  <meta property="og:description"  content="Have a project in mind? We would love to hear from you. Contact Kmacims Web Solutions and let's talk about what we can build together." />
  <meta property="og:image"       content="https://www.kmacims.com/images/og-image.png" />
  <!-- Twitter / X Card -->
  <meta name="twitter:card"  content="summary_large_image" />
  <meta name="twitter:site"  content="@kmacims" />
  <!-- Stylesheet -->
  <link rel="stylesheet" href="css/styles.css" />
</head>

The og:image is the single most impactful visual element in your social preview. It is the image that appears when your link is shared on LinkedIn, pasted into WhatsApp, or embedded in a Slack message. A high-quality, correctly sized og:image turns a plain link into a branded media card. The recommended image dimension is 1200x630px of jpg or png file format.

For a business site, the og:image is typically a branded graphic — a clean, professional design with your logo, business name, and a short tagline against a branded background colour.

Testing Your Meta Tags Before Going Live

Meta tags cannot be tested locally — social media crawlers only visit live URLs. However, there are official testing tools from each major platform that let you input a live URL and see exactly how your page will appear when shared. Once your site is deployed, you should test every page through at least any two of the tools below.

LinkedIn Post Inspector – linkedin.com/post-inspector
1. Facebook Sharing Debugger – developers.facebook.com/tools/debug
1. Twitter / X Card Validator – cards-dev.twitter.com/validator
1. OpenGraph.xyz – opengraph.xyz

Social media platforms cache your page’s meta tags aggressively — sometimes for days. Whenever you update your OG tags and redeploy, always run the Facebook Sharing Debugger and click “Scrape Again” to force a cache refresh. Without this step, the old preview will continue to appear even after your tags are correct on the live server.

Pages: 1 2 3 4 5 6 7