Chapter 2 - The Big 4

Hello, Let's get to the point and start with some simple stats.

#1) There are over 342.4 million domain name registrations across all top-level domains according to Verisign.com.

#2) InternetLiveStats.com claims there are over 1.7 billion websites online right now. While only 200 million sites are still active. We all know of a site (or 1.5 billion) that haven't been updated in years.

#3) Over 10 million sites use Schema.org to markup their web pages and email messages. - Schema.org

#4*) Open Graph is used by 42.7% of all the websites.

#5*) Twitter Cards is used by 25.8% of all the websites.

#6*) Meta-tag-based formats is used by 26.5% of all the websites.

*#4-6 are statistics based on the top 10 million websites tracked by w3techs.com

Okay. No more stats. It's to show you the limited number of actual sites that use the big four that help guide search engines and social media platforms with optimization and performance of their web products and services.

Let's take a look at big four that will help your search rankings and make posts to social media more convenient.

1) Meta Tags
Meta tags, or HTML elements, are codes of text that help search engines and website visitors better understand the content found on a website page.

2) Open Graph
Open Graph is a technology first introduced by Facebook in 2010 that allows integration between Facebook and its user data and a website. By integrating Open Graph meta tags into your page's content, you can identify which elements of your page you want to show when someone share's your page.

3) Twitter Cards
Card properties are simple key-value pairs, each defined in an HTML meta tag. The combined collection of properties defines the overall card experience on Twitter, and each card type supports and requires a specific set of properties.

4) Schema.org
Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended through a well-documented extension model.

Let's look at the big four using my website wadebach.com.

Meta Tags

(Used by Browsers, Search Engines and other web services)

"The meta tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable." - http://w3schools.com

These meta tags were popular in the late 90's but have been limited since then. Some developers will stick with them while others have abandoned them. I still use them as a default. Google still has support for Description (See below), Title, Robots, Googlebot, Google-Site-Verification, Content-Type and Viewport. Some obsolete code is worth using unless it contains a security issue.

Open Graph

(Used by Facebook, Messenger, Pinterest, LinkedIn, Reddit & More)

"The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook." - http://ogp.me/

There are several types of og:type. There is website, article, music and videos. Each og:type has unique meta tags that support each type. This site is set as an article and has additional properties that support the article type such as article:published_time and article:author.

Try the Facebook for Developers Sharing Debugger
Try the LinkedIn Post Inspector
Try the Pinterest Rich Pins Validator

Open Graph Results For Wadebach.com

The results are exactly what I was expecting. The image, title and description are great. Meta tag Description is limited to 200 characters while Open Graph description allows 300. Any issues with your code will be discovered while using the debugger. Use the validator each time you make an update.

This preview will be generated when the URL is typed into Facebook's create post form. Simply remove the url after the preview has been generated and type in your text. Users will click the post and will go to the defined webpage for more information.

   

View Open Graph Posts & Examples

Twitter Cards

(Used by Twitter, duh!)

"With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a 'Card' added to the Tweet that's visible to their followers." - http://Twitter.com

There are four types of cards. Summary Card, Summary Card with Large Image, App and Player Cards.

Try the Twitter Card Validator

Twitter Card Results For Wadebach.com

The results are exactly what I was expecting. The image, title and description are great again. Twitter allows the url to be with the text of the post but won't show it. It will be replaced with the card information. There is no need to add the url then delete it like Facebook or the other Open Graph sites that generate a preview.

View Twitter Posts & Examples

Schema.org

(Used by Search Engines)

"Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond. The core vocabulary currently consists of 598 Types, 862 Properties, and 114 Enumeration values." - http://Schema.org

That's right, 598 Types, 862 Properties, and 114 Enumeration values. Some are used by millions while others are under 100. My site uses 4 schemas. Webpage, Website, Organization and Person. Adding more schema's does not guarantee a better placement, or placement at all. The same rule applies with meta tags. Keep them simple and relevant.

Try the Schema Validator by Google

Schema.org Results For Wadebach.com using Google.com


The first image is a desktop version while the second graphic is a mobile search using Google.com while searching my name. The basic meta tag information is currely being used as Google will use other information on the page such as images, markup snippets and meta data to display results. My domain has been active since 2010 and has been crawled by Google since then. My Schema's are relatively new and will take time for search engines to implement.

"Schema Markup needs to be present in order for rich results to appear. Google determines when it will show the rich results, having schema markup does not guarantee they will appear. First, check to see if Google has crawled the site (which you can see in the Google Search Console structured data report) and then be patient. It can take a week or several weeks." - SearchEngineWatch.com

Watch the Big Four in action.

Conclusion

Meta Tags, Open Graph, Twitter Cards and Schema.org are great tools to utilize to give your site an extra boost. However, these options won't help much unless you search and share your URL often. Don't forget to use the validation tools after you make updates or changes to your meta tags as the new information will be updated on their side too.

We have covered so far...
CH 2: Meta Tags
CH 2: Open Graph
CH 2: Twitter Cards
CH 2: Schema.org


Questions, comments, want to point out errors or just want to say Hi? Please fill out the contact form below.

3/1/2019 - Chapter 1 - Hello World! - Website Upgrade
3/5/2019 - Chapter 2 - The Big 4
3/10/2019 - Chapter 3 - Mobile and Browser Support
3/12/2019 - Chapter 4 - Old School
3/16/2019 - Chapter 5 - Posting and Searching
3/22/2019 - Chapter 6 - Images and Analytics
3/24/2019 - Chapter 7 - Retrospective I
4/13/2019 - Free Basic Website Meta Tag Generator

First Name:

About Wade

I am dedicated and accomplished application developer and multi-hat information system administrator and manager. Extensive background with the full lifecycle of hardware with systems, devices, networks, databases and software development while ensuring optimal performance.
 
WadeBach.com

Last Name:
Email:
Message: