[update] 2023 SEO Optimized Core HTML template (ARIA / Micro-structure / Micro-data) additions
In the post: https://bit.ly/medium-official-2023-template-html (This is a short link pointing to the top pinned article/blog post on https://djsubstance.medium.com — please bookmark that site and if you want to help me out, since i write all of these for your benefit primarily, I dont get anything, please link on your site(s) to https://tranceattic.com and https://djsubstance.org Thx!
Web Page Structure — Micro-data / ARIA Tags / Web Schema’s / OpenGraph Tags — What the hell are these terms.
Lets go back a step or two, forget youtube or eBay (they dont count) of the primary search engines (google, yahoo, yandex, ecosia, etc) how often do you search for one word? I would imagine almost never. For instance looking on Google or Bing for “dog” would be pointless:
99.9% of the time, are you really interested in the term dog? no, you might want: “dog grooming in Bloomington mn” this is called a “Long Tail Keyword”.
If you want to rank #1 immediately for your website, use https://keyword.io for help, here is an example. Since I am a DJ and producer of trance melodies mostly, I did a google and bing search (last year) on:
Elite Progressive Trance
What show’d up was *no* direct matches (this is what we want), I believe Resident advisor came up and other sites, but they specifically said nothing matches those keywords. So use them, You have to have your title <80 chars or so (www.serpsim.com can help) and the metadesc is critical, it cannot be over 164 chars . You never use your domain name in the title! However, you want to match at least 4 words from the metadesc and title. This is is how I ranked #1 for those 3 words:
Notice a few things, This is not my website (tranceattic.com showing as #1. The reason is the domain authority (DA) of youtube is very very high. Scrolling down a bit.
One thing to note, if you want to get above the sites above you and i know this post is not about that, view the source on all pages that are not you and are above you and add those keywords to your site if possible.
Lastly before moving on to the topic at hand:
Make sure you are doing this incognito and do not only rely on Google.com, I am just searching DJ Substance right now —
It also depends on the time of day, your location, if your logged into google and many other factors. So onto the main topic
I felt it necessary to explain that stuff, prior. it isnt all that complex but it can help alot. What I wanted to discuss was making your site more visible with the tags in your <html>.
Lets define Microstructures / Microformats — This is a link to MSDN
Microformats are standards used to embed semantics and structured data in HTML, and provide an API to be used by social web applications, search engines, aggregators, and other tools. These minimal patterns of HTML are used for marking up entities that range from fundamental to domain-specific information, such as people, organizations, events, and locations.
Its not hard to just add an extra key/value pair in an <img> or <a> tag when (if your like me), you can already code off the top of your head and already do such meta tags as <img alt=”img desc”> — thats what it will take to comply with HTML5/CSS3 standards and the new micro-format and ARIA tags (for the disabled to interpret your web content).
I suggest and see successful sites designed like this, I'm going to go over a HTML5 template and include use case example demonstrating the use of these tags. These are for individuals with disabilities (specifically visual or hearing issues people face, that require specialized equipment such as a USB Braille keyboard Adding the ARIA tag is not hard at all. I suggest putting these ARIA descriptive tags in any <img> (image) or <a href> (link) — from a general perspective adding the ARIA tag is no different then the ALT=”” tag used in <img> with one distinct difference — the ARIA tag has 2 descriptive parts in the tag that help define subject / topic For instance, If we have a <div> container which is a vertical 3 card information section — think of 3 about boxes with an image of am employee, their name, title. email address, etc — these are tags that need to be defined and a certain format of definition in order to be compliant: see example
At this point, if you've been reading my posts and following along and taking suggestions you should be using PHP or at l east understand this:
Client Side Languages:
HTML, JS, CSS
Server Side Languages:
PHP, ASPX, CFM, NODEJS, DotNet, PERL .cgi
Prior to the example ARIA stands for Accessible Rich Internet Applications. It is a set of attributes designed for persons with disabilities, to enhance the accessibility of web content and applications.
Need to change the music — take a break — cya in 5
In summary here is the updated template with secure header addon:
<?php
ini_set('display_errors', '0');
ini_set('max_execution_time', '0');
ini_set('error_log','error_log');
ini_set('log_errors', '1');
ini_set('report_memleaks', '1');
ini_set('track_errors', '1');
ini_set('max_execution_time', '0');
ini_set('report_memleaks', '1');
define('ROOT_PATH', dirname(__DIR__) .'/');
require("headers.php");
// in order to score a B on Mozilla Observatory - include this content in headers.php
// headers.php is posted below
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DOM TREE state at this point:
head is a child node of html
html is a parent node of head -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Boxes</title>
<link rel="stylesheet" href="#">
<!--
SEE THE OTHER MEDIUM BLOG POST FROM SUBSTANCE FOR THE META TAGS
-->
</head>
<body>
<!--
Microdata specification introduces the following tags [attributes]:
itemscope - define a new item
itemtype - define a new type
itemprop - specify properties for each item
The ARIA specification introduces the following tags [roles]:
list
listitem
these help in providing a meaningful descriptive content
-->
<div class="container" role="list"> <!-- *always* wrap your page in a div -->
<div class="box" role="listitem">
<!-- See role= markup above - this is a Contact Card [1/3] -->
<div class="contact-card" itemscope itemtype="http://schema.org/Person">
<img src="john-doe.jpg" alt="John Doe" class="profile-pic" itemprop="image">
<h2 itemprop="name">John Doe</h2>
<p>Email: <span itemprop="email">johndoe@example.com</span></p>
<p>Phone: <span itemprop="telephone">+1 234 567 8901</span></p>
<a href="#" class="contact-link" itemprop="url" aria-label="Visit John Doe's Profile">Visit Profile</a>
</div>
</div>
<div class="box" role="listitem">
<!-- See role= markup above - this is a Contact Card [2/3] -->
<div class="contact-card" itemscope itemtype="http://schema.org/Person">
<img src="jane-doe.jpg" alt="Jane Doe" class="profile-pic" itemprop="image">
<h2 itemprop="name">Jane Doe</h2>
<p>Email: <span itemprop="email">janedoe@example.com</span></p>
<p>Phone: <span itemprop="telephone">+1 234 567 8902</span></p>
<a href="#" class="contact-link" itemprop="url" aria-label="Visit Jane Doe's Profile">Visit Profile</a>
</div>
</div>
<div class="box" role="listitem">
<!-- See role= markup above - this is a Contact Card [3/3] -->
<div class="contact-card" itemscope itemtype="http://schema.org/Person">
<img src="robert-doe.jpg" alt="Robert Doe" class="profile-pic" itemprop="image">
<h2 itemprop="name">Robert Doe</h2>
<p>Email: <span itemprop="email">robertdoe@example.com</span></p>
<p>Phone: <span itemprop="telephone">+1 234 567 8903</span></p>
<a href="#" class="contact-link" itemprop="url" aria-label="Visit Robert Doe's Profile">Visit Profile</a>
<!--
█████╗ ██████╗ ██╗ █████╗
██╔══██╗██╔══██╗██║██╔══██╗
███████║██████╔╝██║███████║
██╔══██║██╔══██╗██║██╔══██║
██║ ██║██║ ██║██║██║ ██║
╚═╝ ╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═╝
Accessible Rich Internet Applications
███╗ ███╗██╗ ██████╗██████╗ ██████╗ ██████╗ █████╗ ████████╗ █████╗
████╗ ████║██║██╔════╝██╔══██╗██╔═══██╗██╔══██╗██╔══██╗╚══██╔══╝██╔══██╗
██╔████╔██║██║██║ ██████╔╝██║ ██║██║ ██║███████║ ██║ ███████║
██║╚██╔╝██║██║██║ ██╔══██╗██║ ██║██║ ██║██╔══██║ ██║ ██╔══██║
██║ ╚═╝ ██║██║╚██████╗██║ ██║╚██████╔╝██████╔╝██║ ██║ ██║ ██║ ██║
╚═╝ ╚═╝╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝
Structured Data for the Web
Note: class="profile-pic" itemprop="image"
itemprop="email" itemprop="telephone"
-->
</div> </div> </div>
</body>
</html>CSS BELOW -
style.css
// Nothin beats a kik a$$ scroll bar
body {
scrollbar-face-color: #183F5C;
scrollbar-arrow-color: white;
scrollbar-track-color: #1D2836;
scrollbar-shadow-color: '';
scrollbar-highlight-color: '';
scrollbar-3dlight-color: '';
scrollbar-darkshadow-color: '';
background: #000;
color: #ddd;
transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 90px 0;
width: 90%;
}
.logo {
width: 50px;
height: 50px;
}
.container {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
The following PHP script should be called with require() at the top of all PHP content:
headers.php
<?php
// secure web headers
// Replace the url $url with your domain
$url="https://tranceattic.com";
$org="https://googleapis.com"; // change this to anything you may need
// Set HTTP Content security policy / csp
$csp="default-src 'self' 'upgrade-insecure-requests' $org; script-src 'self'; style-src 'rep
ort-sample' 'self' https://fonts.googleapis.com https://maxcdn.bootstrapcdn.com; object-src 'n
one'; base-uri 'self'; connect-src 'self'; font-src 'self' https://fonts.gstatic.com https://m
axcdn.bootstrapcdn.com; frame-src 'self'; img-src 'self' https://images.unsplash.com https://s
oketi.app; manifest-src 'self'; media-src 'self'; worker-src 'none'; script-src-elem 'self'";
// Set HTTP Permission Policy
$perm="autoplay=(), camera=(), fullscreen=(self 'https://$url'), geolocation=(self 'https://$u
rl'), microphone=()";
// Create array for secure headers
$setHeaders = array(
"headers1" => "Strict-Transport-Security: max-age=max-age=631138519; includeSubDomains; prelo
ad",
"headers2" => "X-Content-Type-Options: nosniff",
"headers3" => "X-Frame-Options: DENY",
"headers4" => "X-XSS-Protection: 1; mode=block",
"headers5" => "Permissions-Policy: $perm",
"headers6" => "Referrer-policy: no-referrer",
"headers7" => "Content-Security-Policy-Report-Only: $csp");
// Send the headers
for($j=1;$j<=7;$j++) header($setHeaders['headers' .$j]);
?>Courtesy of substance / 9x
‘Microformats use supporting vocabularies to describe objects and name-value pairs to assign values to their properties. The properties are carried in class attributes that can be added to any HTML element, while the data values re-use HTML element content and semantic attributes.
So I cannot say 100% that this is going to make your sites gain a ton of authority or ranking, I just started implementing it, if you get in the habit of learning the other tags (i only mentioned one category), it should greatly benefit you in ranking over your competitors — whom you should make a list of, and be somewhat regularly checking for various items:
Your competitors title
Meta Description
Meta Keywords
Analyze their <h1> and if it doesnt match up with the meta data and topic in terms of keywords, then you need to do that and capitalize on their keywords and your own. Check www.ahrefs.com.
Keep in mind you should be checking www.serpsim.com and checking Google and Bing to see what your sites look like in their listing. If you see … in any field its too long.
Good luck. Till next time, please listen to my tunes and help spread them
dj substance
