(For front-end developer reference only)
To understand the basics of schema markup, read our blog:
Below is a recent variation (as we continually update our schema codes) as of March 3rd, 2022 of the schema markup of our homepage at URL: https://labate.io
Notice where we separate the global schema markup used in all web pages (which resides in our website's global header, and the homepage-specific schema markup that only resides within the header of our homepage.
By structuring our schema markup this way (split across multiple website code sections) we are able to get the best of both worlds with our schema, as the global code resides within all pages, and page-specific codes are only loaded for their specific pages.
Note our global schema as the first embed, and page-specific schema for events fount at our /events/ URL path.
Below is the start of the /events/ path schema template. Note the coded variables used in the JSON file beflow. This there are variables that our website CMS uses when displaying the local events, and are dynamically pulled from our CMS data to populate custom-created schema markup templates.
Note how the event-page portion schema below is placed in each page-specific head, directly underneath our global head, of which the global schema resides in. Again, this allows us to use both extraordinary dynamic and extensive data to populate coherent schema scripts, utilizing both global and page-specific variables, and while only loading 1 schema script.
Minimizing files such as CSS files, allows for browsers to render content quicker, saving them the time they would spend sorting the code.
Utilizing structured headings, such as H1s, H2s, and H3s allow for search engines (and users) to better understand the content of a webpage, rendering search engines more confidence to show the page in SERPs.
Utilizing branded links, such as https://labate.link/facebook starting at line line 181, allows for marketers to both present a brand-consistent look when the links are visible in places like social media, but also have built in tracking metrics that allow markers to see when, where, and much more information about the click, allowing us to understand audience interaction behavior.
Titling both list items and links the website code, allows both search engines an additional reference point on information on the link-destination, and users a "Tooltip" function (title revealed on hover) reinforcing their trust in the destination of the link as well.
Proving alt tags on images, allows for screen-readers to better provide contextual relevance to visually-impaired users, but also allows search engines a description of the image, understanding when to show the page in SERPs, inferring user intent.
Providing page-section-identification reference in a URL, such as https://labate.io/#clients, allows for a "jump to section" function from an on-page link, or quick section access when the URL is visited off the page, such as on social media, or a blog post referencing a particular part of a webpage.
Using an .svg image format for website images allow for both the smallest file size, saving in web page load speed, and also infinite scalability, as properly structured .SVG files can render perfect quality at any size.
Loading our own .woff files for the Montserrat font we use, allow us to prevent our website from making a Google Font API call, allowing our site to score among the highest ever recorded in website tests such as the well-known Google Page Speed Test and the GTMetrix Test.
Of course, at anytime, anyone can view the live html source code by (in a desktop browser) visiting the URL:
view-source:https://labate.io
Modern, branded email signatures allow a brand to put their best foot forward when interacting with clients, potential clients, and the public in general. Note below, the code we developed in order to produce our email signature.
Google removes CSS styling in emails, so we added the styling inline to as a workout. This allows up to maintain our own font, colors, etc and keep branding consistent.
Notice the <a> tags that allow us to set custom links, and other functions like loading our logo in an src tag, preventing the logo from loading as an attached image when sent through email.
|
|
|
