-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
154 lines (114 loc) · 9.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<head>
<!-- ======================================================================================================= -->
<!-- ==== Meta Tags with OpenGraph Data Used for sites like Facebook, Linkedin, Twitter, Google+ & more ==== -->
<!-- ======================================================================================================= -->
<!--
Learn more at: http://ogp.me
SOURCES:
* https://moz.com/blog/meta-data-templates-123
* https://blog.bufferapp.com/ideal-image-sizes-social-media-posts
* https://blog.bufferapp.com/ideal-image-sizes-social-media-posts#linkedin
* https://developers.facebook.com/docs/sharing/best-practices
* https://dev.twitter.com/cards/getting-started
* http://havecamerawilltravel.com/photographer/images-photos-facebook-sizes-dimensions-types
* https://blog.bufferapp.com/ideal-image-sizes-social-media-posts#pinterest
* http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013
* http://www.metatags.info
TESTING:
* Twitter: https://dev.twitter.com/docs/cards/validation/validator
* Facebook: https://developers.facebook.com/tools/debug
* Google: http://www.google.com/webmasters/tools/richsnippets
* Pinterest: http://developers.pinterest.com/rich_pins/validator/
* Google Structured Data: https://developers.google.com/structured-data/testing-tool/
-->
<!-- Update your <html> tag to include the itemscope and itemtype attributes. -->
<!-- See other itemtypes here at: https://schema.org/docs/full.html -->
<!-- <html itemscope itemtype="http://schema.org/Article"> -->
<meta http-equiv="content-type" content="text/html;UTF-8">
<meta http-equiv="content-language" content="en">
<meta http-equiv="content-security-policy" content="upgrade-insecure-requests"> <!-- Upgrade insecure requests. See: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content -->
<meta name="description" content="____"> <!-- Website description -->
<meta name="author" content="____"> <!-- Name of the content creator / author. -->
<link rel="author" href="https://plus.google.com/____"/> <!-- Author's Google+ page. -->
<link rel="publisher" href="https://plus.google.com/____"/> <!-- Content owner's Google+ page. -->
<meta name="copyright" content="____"> <!-- Copyright holder -->
<meta http-equiv="cache-control" content="cache"> <!-- See: http://www.metatags.org/meta_http_equiv_cache_control -->
<meta http-equiv="revisit-after" content="1 day"> <!-- See: http://www.metatags.org/meta_name_revisit_after -->
<meta property="og:title" content="____" /> <!-- Page title -->
<meta property="og:site_name" data-page-subject="true" content="____" /> <!-- Site name -->
<meta property="og:url" content="http://____.com" /> <!-- OpenGraph MetaData - Best Link -->
<meta property="og:description" name="description" content="____" /> <!-- Website description again -->
<meta property="og:type" content="article" /> <!-- Content can also be "website" or others. See: http://ogp.me -->
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" /> <!-- When the article was first published. -->
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" /> <!-- When the article was last changed. -->
<meta property="article:expiration_time" content="2020-01-16T19:08:47+01:00" /> <!-- When the article is out of date after. -->
<meta property="article:section" content="____" /> <!-- A high-level section name. E.g. Technology -->
<meta property="article:tag" content="____ ____ ____" /> <!-- Tag words associated with this article. -->
<meta property="fb:admins" content="____" /> <!-- Facebook numeric ID -->
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="____"> <!-- The Name or Title Here -->
<meta itemprop="description" content="____"> <!-- This is the page description -->
<!-- Twitter Card data -->
<meta name="twitter:card" content="____"> <!-- summary_large_image -->
<meta name="twitter:site" content="____"> <!-- @username for the website used in the card footer. -->
<meta name="twitter:title" content="____"> <!-- Page title again -->
<meta name="twitter:description" content="____"> <!-- Page description less than 200 characters -->
<meta name="twitter:creator" content="____"> <!-- @username for the content creator / author. -->
<!-- ============================================================================== -->
<!-- ==================================== IMAGES ================================== -->
<!-- Multiple og:image definitions are ok. The platform will find the one it needs. -->
<!-- ============================================================================== -->
<!-- ================ Safe generic defaults ================ -->
<!-- Use one of these at the very least. -->
<meta property="og:image" content="https://____.com/image-1024x512.jpg" /> <!-- Generic safe dimension (Landscape). -->
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="512" />
<meta property="og:image" content="https://____.com/image-800x1200.jpg" /> <!-- Generic safe dimension (Portrait). -->
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="1200" />
<!-- ================ Facebook ================ -->
<!-- Facebook will give the user the choice to choose one of the og:image thumbnails. -->
<meta property="og:image" content="https://____.com/image-200x200.jpg" /> <!-- 200x200 Image for Facebook. -->
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
<meta property="og:image" content="https://____.com/image-470x470.jpg" /> <!-- 470x470 Square Image for Facebook. -->
<meta property="og:image:width" content="470" /> <!-- Optimal timeline size -->
<meta property="og:image:height" content="470" /> <!-- Optimal timeline size -->
<meta property="og:image" content="https://____.com/image-1200x630.jpg" /><!-- Recommended image for Facebook. (Max. 8MB)-->
<meta property="og:image:width" content="1200" /> <!-- Scales down to 470 -->
<meta property="og:image:height" content="630" /> <!-- Scales down to 246 -->
<meta property="og:image" content="https://____.com/image-1500x1500.jpg" /><!-- Largest image for Facebook. (Max. 5MB)-->
<meta property="og:image:width" content="1500" /> <!-- Scales down to 470 -->
<meta property="og:image:height" content="1500" /> <!-- Scales down to 470 -->
<!-- ================ Twitter ================ -->
<meta name="twitter:image" content="https://____.com/image-120x120.jpg" /> <!-- 120x120px Minimum size image for Twitter Summary card type -->
<meta name="twitter:image" content="https://____.com/image-280x150.jpg"> <!-- 280x150px Minimum size image for Twitter Summary with large image card type -->
<meta name="twitter:image" content="https://____.com/image-506x506.jpg"> <!-- Optimal size image for Twitter Summary with large image card type -->
<!-- ================ Linkedin ================ -->
<meta property="og:image" content="https://____.com/image-180x110.jpg" /> <!-- 180x110 Image for Linkedin - Do not exceed. -->
<meta property="og:image:width" content="180" />
<meta property="og:image:height" content="110" />
<meta property="og:image" content="https://____.com/image-1440x880.jpg" /> <!-- 1440x880 HD Image for Linkedin - Untested support. -->
<meta property="og:image:width" content="1440" />
<meta property="og:image:height" content="880" />
<meta property="og:image" content="https://____.com/image-442x248.jpg" /> <!-- 442x248 Image for Linkedin Showcase pages. -->
<meta property="og:image:width" content="442" />
<meta property="og:image:height" content="248" />
<!-- ================ Google+ ================ -->
<meta itemprop="image" content="https://____.com/image-180x120.jpg"> <!-- 180x120 Image for Google+ in Schema.org markup -->
<meta property="og:image" content="https://____.com/image-150x150.jpg" /> <!-- 150x150 Minimum size. Appears to left of the update. -->
<meta property="og:image:width" content="150" /> <!-- Minimum width. -->
<meta property="og:image:height" content="150" /> <!-- Minimum height. -->
<meta property="og:image" content="https://____.com/image-426x426.jpg" /> <!-- 426x426 Optimum Image for Google+. -->
<meta property="og:image:width" content="426" /> <!-- Try to keep this width. -->
<meta property="og:image:height" content="426" /> <!-- Can be any height. -->
<!-- ================ Pinterest ================ -->
<meta property="og:image" content="https://____.com/image-736x1128.jpg" /> <!-- Optimum Image for Pinterest. -->
<meta property="og:image:width" content="736" /> <!-- Try to keep this width. -->
<meta property="og:image:height" content="1128" /> <!-- Optimal size but can be any height. Aspect ratio between 2:3 and 1:3.5 recommended. -->
<!-- =============================================================================== -->
<!-- =================================== FAVICONS ================================== -->
<!-- Use http://realfavicongenerator.net to generate the code for your Favicons then -->
<!-- paste the provided code below. -->
<!-- =============================================================================== -->
</head>