If your website is the exhibit, marketing is the museum

Banner showing man looking at paintings in a museum for website marketing blog.
fb twitter linkedin
link
Copied!

There’s no doubting your impressive site architecture. After all, you did spend many sleepless nights scouring your network, recruiting and assembling a cast of all-star designers and developers to help you build your own website. But something’s missing. People aren’t buying your products. Your website isn’t ranking well on Google’s search engine results page (SERP). You feel discouraged, frustrated, and confused.    

Unfortunately, this is a sentiment shared by many business owners entering the realm of web development. It’s challenging terrain to maneuver, but I want to help you start off on the right foot. 

A mistake that web development teams routinely make is focusing solely on design and functionality. But no matter how good your website is, it’s no use if no one knows about it. Imagine an artist who spends months on end painting a mountain landscape, only to have it stockpiled in their basement. Ridiculous, right? Although not technically a step in the web development life cycle, marketing considerations are important for this very reason. You don’t want your website sitting on the basement of Google’s SERP, far from the prying eyes of your potential clients. Marketing is the broker between your website and your end users, and I want to help you construct that bridge. Whether you’re looking to build an e-commerce, brochure, or informational website to grow your business or personal brand, I present to you the ultimate website marketing considerations checklist.

Contents

Meta tags
Title tag
Meta description
Open Graph tags
Twitter cards.
Google My Business
Structured data/rich snippets
Google Analytics
Sitemap
Performance
Alt text
Header tags
Breadcrumbs

Meta tags

Meta tags are snippets of text that go in the <head> section of your website. They help search engines understand the content of your web page. The most important meta tags, the title tag and meta description, are presented to potential visitors on the SERP.

Example of title tag and meta description that appear on Google's search engine results page.
The title tag and meta description are shown to users on Google’s SERP.

Approach the title tag and meta description like you would an elevator pitch—you want them to be succinct but impactful. 

Title tag

The title tag is used in multiple places including the browser tab, SERP, and link previews when shared on external sites such as social media. Rather than limiting the tag to the name of your company or product, include keywords that describe what the page is about. Although it’s important for the title tag to be descriptive, remember to keep it concise as well! Google will only display the first 50 to 60 characters of the title tag. 

<title>TTT Studios | Vancouver Custom Software Development</title>

Meta description

This is a short summary of what visitors can expect to find on your web page. It’s an opportunity to grab their attention and increase your click-through-rates (CTR). If you don’t include a custom meta description, Google will choose an excerpt that it thinks is most relevant for the user. This is why it’s important to write a unique description for each page using appropriate keywords. Once again, remember to be succinct and keep the meta description around 150-160 characters.

Open Graph tags

Open Graph tags were created by Facebook to give website creators control over how their sites would look when being shared. Now, Open Graph tags are used by most social media platforms. Social media sites are major drivers of website traffic, so having good Open Graph tags can greatly affect conversion rates. 

Note: Open Graph tags don’t affect SEO, so you don’t have to worry about packing in the keywords. Focus more on readability and captivating the interest of potential visitors.  

The most important Open Graph tags are:

  • og:title—This is self-explanatory. It is pretty much the same as the title tag.
  • og:description—Similar to the meta description, this is a 1 to 2 sentence snippet that shows up in the link preview.
  • og:type—This tag describes the type of content you’re sharing (website, blog, store, restaurant, etc.).
  • og:image—This is the image that is shown when the page is shared. If this isn’t set, Facebook will typically scrape the first picture it finds from the page. The recommended size is 1200 x 627 px, and there is a size limit of 5 MB.

There are many other og tags, and different tags will be relevant for different kinds of websites. 

Below is a side-by-side comparison of the preview that would show up when we share our artificial intelligence page on social media, before and after setting og tags. On the left, an <og:image> and <og:description> aren’t specified. As a result, the first image and the first few sentences from the AI page are grabbed as the preview image and description. On the right, proper <og:title>, <og:description>, and <og:image> have been set. Taking the time to properly set Open Graph tags can be the difference between a link preview that looks like spam and a link preview that exudes professionalism. You can decide for yourself which preview you think would result in higher CTRs.  

