code • Organic SEO, rich snippets and Schemas - martindubenet/wed-dev-design GitHub Wiki

1. Facebook’s Open Graph Protocol Sharing Debugger
2. Google Search’s Structured Data debugger

 

• https://schema.org/

Google’s, Bing’s and other bots looks for structured data that it finds on webpages to understand the content of that page, as well as to gather information about the web and the world in general.

1. Google Search Galleries for top search results.
2. Register your domain on Google Search Console.

 

Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook.

• https://ogp.me/
• https://developers.facebook.com/docs/sharing/webmasters/getting-started/basic-link
• Facebook Bot

tag	required or not	html	specifications
app_id	Y👍	<meta property="fb:app_id" content="395450240451647" />	You needs to register (1st) as a developer, then (2nd) your site's domain as one of your apps. Only then you will find the app_id key in your apps landing page.
Title	Y👍	<meta property="og:title" content="The Title" />
Image	Y👍	<meta property="og:image" content="https://domain.com/post/featured-image.jpg" />	Minimum required is 1200x600
Type	N👎	<meta property="og:type" content="product.wine" />
URL	N👎	<meta property="og:url" content="https://www.vignoble-leblanc.ca/bouteilles-de-vin/pas-complique/" />	Like the rel attributes for SEO this is seful if your content is duplicated accros your sitemap.

 

Basics HTML requirements for WCAG.

tag	seo value	html	usage	specifications
Description tag	★★★★★	<meta name="description" content="…">	Describe the content of the page where the URL is pointing	Only the first 136 characters will be consider by search engines bots.
Images Alternative attribute	★★★★★	<img alt="…">	Describe for blind reader bots what the image is about. This attributes is the best return on investement (ROI) to get proper ranking in search results.	…
Keywords tag	★☆☆☆☆	<meta name="keywords" content="keyword1, keyword2">	A register of important terms used on the page	Each term must be seperated by a comma. Words with Latin accented characters (French, Spanish, etc.) must be encoded in html format to make sure that they don't get transformed when saved within a database.

tag	seo value	html	usage	specifications
Place name	★☆☆☆☆	<meta name="geo.placename" content="Saint-Anicet"/>
Latitude and Longitude	★☆☆☆☆	<meta name="geo.position" content="45,1412416,-74,3448606">

 

1. The <title> and <h1> of the page should contain the same words (but can differ in phrasing).
2. It is a common practice to set the URI of the page as a link (not styled as clickable) within the page title: <h1><a href="http://example.com">Example.com</a></h1>.
3. Always fill an alt attribute on image: <img alt="Describe this image for blind readers">.
4. Set heading tags hierarchy according to semantic analyses and style them according to mockups using class: <h3 class="h1">.
5. Use HTML5 structural tags on proper containers: <header> VS <main> VS <footer> ; <section> within <article>, <aside> for sidebars and <nav> for site's navigation menus.

 

Source: Link types for rel attributes on developer.mozilla.org

Value	Definition	Attributes
archives	Defines a hyperlink to a document that contains an archive link to this one	<a>, <area>, <link>
author	Defines a hyperlink to a page describing the author or providing a way to contact the author.	<a>, <area>, <link>
canonical	A canonical link element is an HTML element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization.	<link>
external	Indicates that the hyperlink leads to a resource outside the site of the current page; that is, following the link will make the user leave the site.	<a>, <area>, <link>
nofollow	Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link).	<a>, <form>, <link>
noopener	This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the Window.opener property (see About rel=noopener for more details), while still providing the Referer HTTP header (unless noreferrer is used as well).	<a>, <form>, <link>
noreferrer	Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referer: HTTP header. (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, ignored this).	<a>, <form>, <link>
search	Indicates that the hyperlink references a document whose interface is specially designed for searching in this document, or site, and its resources.	<a>, <area>, < form>, <link>
up	Indicates that the page is part of a hierarchical structure and that the hyperlink leads to the higher level resource of that structure.	<a>, <area>, <link>