When building websites, there are little things you can do to make your website appear better to search engines and social networks. Here is a list of a bunch of those things; little snippets of code. I will try to keep this page updated with new things that I learn, and from suggestions in the comments. This page is as much for me as it is for you.

Substitute your own information for the parts in ALL_CAPS. If you use something like PHP, you can reuse variables for multiple entries. Most of these snippets go inside the “Meta” tags in your HTML document, except where otherwise specified.

Meta Tags

Title – The title appears in the top of your browser window, usually on the tab. It’s also very prominent when sharing your content elsewhere on the web. Pick something short and descriptive. You may want to trail it with your website name.

<title>YOUR_TITLE</title>

Description – A short description of the web page. Make this unique for each individual page and make sure it’s relevant to that page. It shows up in Google search results and more places discussed later.

<meta name="description" content="YOUR_DESCRIPTION" />

Keywords – The need for keywords is debatable. Google and such no longer mention keywords in their webmaster guides, but it won’t hurt to add a dozen or so relevant keywords for your page.

<meta name="keywords" content="YOUR_KEYWORDS" />

Author link – If you’re the author of the page or blog entries, you can add a link to your Google+ profile. This can be done inside the body, but we’ll put it in the head for now. Other services are available.

<link rel="author" href="https://plus.google.com/YOUR_GOOGLEPLUS_PROFILE" />

Open Graph

For Facebook and Google – Both of these giants pay attention to your OG information. Note, the last 2 items are Facebook specific. This information helps determine what it looks like when your content is shared on Facebook or Google.

<meta property="og:title" content="YOUR_TITLE" />
<meta property="og:type" content="article" />
<meta property="og:image" content="LINK_TO_YOUR_THUMBNAIL" />
<meta property="og:url" content="YOUR_PERMALINK" />
<meta property="og:description" content="YOUR_DESCRIPTION" />
<meta property="fb:admins" content="YOUR_FACEBOOK_ID" />
<meta property="fb:app_id" content="YOUR_FACEBOOK_APP_ID"/>

For Twitter – Mostly the same information goes into the twitter tags as you put in the Open Graph info above. There’s just a slight difference in the terminology. This information helps Twitter create a little card when people tweet out a link to your page.

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="YOUR_PERMALINK" />
<meta name="twitter:title" content="YOUR_TITLE" />
<meta name="twitter:description" content="YOUR_DESCRIPTION" />
<meta name="twitter:image" content="LINK_TO_YOUR_THUMBNAIL" />

Special Bits

Sitemap – A sitemap helps search engines better index your website. They would probably still be able to index all your content if you designed your website properly, but as always, better safe than sorry. You can include a link to your sitemap in the head of your document or manually submit them through webmaster tools.

<link rel="sitemap" href="YOUR_URL/sitemap.xml" />

RSS Feed – Even though some claim that RSS is dying out, it won’t kill you to still support it. I, for one, still consume many websites through Feed Readers.

<link rel="alternate" type="application/rss+xml" title="RSS" href="YOUR_URL/rss.xml" />

Favicon – This is not required, but I think it’s just unprofessional if you don’t have one. It’s the little icon in the tabs bar.

<link rel="shortcut icon" type="image/x-icon" href="YOUR_URL/favicon.ico" />

Here’s a little tool for creating your Favicon icon: Dynamic Drive – Favicon Generator.

Viewport – Setting your viewport is important because Google is critical of websites that don’t support mobile devices. This tag basically announces that it’s fine for any screen size (but you still need to make your website behave well).

<meta name="viewport" content="width=device-width, initial-scale=1">

Structured Data

Schema.org – This helps you define what parts of your website mean. For example, you have an article. You can mark up the code to say “this is title, this is the body, this is the date it was published, etc”.  This you can easily do inside the body of your HTML, just add properties to already existing tags you are using. For example this can be the footer, which displays real content:

<p itemscope itemtype="http://schema.org/LocalBusiness">
    <strong itemprop="name">YOUR_BUSINESS_NAME</strong><br />
    Tel: <span itemprop="telephone">(99) 999 999</span> 
    Fax: <span itemprop="faxNumber">(99) 999 998</span>
    <a href="mailto:YOUR_EMAIL@YOUR_DOMAIN" title="Email: YOUR_EMAIL@YOUR_DOMAIN">
        <span itemprop="email">YOUR_EMAIL@YOUR_DOMAIN</span></a>
    <span itemprop="address">1st Street, Big town, 999 Little City XX, Nice Country. Earth, Sol</span>
</p>

An example for blog posts:

<div class="post" itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="headline">Article Title</h1>
    <p itemprop="articleBody">
        Text... bla bla...
    </p>
    <p itemprop="author">
        Ralph van den Berg
    </p>
</div>

Of course there are much more descriptive properties you can use. I really recommend visiting schema.org to find what best suits you.

Please Contribute

Search Engine Optimization is always evolving. I may be very wrong in some situations, and I may be missing some very crucial tips. Please contact me or comment below if you have something you want to add. I will update this page when I get good suggestions. Thanks in advance!