-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoverview.html
385 lines (363 loc) · 19.6 KB
/
overview.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meta Tags Overview</title>
<meta name="description" content="The SEO behind a better, more modern website lies in having the most important link elements and meta tags. Discover the essentials! 📈📝">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Ali Cheikh">
<meta name="keywords" content="SEO, Meta Tags, Website Optimization, Modern Web Design, Link Elements">
<!-- Social Media Meta Tags -->
<meta property="og:title" content="Meta Tags Overview">
<meta property="og:description" content="The SEO behind a better, more modern website lies in having the most important link elements and meta tags. Discover the essentials! 📈📝">
<meta property="og:image" content="https://yourwebsite.com/images/seo-meta-tags.png">
<meta property="og:url" content="https://www.ali-cheikh.com/img/pseogh.jpeg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta Tags Overview">
<meta name="twitter:description" content="The SEO behind a better, more modern website lies in having the most important link elements and meta tags. Discover the essentials! 📈📝">
<meta name="twitter:image" content="https://www.ali-cheikh.com/img/pseogh.jpeg">
<!-- Browser-Specific Meta Tags -->
<meta name="theme-color" content="#317EFB">
<meta name="msapplication-TileColor" content="#ED8937">
<meta name="msapplication-TileImage" content="https://www.ali-cheikh.com/img/pseogh.jpeg">
<link rel="icon" type="image/png" sizes="16x16" href="SVGHAT GUY.svg">
<link rel="manifest" href="https://sep.alicheikh.tn/seo.png">
<!-- Canonical Link -->
<link rel="canonical" href="https://www.ali-cheikh.com/img/pseogh.jpeg">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #1A202C; /* Dark Blue Background */
color: #F7FAFC; /* White Text */
overflow: hidden; /* Hide overflow */
}
.container {
display: flex;
align-items: flex-start;
height: 90vh;
overflow: auto;
padding: 1rem;
box-sizing: border-box;
}
.header {
position: sticky;
top: 0;
background: #1A202C; /* Dark Blue Background */
width: 100%;
z-index: 10;
padding: 1rem;
text-align: left;
overflow-x: auto;
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 1rem;
overflow: auto;
}
.card {
background-color: #2D3748; /* Darker Card Background */
border-radius: 0.5rem; /* Rounded Corners */
padding: 1rem; /* Padding Inside Card */
min-width: 230px; /* Minimum Width */
margin: 1rem; /* Margin */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth Animation */
box-sizing: border-box;
}
.card:hover {
transform: translateY(-10px); /* Lift Card on Hover */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Shadow on Hover */
}
.section-title {
border-bottom: 2px solid #F6AD55; /* Accent Color Border */
padding-bottom: 0.5rem; /* Space Below Title */
margin-bottom: 1rem; /* Space Below Title */
}
.snippet {
background-color: #1A202C; /* Dark Background for Snippet */
border-radius: 0.375rem; /* Rounded Corners */
padding: 0.5rem; /* Padding Inside Snippet */
color: #F7FAFC; /* White Text */
overflow: hidden; /* Hide Overflow */
}
.description {
color: #E2E8F0; /* Lighter Text for Description */
}
.fade-in {
animation: fadeIn 1s ease-out; /* Fade-in Animation */
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 468px) {
.header img{
display: none;
}
.header{
font-size: 50%;
}
}
@media (min-width: 768px) {
.header{
margin-top: 300px;
}
}
@media (max-width: 768px) {
.content {
flex-direction: column;
align-items: center;
height: auto; /* Adjust height for mobile */
overflow: auto;
}
.card {
margin: 1rem; /* Adjust margin for mobile */
min-width: 100%; /* Full Width on Mobile */
}
}
.draggable {
position: relative;
cursor: grab;
}
.draggable:active {
cursor: grabbing;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
background: url('https://cdn-icons-png.freepik.com/512/11252/11252779.png') no-repeat center;
background-size: 100%;
border-radius: 50px; /* Optional: round the edges */
color: #000;
}
::-webkit-scrollbar-track {
background: #f0f0f0; /* Light grey background for track */
border-radius: 50px; /* Optional: round the edges */
}
.scroll-container {
position: relative;
width: 100%;
overflow: hidden; /* Hide default scrollbar */
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="text-6xl font-mono font-bold text-accent mb-8 " style="overflow-wrap: break-word;"> Meta Tags<br> OverView</h1>
<center>
<img src="SVGHAT GUY.svg" style="width: 80%;" class="mb-8" alt="hat-fella">
</center>
</div>
<div class="content">
<!-- Highly Important Meta Tags -->
<section class="w-full max-w-screen-md p-6">
<h2 class="text-3xl font-semibold text-yellow-500 section-title">Highly Important</h2>
<div class="space-y-6">
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Charset</h3>
<pre class="snippet"><meta charset="UTF-8"></pre>
<p class="description">Specifies the character encoding for the HTML document.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Viewport</h3>
<pre class="snippet"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
<p class="description">Sets the viewport to make your website responsive.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Title</h3>
<pre class="snippet"><title>Your Website Title</title></pre>
<p class="description">Defines the title of the document, shown in the browser tab.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Meta Description</h3>
<pre class="snippet"><meta name="description" content="Your website description"></pre>
<p class="description">Provides a short description of your website, crucial for SEO.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Favicon</h3>
<pre class="snippet"><link rel="icon" href="/favicon.ico" type="image/x-icon"></pre>
<p class="description">Adds a favicon to your site, displayed in browser tabs.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Canonical Link</h3>
<pre class="snippet"><link rel="canonical" href="https://example.com"></pre>
<p class="description">Specifies the canonical URL of your page to avoid duplicate content issues.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Open Graph Title</h3>
<pre class="snippet"><meta property="og:title" content="Your Site Title"></pre>
<p class="description">Defines the title of your website when shared on social media.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Open Graph Image</h3>
<pre class="snippet"><meta property="og:image" content="https://example.com/image.jpg"></pre>
<p class="description">Specifies the image that will appear when your site is shared on social media.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Open Graph URL</h3>
<pre class="snippet"><meta property="og:url" content="https://example.com"></pre>
<p class="description">Specifies the canonical URL of your site for Open Graph.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Twitter Card</h3>
<pre class="snippet"><meta name="twitter:card" content="summary_large_image"></pre>
<p class="description">Defines the Twitter card type to show when shared.</p>
</div>
</div>
</section>
<!-- Moderate Importance Meta Tags -->
<section class="w-full max-w-screen-md p-6">
<h2 class="text-3xl font-semibold text-blue-500 section-title">Moderate Importance</h2>
<div class="space-y-6">
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Open Graph Site Name</h3>
<pre class="snippet"><meta property="og:site_name" content="Your Site Name"></pre>
<p class="description">Specifies the name of your site for Open Graph.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Open Graph Type</h3>
<pre class="snippet"><meta property="og:type" content="website"></pre>
<p class="description">Defines the type of content for Open Graph.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Twitter Title</h3>
<pre class="snippet"><meta name="twitter:title" content="Your Site Title"></pre>
<p class="description">Sets the title for Twitter cards.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Twitter Description</h3>
<pre class="snippet"><meta name="twitter:description" content="Your website description"></pre>
<p class="description">Sets the description for Twitter cards.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Twitter Image</h3>
<pre class="snippet"><meta name="twitter:image" content="https://example.com/image.jpg"></pre>
<p class="description">Specifies the image to be used in Twitter cards.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Theme Color</h3>
<pre class="snippet"><meta name="theme-color" content="#000000"></pre>
<p class="description">Sets the browser’s theme color to match your branding.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Robots</h3>
<pre class="snippet"><meta name="robots" content="index, archive, follow"></pre>
<p class="description">Provides instructions to search engine crawlers about the page.</p>
</div>
</div>
</section>
<!-- Less Important Meta Tags -->
<section class="w-full max-w-screen-md p-6">
<h2 class="text-3xl font-semibold text-green-500 section-title">Less Important</h2>
<div class="space-y-6">
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">MS Tile Color</h3>
<pre class="snippet"><meta name="msapplication-TileColor" content="#2b5797"></pre>
<p class="description">Specifies the tile color for Windows start screen tiles.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Safari Pinned Tab</h3>
<pre class="snippet"><link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#484848"></pre>
<p class="description">Provides a pinned tab icon for Safari.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Apple Touch Icon</h3>
<pre class="snippet"><link rel="apple-touch-icon" href="/apple-touch-icon.png"></pre>
<p class="description">Specifies an icon for Apple devices.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Alternate Stylesheet</h3>
<pre class="snippet"><link rel="alternate stylesheet" href="/styles/alternate.css" title="Alternate Style"></pre>
<p class="description">Defines an alternate stylesheet that users can switch to.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Preconnect</h3>
<pre class="snippet"><link rel="preconnect" href="https://example.com"></pre>
<p class="description">Specifies origins that the browser should preconnect to for faster loading.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Noindex</h3>
<pre class="snippet"><meta name="robots" content="noindex"></pre>
<p class="description">Tells search engines not to index this page.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Noarchive</h3>
<pre class="snippet"><meta name="robots" content="noarchive"></pre>
<p class="description">Prevents search engines from storing a cached copy of the page.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Refresh</h3>
<pre class="snippet"><meta http-equiv="refresh" content="30"></pre>
<p class="description">Refreshes the page every 30 seconds.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Author</h3>
<pre class="snippet"><meta name="author" content="Your Name"></pre>
<p class="description">Specifies the author of the document.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Generator</h3>
<pre class="snippet"><meta name="generator" content="Your Tool"></pre>
<p class="description">Identifies the tool or software used to generate the document.</p>
</div>
<div class="card fade-in draggable">
<h3 class="text-xl font-bold text-accent">Pragma</h3>
<pre class="snippet"><meta http-equiv="pragma" content="no-cache"></pre>
<p class="description">Specifies caching directives for HTTP responses.</p>
</div>
</div>
</section>
</div>
</div>
<script>
document.querySelectorAll('.draggable').forEach(card => {
card.addEventListener('mousedown', function(event) {
event.preventDefault(); // Prevents text selection during drag
const shiftX = event.clientX - card.getBoundingClientRect().left;
const shiftY = event.clientY - card.getBoundingClientRect().top;
// Function to move the card based on the current mouse position
function moveAt(pageX, pageY) {
card.style.position = 'absolute'; // Ensure card is positioned absolutely
card.style.left = pageX - shiftX + 'px';
card.style.top = pageY - shiftY + 'px';
}
// Initial move
moveAt(event.pageX, event.pageY);
// Update card position during dragging
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
// Attach the mousemove event listener
document.addEventListener('mousemove', onMouseMove);
// Remove event listeners when the mouse button is released
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
// Attach the mouseup event listener
document.addEventListener('mouseup', onMouseUp);
});
// Prevent default drag behavior
card.ondragstart = function() {
return false;
};
});
const content = document.querySelector('.content');
const percentageIndicator = document.querySelector('.percentage-indicator');
function updatePercentageBar() {
const scrollHeight = content.scrollHeight;
const clientHeight = content.clientHeight;
const scrollTop = content.scrollTop;
const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
percentageIndicator.style.height = `${scrollPercent}%`;
}
content.addEventListener('scroll', updatePercentageBar);
</script>
</body>
</html>