For the past few months, nearly all the client projects I have been engaged with have involved deep exploration of SEO. This has caused me to become uncomfortably familiar with the intricacies of an industry/technology predominantly populated by snake oil and b.s.
That said, I wanted to record some of these findings since each platform (google, twitter, etc…). While they all basically reinvent the wheel, there are precious few compendiums that actually consolidate all the segregated sets of information and documentation into a single resource.
NOTE: This shit is super time sensitive and changes all the time. The content of this should really only be deemed valid for a shockingly brief period of time. I will make sure to link to any documentation available so if it has been any decent amount of time since the publishing of this article, make sure to review the provider's official docs to make sure things haven't changed.
Google really want's everything including meta and platform specific tags. They are, however, one of the best at interpreting raw html content but this can be greatly enhanced by leveraging various seo~y attributes.
Google also has their developer checklist. Many of these attributes can also be evaluated and validated through use of Google Webmaster. The results for physical locations like restaurants and stores can be enhanced through the use of Google My Business.
Google SEO Attributes
Structured Data and Google Rich Cards
Structured data is a format/spec for json content embedded in the head of a page that is a more complex representation of the attributes of a site.
https://developers.google.com/search/docs/guides/intro-structured-data
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.your-company-site.com",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1-401-555-1212",
"contactType": "customer service"
}]
}
</script>
Google can also use structured data to generate Rich Cards. These cards can be utilized for the following types of content. The official name of these has changed from time to time, and are sometimes referred to as Rich Results, or Mark Up Content Items.
- Recipes
- Events
- Products
- Reviews
- Videos
- Courses
Ritch Cards are generated by the credit attribution and use of Structured Data.
AMP Pages
Google also leverages their newest creation, AMP pages. AMP stands for accelerated mobile pages (so it's kind of like saying ATM machine). AMP pages have a modified syntax From HTML. Unlike a typical meta-information set that is included in your document, AMP Pages are separate files delineated by the appending /amp to a page. Google will crawl and then rehost these pages on their servers, serving them to mobile users who navigate to your site from Google search results.
Unless you are a large publication or your platform provides it for you by default, there's little reason to implement AMP Pages. The AMP version of this page can be previewed at https://mcmahan.me/seo-and-social-strategy-2017/amp.
Social
General meta tags
The following is a list of basic meta attributes that you will find on any page. This is pulled directly from one of my posts. While some social sites will use this if no other information is available, it doesn't tell them what type of content or page they will be looking at. This limits their ability to represent your sites content in a meaningful way.
<title>Japan trip 2015</title>
<meta name="description" content="May of 2015, my wife and I traveled to Japan as a family trip. We flew in to Osaka and visited Kyoto, Hakone, and Tokyo.">
<link rel="canonical" href="https://mcmahan.me/japan-2015/">
<link rel="alternate" type="application/rss+xml" title="Will H McMahan" href="https://mcmahan.me/rss/">
- Docs: https://developers.facebook.com/docs/sharing/webmasters
- Validator: https://developers.facebook.com/tools/debug/sharing
Example Facebook Markup
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
Basic Facebook Tags
| Tag | Description |
|---|---|
og:url |
The canonical URL for your page. This should be the undecorated URL, without session variables, user identifying parameters, or counters. Likes and Shares for this URL will aggregate at this URL. For example, mobile domain URLs should point to the desktop version of the URL as the canonical URL to aggregate Likes and Shares across different versions of the page. |
og:title |
The title of your article without any branding such as your site name. |
og:description |
A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook. |
og:image |
The URL of the image that appears when someone shares the content to Facebook. See below for more info, and check out our best practices guide to learn how to specify a high quality preview image. |
fb:app_id |
In order to use Facebook Domain Insights you must add the app ID to your page. Domain Insights lets you view analytics for traffic to your site from Facebook. Find the app ID in your App Dashboard. |
Other Optional Facebook Tags
| Tag | Description |
|---|---|
og:type |
The type of media of your content. This tag impacts how your content shows up in News Feed. If you don’t specify a type,the default is website. Each URL should be a single object, so multiple og:type values are not possible. Find the full list of object types in our Object Types Reference |
og:locale |
The locale of the resource. Defaults to en_US. You can also use og:locale:alternate if you have other available language translations available. Learn about the locales we support in our documentation on localization. |
Facebook Instant Articles
Facebook instant articles can be sent to Facebook via an RSS feed. This RSS feed can be specific to instant articles, and edited to only contain certain articles you wish to have on that platform.
https://developers.facebook.com/docs/instant-articles
- Docs: https://dev.twitter.com/cards/types/summary-large-image
- Validator: https://cards-dev.twitter.com/validator
Example Twitter Markup
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
Requirements
| Tag | Description |
|---|---|
twitter:card |
Should be set to a value of "summary_large_image", "summary_large_image" |
twitter:site |
The Twitter @username the card should be attributed to. Required for Twitter Card analytics. |
twitter:title |
A concise title for the related content. Platform specific behaviors:
|
twitter:description |
A description that concisely summarizes the content as appropriate for presentation within a Tweet. You should not re-use the title as the description or use this field to describe the general services provided by the website. Platform specific behaviors:
|
twitter:image |
A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card should be at least 280px in width, and at least 150px in height. Image must be less than 1MB in size. |
twitter:image:alt |
A text description of the image conveying the essential nature of an image to users who are visually impaired. |
Linkedin is one of the few social platforms that has not completed reinvented their meta-tag system. They instead use Facebook's open graph spec.
Example LinkedIn Markup
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
The end result
Below is a copy the Meta-social information for this page. Because I use ghost as my CMS a choice, most of this is supplied for me with slight augmentations from using the theme I created for this site.
<title>SEO/Social Strategy</title>
<link rel="canonical" href="https://mcmahan.me/seo-and-social-strategy-2017/">
<meta name="referrer" content="no-referrer-when-downgrade">
<link rel="amphtml" href="https://mcmahan.me/seo-and-social-strategy-2017/amp/">
<meta property="og:site_name" content="Will H McMahan">
<meta property="og:type" content="article">
<meta property="og:title" content="SEO/Social Strategy">
<meta property="og:description" content="Many of my recent projects have involved a deep exploration of SEO. I wanted to record some of my learnings from that time. (2017)">
<meta property="og:url" content="https://mcmahan.me/seo-and-social-strategy-2017/">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="SEO/Social Strategy">
<meta name="twitter:description" content="Many of my recent projects have involved a deep exploration of SEO. I wanted to record some of my learnings from that time. (2017)">
<meta name="twitter:url" content="https://mcmahan.me/seo-and-social-strategy-2017/">
<meta name="twitter:label1" content="Written by">
<meta name="twitter:data1" content="Will H McMahan">
<meta name="twitter:site" content="@whmii">
<meta name="twitter:creator" content="@WHMII">
<script async="" src="//www.google-analytics.com/analytics.js"></script><script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"publisher": {
"@type": "Organization",
"name": "Will H McMahan",
"logo": {
"@type": "ImageObject",
"url": "https://mcmahan.me/content/images/2017/04/IMG_1679-1-1.jpg",
"width": 60,
"height": 60
}
},
"author": {
"@type": "Person",
"name": "Will H McMahan",
"image": {
"@type": "ImageObject",
"url": "https://mcmahan.me/content/images/2017/08/mbWx4jTS_400x400.jpg",
"width": 400,
"height": 400
},
"url": "https://mcmahan.me/author/will/",
"sameAs": [
"https://twitter.com/WHMII"
]
},
"headline": "SEO/Social Strategy",
"url": "https://mcmahan.me/seo-and-social-strategy-2017/",
"dateModified": "2017-08-15T14:46:23.000Z",
"description": "Many of my recent projects have involved a deep exploration of SEO. I wanted to record some of my learnings from that time. (2017)",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://mcmahan.me/"
}
}
</script>