Share link preview with arbitrarily pulled title, description, and image because no open graph tags are set.
Share link preview before setting OG tags.
Share link preview displaying a good title, description, and image because open graph tags are set.
Share link preview after setting OG tags.

Twitter Cards

Twitter meta tags are a type of Open Graph tag specific to Twitter Cards. By simply adding a few lines of markup to your webpage, anyone who links your content in their tweet will have a “card” complementing their tweet. In other words, any tweets containing links to your website will display rich media and stand out from other websites that display only as a hyperlinked URL. There are different types of cards for different purposes, and sample code for implementing these cards can be found here

To give you an idea of how we implement Open Graph tags, here are the ones we use on TTT’s home page:

<meta name="og:email" content="info@ttt.studio">
<meta name="og:phone_number" content="1-888-315-4476">
<meta name="og:street-address" content="1250-777 Dunsmuir Street">
<meta name="og:locality" content="Vancouver">
<meta name="og:region" content="BC">
<meta name="og:postal-code" content="V7Y 1G6">
<meta name="og:country-name" content="Canada">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="TTT Studios | Vancouver Custom Software Development" />
<meta property="og:description" content="Award winning digital innovation studio focused on empowering businesses through technology." />
<meta property="og:url" content="https://ttt.studio/" />
<meta property="og:site_name" content="TTT Studios" />
<meta property="og:image" content="https://ttt.studio/wp-content/uploads/2018/11/ttt_link_preview_home@2x-1024x538.jpg" />
<meta property="og:image:secure_url" content="https://ttt.studio/wp-content/uploads/2018/11/ttt_link_preview_home@2x-1024x538.jpg" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="538" />
<meta property="og:image:alt" content="TTT Studios logo emblem" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Award winning digital innovation studio focused on empowering businesses through technology." />
<meta name="twitter:title" content="TTT Studios | Vancouver Custom Software Development" />
<meta name="twitter:site" content="@TTT_Studios" />
<meta name="twitter:image" content="https://ttt.studio/wp-content/uploads/2018/11/ttt_link_preview_home@2x.jpg" />
<meta name="twitter:creator" content="@TTT_Studios" />

Google My Business

Google My Business allows you to control the content that shows up about your business on Google’s services, especially in Maps and Knowledge Panels. You should always fill out as much information as you can about your business to avoid losing out on easy leads. 

For example, our knowledge panel on Google looks like this:

Versus the knowledge panel of a company who has not taken control of their business on Google:

Structured data/rich snippets

You can even further enhance how your pages look in Google’s SERP by adding structured data markup to your website. Structured data is data in a standardized format that makes it easier for Google to parse through your web pages. Below is an example of structured data that permits a recipe page to appear in a graphical search result.  

At TTT, we use structured data to help Google learn more about our company. Specifically, we make it easier for Google to find our founding information and connections to our social media accounts. 

<script type="application/ld+json">
  { "@context": "http://schema.org",
    "@type": "Organization",
	"url": "https://ttt.studio",
	"logo": "https://ttt.studio/wp-content/uploads/2018/11/favicon.png",
	"sameAs": [
		"https://www.facebook.com/TTTStudios/",
		"https://www.instagram.com/ttt_studios/",
		"https://www.linkedin.com/company/tttstudios/",
		"https://twitter.com/ttt_studios"
	],
	"founders" : [
		{
			"@type": "Person",
			"name": "Chris Hobbs"
		},
		{
			"@type": "Person",
			"name": "David Hobbs"
		},
		{
			"@type": "Person",
			"name": "Josephine Wong"
		}
	],
	"foundingDate" :  "2010-07-14",
	"location" : {
		"@type" : "Place",
		"address" : "Vancouver"
	}
  }
</script>

Google Analytics

