Common websites descriptions & favicon

Common websites descriptions & favicon

Slava Zheltov

Fast links

  1. Common info
  2. Favicons
  3. Title tag
  4. Description tag
  5. Open Graph fields
  6. Twitter card
  7. Examples
  8. Validators


Common info

Title (50-70 chr.), description (150-200 chr.), favicons & social thumb (1200×628)


Favicons

We need to provide icons to all common devices. List of the size`s

16x16
32x32
57x57
60x60
72x72
76x76
96x96
114x114
120x120
144x144
152x152
180x180
192x192



Favicons with apple bar colors: Real Favicon Generator. Here we also can check favicons, generate and check open graph code.

Also we need to include images from favicon generator


Example

<!-- FAVICON GENERATOR ICONS -->
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- REAL FAVICON -->
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">





title tag

length: 50-70 characters
contains: name and essence of the project


Example:

CryptoKitties | Collect and breed digital cats!


description tag

length: 150-200 characters
contains: common project info


Example:

Collect and trade CryptoKitties in one of the world's first blockchain games. Breed your rarest cats to create the purrfect furry friend. The future is meow!



OG fields

type: website / article / profile / ...
site_name: name of the project from title tag
title: equal to title tag
description: equal to description tag
image: 1200×628, example – vk.cc/7Rm7kS
url: current / index page of project


Docs / FaceBook / Validator


Twitter card

card: summary_large_image
site: @TwitterAccount
creator: @TwitterAccount
title: equal to title tag
description: equal to description tag
image: equal to OG image, minimum 144×144, maximum 4096×4096 
url: equal to OG url


Docs / Validator


JSON LD

@context: http://schema.org
@type": WebSite / 
url: url of the page
name: equal to title tag
author: JSon object
description: equal to description tag
and more:)


Docs / JSON-LD / Yandex / Validator


FaceBook

admins: Facebook numeric ID





Examples


Standart Article

<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" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<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" /> 
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />

<!-- JSON LD -->
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "http://www.example.com/",
  "name": "Generally the title",
  "author": {
    "@type": "Person",
    "name": "Jane Doe"
  },
  "description": "Any sort of description, I'd keep it short", 
  "publisher": "publisher name",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "http://www.example.com/?s={search_term}",
    "query-input": "required name=search_term"
  }
}
</script>




Full without JSON-LD, but with Schema

Update html tag

<html itemscope itemtype="http://schema.org/Article">



Article

<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<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" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />

<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />

<meta property="fb:admins" content="Facebook numberic ID" /> 




Product

<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.jpg">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<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" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" /> 


source


OG

<meta property="og:type" content="website" />
<meta property="og:site_name" content="CryptoKitties" />
<meta property="og:title" content="CryptoKitties | Collect and breed digital cats!" />
<meta property="og:description" content="Collect and trade CryptoKitties in one of the world's first blockchain games. Breed your rarest cats to create the purrfect furry friend. The future is meow!" />
<meta property="og:image" content="https://www.cryptokitties.co/images/share.png" />
<meta property="og:url" content="https://www.cryptokitties.co" />



Twitter

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@CryptoKitties" />
<meta name="twitter:title" content="CryptoKitties | Collect and breed digital cats!" />
<meta name="twitter:description" content="Collect and trade CryptoKitties in one of the world's first blockchain games. Breed your rarest cats to create the purrfect furry friend. The future is meow!" />
<meta name="twitter:image" content="https://www.cryptokitties.co/images/share.png" />
<meta name="twitter:url" content="https://www.cryptokitties.co" />



JSON LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "http://www.example.com/",
  "name": "Generally the title",
  "author": {
    "@type": "Person",
    "name": "Jane Doe"
  },
  "description": "Any sort of description, I'd keep it short", 
  "publisher": "publisher name",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "http://www.example.com/?s={search_term}",
    "query-input": "required name=search_term"
  }
}
</script>


source


Result of JSON-LD code



Validators

Twitter Validation Tool

Facebook Debugger

Google Structured Data Testing Tool

Yandex microtext validator

Pinterest Rich Pins Validator

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org