It's a safe bet that your users share your page on social networks at least once, right? You've certainly shared articles or particularly exciting sites before. Most of the time, automatic information is displayed on the social network: there's sometimes a page name, link, image in the right proportions, and even the name of a page to follow. It's a little magic of social networking that occurs: simply copying a link formats content ready to be shared!
However, to paraphrase our friend Antoine de Saint-Exupéry, the essential is invisible to the eyes. When you paste a link in the newsfeed of a social network, it begins to browse its source code in search of information: title page, image, link, and any other element that the developer will want to add.
If nothing is found, it will fill this information itself. That is why, sometimes, Facebook offers several images (or none) to accompany your link. The developer hasn't thought to include the correct data in their source code.
What elements are we talking about exactly? Meta-tags. They allow social networks to better understand the content of your page and display the content you want. You are thus master of content on social networks.
Most social networks use "meta tags" to complete this information. These are meta tags contained in the <head> of your site. A small example:
<head>
<title> Catyler, our new hero</title>
<meta name="description" content="I need a cat, I'm holding out for a hero 'til the end of the night. He's gotta be strong...">
</head>If no other information is given, social networks indicate that the title of the publication is "Catyler, our new hero" and that the caption is "I need a cat, I'm holding out for a hero ' til the end of the night. He's gotta be strong..."
But some social networks have needed more specific items, such as images of a certain size or additional information. That is why they have developed their own attributes. We will focus on two main social networks: Facebook and Twitter.
Facebook: Open Graph
The Open Graph is a protocol developed by Facebook that allows it to retrieve information on your web page and create a structured entry in Facebook.
Let's use the Catyler page. Facebook needs more information than just a title and description. Indeed, the user would like to add a photo of the singer and the link to his site. Facebook wants to know if it's supposed to share an article, a home page, a music video, etc.
The protocol for Facebook includes many properties that we can't see in much detail. However, you can use this basic snippet on most of your pages.
<!-- Open Graph data -->
<meta property="og:title" content="Title Here"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.com/"/>
<meta property="og:image" content="http://example.com/image.jpg"/>
<meta property="og:description" content="Description Here"/>A very useful tool to understand how Open Graph works is the Facebook Debugger: https://developers.facebook.com/tools/debug/. It explains why certain items are not displayed (useful when, for example, your photo is not properly included).
Twitter: Twitter Cards
Twitter also has its own meta tags. You can tell Twitter which image to use and which dimensions. Use this boilerplate to incorporate the meta tags of your choice.
I will integrate the "minimal_template" but I invite you to look at other boilerplates.
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.com/"/>
<meta property="og:image" content="http://example.com/image.jpg"/>
<meta property="og:description" content="Description Here"/>Towards a Semantic Web
A major challenge for the search engines can be summarized in two words: semantic web. This concept refers to the creation of standards on the web that allow search engines to understand the universe of semantic queries that are made.
Let's look at an example.
There are many blogs and Tumblrs talking about cats. You and I know this because our brain makes the connection between the type of animal "cat" and the word "cat." When we were children, someone told us: "This is a cat. This is an animal."
However, there's also a brand of construction machinery called CAT. Robots are like children who are trying to understand human vocabulary. If you search for "cat" on your favorite search engine, the engine will not know if you're looking for the animal or the construction machinery. It will then offer you a mixture of both in an attempt to get it right.
Search engines need to learn the universal semantics in order to properly use context and vocabulary. They've developed their own conventions to do this. Then, in 2011, some of them came together to create a common standard that could be adopted by all developers. Schema.org was born! This is a collaborative community whose mission is to create, maintain, and promote new strategies for structuring data on the internet. It is part of the great global thought process on how to handle the semantic web.
Schema.org introduces new HTML attributes that allow robots (like Google) to better understand the content of web pages. They contextualize concepts we use in a way that allows robots to understand and better display results.
Imagine that we sell a cat figurine. Ideally, we want a user to buy this figurine. The Schema.org attributes are interpreted by most search engines and generate different views that can feature your product in the most relevant way.
The topic deserves an entire course, so we'll let it go for now. If you have time, read this excellent piece about the relationship between Schema.org and Google.
This sounds really complicated. Do I really have to understand the semantic web?
Understanding semantic tags is essential, and I advise you to play with the tools below!
Structured Data Testing Tool: Look for a page containing semantic tags, and Google will show you what they got from it.
Schema Creator: Create your first semantic tags through a form that will display the corresponding HTML code.