Your business can use Google analytics to provide insight into how your website acquires traffic, find out what your visitors are doing on your website, and identify barriers to conversion. To avoid losing out on this valuable data, it’s a good idea to set-up Google Analytics from the onset. In order to set it up, some work needs to be done on the development side. You will need to put the appropriate script snippets in the code and make sure the data you want to track has appropriate ID selectors. For example, if you want to track the clicks of a specific button on your website, then that button needs an ID to differentiate its click events. 

Below is an example of TTT’s website Google Analytics & Tag Manager Set-up, located in the header of each page:

<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-129696274-1"></script>
	<script>
 		window.dataLayer = window.dataLayer || [];
 		function gtag(){dataLayer.push(arguments);}
 			gtag('js', new Date());

 			gtag('config', 'UA-129696274-1');
	</script>
<!-- Google Tag Manager -->
	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PJQ37RG');</script>
<!-- End Google Tag Manager -->

From there, use Google Tag Manager and Google Analytics to set-up the data that you want to track.    

Sitemap

An XML sitemap is an XML file containing information about the structure of your site. This includes information about pages, specific elements on those pages (examples include videos—run time, genre, age rating, and images—license, type, subject matter), and the relationships between them. Sitemaps are used by web crawlers to properly index the entire site, which in turn leads to better website rankings. Google can usually find all the pages of your website without issue, but it’s safer to submit your sitemap to Google Search Console to make sure. 

Services like Yoast for WordPress create XML sitemaps automatically, but for static websites, there are many XML sitemap generators out there for you to explore! 

Performance

Your users aren’t the only ones who lose their heads over a website that doesn’t load within three seconds. Google does too, and they penalize poor website performance by dropping you in their search results ranking. If you value holding onto your website visitors, I wrote an entire blog on optimizing website performance just for you.

Alt text

Alt text is used on image tags to describe the appearance or function of an image on a page. Uses of alt text include:

  1. Web accessibility: screen readers will read the alt text to users who are visually impaired
  2. Displaying alt text to users in the case that an image can’t be loaded
  3. Providing better descriptions to search engine crawlers to help them index the images properly  

Header tags

Header tags aren’t as important as they used to be for SEO, but that doesn’t mean you should brush them aside. The vast majority—84% to be exact—of your users will not read your content word-for-word. Headers help your cause by improving the readability of your content. Use <h1> to define your most important and <h6> to define your least important headers. Although <h2> to <h6> aren’t crucial, it’s still important to at the very least include one (and only one) <h1>.

Using proper header tags instead of shoving everything into a <div> will also help crawlers identify the most important content on a page. For example, crawlers understand that text wrapped in an <h1> is more important to the context of a page than the body text.

Breadcrumbs

Breadcrumbs are a list of links showing your site visitors where they are in your site hierarchy. They are a godsend for e-commerce websites because they allow users to easily navigate your pages with fewer clicks and quickly filter through different product attributes. Here is a good example of breadcrumbs in action on Best Buy’s website:

Best Buy's breadcrumbs on their website.

Not only are breadcrumbs conducive to a strong user experience, but they are also great for SEO. They give Google yet another way to figure out how your site is structured, and another set of information to display in their search results. Here is the same breadcrumb trail from Best Buy, but on the SERP:

Best Buy's breadcrumb trail on Google search engine results page.

Collaboration, collaboration, collaboration

If you made it this far, you’ve officially completed my crash course on website marketing considerations! Here’s a virtual congratulatory hug from yours truly 🤗. To cap off, I’d like to acquaint you with the three principles that should immediately come to mind when building your own website: collaboration, collaboration, collaboration. 

Collaboration means not throwing all your eggs in one basket. It means not gluing yourself to the script and focusing solely on design and functionality. It means not neglecting the power of digital marketing in e-commerce. But most importantly, collaboration means not being afraid to reach out for help. Bounce ideas off each other, because cross-departmental collaboration is a surefire recipe for success.

Recent posts