SEO is often considered the snake oil of the web. How many times have you scrolled through attention-grabbing headlines on know how to improve your SEO? Everyone and their uncle seems to have some “magic” cure to land high in search results and turn impressions into conversions. Sifting through so much noise on the topic can cause us to miss true gems that might be right under our nose.
We’re going to look at one such gem in this article: structured data.
There’s a checklist of SEO must-haves that we know are needed when working on a site. It includes things like a strong
, a long list of <meta> tags, and using descriptive alt attributes on images (which is a double win for accessibility). Running a cursory check on any site using Lighthouse will flag up turn up even more tips and best practices to squeeze the most SEO out of the content.<br />
Search engines are getting smarter, however, and starting to move past the algorithmic scraping techniques of yesteryear. Google, Amazon, and Microsoft are all known to be investing a considerable amount in machine learning, and with that, they need clean data to feed their search AI. <br />
That’s where the the concept of schemas comes into play. In fact, it’s funding from Google and Microsoft — along with Yahoo and Yandex — that led to the establishment of schema.org, a website and community to push their format — more commonly referred to as structured data —forward so that they and other search engines can help surface content in more useful and engaging ways.<br />
So, what is structured data?<br />
Structured data describes the content of digital documents (i.e. websites, emails, etc). It’s used all over the web and, much like <meta> tags, is an invisible layer of information that search engines use to read the content.<br />
Structured data comes in three flavors: Microdata, RDFa and JSON-LD. Microdata and RDF are both injected directly into the HTML elements of a document, peppering each relevant element of a page with machine readable pointers. For example, an example of using Microdata attributes on a product, taken straight from the schema.org docs:</p>
<div itemscope itemtype=http://schema.org/Product>
<span itemprop=name>Kenmore White 17 Microwave</span><br />
<img itemprop=image src=kenmore-microwave-17in.jpg alt=Kenmore 17 Microwave /></p>
<div itemprop=aggregateRating
itemscope itemtype=http://schema.org/AggregateRating><br />
Rated <span itemprop=ratingValue>3.5</span>/5<br />
based on <span itemprop=reviewCount>11</span> customer reviews
</div>
<div itemprop=offers itemscope itemtype=http://schema.org/Offer>
<!--price is 1000, a number, with locale-specific thousands separator
and decimal mark, and the $ character is marked up with the
machine-readable code USD --><br />
<span itemprop=priceCurrency content=USD>$</span><span
itemprop=price content=1000.00>1,000.00</span>
<link itemprop=availability href=http://schema.org/InStock />In stock
</div>
<p> Product description:<br />
<span itemprop=description>0.7 cubic feet countertop microwave.<br />
Has six preset cooking categories and convenience features like<br />
Add-A-Minute and Child Lock.</span><br />
Customer reviews:</p>
<div itemprop=review itemscope itemtype=http://schema.org/Review>
<span itemprop=name>Not a happy camper</span> –<br />
by <span itemprop=author>Ellie</span>,<br />
<meta itemprop=datePublished content=2011-04-01>April 1, 2011</p>
<div itemprop=reviewRating itemscope itemtype=http://schema.org/Rating>
<meta itemprop=worstRating content = 1><br />
<span itemprop=ratingValue>1</span>/<br />
<span itemprop=bestRating>5</span>stars
</div>
<p> <span itemprop=description>The lamp burned out and now I have to replace<br />
it. </span>
</div>
<div itemprop=review itemscope itemtype=http://schema.org/Review>
<span itemprop=name>Value purchase</span> –<br />
by <span itemprop=author>Lucas</span>,<br />
<meta itemprop=datePublished content=2011-03-25>March 25, 2011</p>
<div itemprop=reviewRating itemscope itemtype=http://schema.org/Rating>
<meta itemprop=worstRating content = 1/><br />
<span itemprop=ratingValue>4</span>/<br />
<span itemprop=bestRating>5</span>stars
</div>
<p> <span itemprop=description>Great microwave for the price. It is small and<br />
fits in my apartment.</span>
</div>
<p> <!-- etc. -->
</div>
<p>If that seems like bloated markup, it kinda is. But it’s certainly beneficial if you prefer to consolidate all of your data in one place.<br />
JSON-LD, on the other hand, usually sits in a <script> tag and describes the same properties in a single block of data. Again, from the docs:
<script type=application/ld+json>
{
@context: http://schema.org,
@type: Product,
aggregateRating: {
@type: AggregateRating,
ratingValue: 3.5,
reviewCount: 11
},
description: 0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.,
name: Kenmore White 17 Microwave,
image: kenmore-microwave-17in.jpg,
offers: {
@type: Offer,
availability: http://schema.org/InStock,
price: 55.00,
priceCurrency: USD
},
review: [
{
@type: Review,
author: Ellie,
datePublished: 2011-04-01,
description: The lamp burned out and now I have to replace it.,
name: Not a happy camper,
reviewRating: {
@type: Rating,
bestRating: 5,
ratingValue: 1,
worstRating: 1
}
},
{
@type: Review,
author: Lucas,
datePublished: 2011-03-25,
description: Great microwave for the price. It is small and fits in my apartment.,
name: Value purchase,
reviewRating: {
@type: Rating,
bestRating: 5,
ratingValue: 4,
worstRating: 1
}
}
]
}
</script><br />
This is my personal preference, as it is treated as a little external instruction manual for your content, much like JavaScript for scripts, and CSS for your styles, all happily self-contained. JSON-LD can become essential for certain types of schema, where the content of the page is different from the content of the structured data (for example, check out the speakable property, currently in beta).<br />
A welcome introduction to the implementation of JSON-LD on the web is Google’s allowance of fetching structured data from an external source, rather than forcing inline scripting, which was previously frustratingly impossible. This can be done either by the developer, or in Google Tag Manager.<br />
What structured data means to you<br />
Beyond making life easier for search engine crawlers to read your pages? Two words: Rich snippets. Rich snippets are highly visual modules that tend to sit at the top of the search engine, in what is sometimes termed as “Position 0” in the results — displayed above the first search result. Here’s an example of a simple search for “blueberry pie” in Google as an example:<br />
<img src=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?ssl=1 alt=Google search results showing three recipes displayed as cards at the top, a card of nutritional facts in the right sidebar, a first result showing user reviews, and finally, the search results. class=wp-image-310882 jetpack-lazy-image data-recalc-dims=1 data-lazy-srcset=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?w=1361&ssl=1 1361w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=300%2C171&ssl=1 300w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=1024%2C583&ssl=1 1024w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=768%2C437&ssl=1 768w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=1000%2C569&ssl=1 1000w data-lazy-sizes=(min-width: 735px) 864px, 96vw data-lazy-src=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?ssl=1&is-pending-load=1 srcset=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7><img src=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?ssl=1 alt=Google search results showing three recipes displayed as cards at the top, a card of nutritional facts in the right sidebar, a first result showing user reviews, and finally, the search results. class=wp-image-310882 srcset=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?w=1361&ssl=1 1361w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=300%2C171&ssl=1 300w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=1024%2C583&ssl=1 1024w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=768%2C437&ssl=1 768w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=1000%2C569&ssl=1 1000w sizes=(min-width: 735px) 864px, 96vw data-recalc-dims=1 />Check out those three recipes up top — and that content in the right column — showing up before the list of results using details from structured data.<br />
Even the first result is a rich snippet! As you can see, using structured data is your ticket to get into a rich snippet on a search results page. And, not to spur FOMO or anything, but any site not showing up in a rich snippet is already at risk of dropping into “below the fold” territory. Notice how the second organic result barely makes the cut.<br />
Fear not, dear developers! Adding and testing structured data to a website is aq simple and relatively painless process. Once you get the hang of it, you’ll be adding it to every possible location you can imagine, even emails.<br />
It is worth noting that structured data is not the only way to get into rich snippets. Search engines can sometimes determine enough from your HTML to display some snippets, but utilizing it will push the odds in your favor. Plus, using structured data puts the power of how your content is displayed in your hands, rather than letting Google or the like determine it for you.<br />
Types of structured data<br />
Structured data is more than recipes. Here’s a full list of the types of structured data Google supports. (Spoiler alert: it’s almost any kind of content.)<br />
ArticleBook (limited support)BreadcrumbCarouselCourseCOVID-19 announcements (beta)Critic review (limited support)DatasetEmployer aggregate ratingEstimated salaryEventFact checkFAQHow-toImage license metadata (beta)Job postingLocal businessLogoMovieProductQ&ARecipeReview snippetSitelinks searchboxSoftware appSpeakable (beta)Subscription and paywalled contentVideo<br />
Yep, lots of options here! But with those come lots of opportunity to enhance a site’s content and leverage these search engine features.<br />
Using structured data<br />
The easiest way to find the right structured data for your project is to look through Google’s search catalogue. Advanced users may like to browse what’s on schema.org, but I’ll warn you that it is a scary rabbit hole to crawl through.<br />
Let’s start with a fairly simple example: the Logo logo data type. It’s simple because all we really need is a website URL and the source URL for an image, along with some basic details to help search engine’s know they are looking at a logo. Here’s our JSON-LD:<br />
<script type=application/ld+json>
{
@context: https://schema.org,
@type: Organization,
name: Example,
url: http://www.example.com,
logo: http://www.example.com/images/logo.png
}
</script><br />
First off, we have the <script> tag itself, telling search engines that it’s about to consume some JSON-LD.<br />
From there, we have five properties:<br />
@context: This is included on all structured data objects, no matter what type it is. It’s what tells search engines that the JSON-LD contains data that is defined by schema.org specifications.@type: This is the reference type for the object. It’s used to identify what type of content we’re working with. In this case, it’s “Organization” which has a whole bunch of sub-properties that follow.name: This is the sub-property that contains the organization’s name.url: This is the sub-property that contains the organization’s web address.logo: This is the sub-property that contains the file path for the organization’s logo image file. For Google to consider this, it must be at least 112?112px and in JPG, PNG, or GIF format. Sorry, no SVG at the moment.<br />
A page can have multiple structured data types. That means it’s possible to mix and match content.<br />
Testing structured data<br />
See, dropping structured data into a page isn’t that tough, right? Once we have it, though, we should probably check to see if it actually works.<br />
Google, Bing, and Yandex (login required) all have testing tools available. Google even has one specifically for validating structured data in email. In most cases, simply drop in the website URL and the tool will spin up a test and show which object it recognizes, the properties it sees, and any errors or warning to look into.<br />
<img src=https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?ssl=1 alt=Showing Google's testing results where the JSON-LD is displayed on the left of the screen and the details of it on the right. class=wp-image-310883 jetpack-lazy-image data-recalc-dims=1 data-lazy-srcset=https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?w=835&ssl=1 835w, https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?resize=300%2C207&ssl=1 300w, https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?resize=768%2C531&ssl=1 768w data-lazy-sizes=(min-width: 735px) 864px, 96vw data-lazy-src=https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?ssl=1&is-pending-load=1 srcset=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7><img src=https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?ssl=1 alt=Showing Googles testing results where the JSON-LD is displayed on the left of the screen and the details of it on the right. class=wp-image-310883 srcset=https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?w=835&ssl=1 835w, https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?resize=300%2C207&ssl=1 300w, https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?resize=768%2C531&ssl=1 768w sizes=(min-width: 735px) 864px, 96vw data-recalc-dims=1 />Google’s structured data testing tool fetches the markup and displays the information it recognizes.<br />
The next step is to confirm that the structured data is accessible on your live site through Google Search Console. You may need to set up an account and verify your site in order to use a particular search engine’s console, but checking data is — yet again — as simple as dropping in a site URL and using the inspection tools to check that the site is indeed live and sending data when it is accessed by the search engine.<br />
If the structured data is implemented correctly, it will display. In Google’s case, it’s located in the “Enhancements” section with a big ol’ checkmark next to it.<br />
<img src=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?ssl=1 alt=Google Search Console screenshot showing Google can find the site and that it recognizes search enhancements below that. In this case, it is showing that the Logo structured data type was found and is supported. class=wp-image-310884 jetpack-lazy-image data-recalc-dims=1 data-lazy-srcset=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?w=1023&ssl=1 1023w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=300%2C211&ssl=1 300w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=768%2C541&ssl=1 768w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=1000%2C705&ssl=1 1000w data-lazy-sizes=(min-width: 735px) 864px, 96vw data-lazy-src=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?ssl=1&is-pending-load=1 srcset=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7><img src=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?ssl=1 alt=Google Search Console screenshot showing Google can find the site and that it recognizes search enhancements below that. In this case, it is showing that the Logo structured data type was found and is supported. class=wp-image-310884 srcset=https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?w=1023&ssl=1 1023w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=300%2C211&ssl=1 300w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=768%2C541&ssl=1 768w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=1000%2C705&ssl=1 1000w sizes=(min-width: 735px) 864px, 96vw data-recalc-dims=1 />Notice the “Logo” that is detected at the end — it works!<br />
But wait! I did all that and nothing’s happening… what gives?<br />
As with all search engine optimizations, there are no guarantees or time scales, when it comes to how or when structured data is used. It might take a good while before rich snippets take hold for your content — days, weeks, or even months! I know, it stinks to be left in the dark like that. It is unfortunately a waiting game.<br />
Hopefully, this gives you a good idea of what structured data is and how it can be used to leverage features that search engines have made to spotlight content has it.<br />
There’s absolutely no shortage of advice, tips, and tricks for helping optimize a site for search engines. While so much of it is concerned with what’s contained in the <head> or how content is written, there are practical things that developers can do to make an impact. Structured data is definitely one of those things and worth exploring to get the most value from content.<br />
The world is your oyster with structured data. And, sure, while search engine only support a selection of the schema.org vocabulary, they are constantly evolving and extending that support. Why not start small by adding structured data to an email link in a newsletter? Or perhaps you’re into trying something different, like defining a sitelinks search box (which is very meta but very cool). Or, hey, add a recipe for Pinterest. Blueberry pie, anyone? </p>
<span class="cp-load-after-post"></span></div><div class="post-meta wf-mobile-collapsed"><div class="entry-meta"><span class="category-link">Categories: <a href="https://skynetch.com/category/latest-technologies/" >Latest technologies</a>, <a href="https://skynetch.com/category/software-applications/" >software applications</a>, <a href="https://skynetch.com/category/ui-ux-layout/" >UI / UX layout</a>, <a href="https://skynetch.com/category/uncategorized/" >Uncategorized</a></span><a class="author vcard" href="https://skynetch.com/author/admin/" title="View all posts by admin" rel="author">By <span class="fn">admin</span></a><a href="https://skynetch.com/2020/08/25/" title="11:23 am" class="data-link" rel="bookmark"><time class="entry-date updated" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></a></div><div class="entry-tags">Tags: <a href="https://skynetch.com/tag/design/" rel="tag">Design</a><a href="https://skynetch.com/tag/marketing-and-seo/" rel="tag">Marketing and SEO</a><a href="https://skynetch.com/tag/mobile-apps/" rel="tag">Mobile apps</a><a href="https://skynetch.com/tag/quality/" rel="tag">Quality</a><a href="https://skynetch.com/tag/seo/" rel="tag">Seo</a><a href="https://skynetch.com/tag/software/" rel="tag">Software</a><a href="https://skynetch.com/tag/sofware-applications/" rel="tag">Sofware applications</a><a href="https://skynetch.com/tag/technology/" rel="tag">Technology</a><a href="https://skynetch.com/tag/web-applications-development-web-applications/" rel="tag">Web applications development Web applications</a><a href="https://skynetch.com/tag/website-creation/" rel="tag">Website creation</a></div></div><div class="single-share-box">
<div class="share-link-description">Share this post</div>
<div class="share-buttons">
<a class="facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F188%2F&t=CSS+Tips+for+New+Devs" title="Facebook" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Share on Facebook</span><span class="screen-reader-text">Share on Facebook</span></a>
<a class="twitter" href="https://twitter.com/share?url=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F188%2F&text=CSS+Tips+for+New+Devs" title="Twitter" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Tweet</span><span class="screen-reader-text">Share on Twitter</span></a>
<a class="pinterest pinit-marklet" href="//pinterest.com/pin/create/button/" title="Pinterest" target="_blank" data-pin-config="above" data-pin-do="buttonBookmark"><span class="soc-font-icon"></span><span class="social-text">Pin it</span><span class="screen-reader-text">Share on Pinterest</span></a>
<a class="whatsapp" href="https://api.whatsapp.com/send?text=CSS%20Tips%20for%20New%20Devs%20-%20https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F188%2F" title="WhatsApp" target="_blank" data-action="share/whatsapp/share"><span class="soc-font-icon"></span><span class="social-text">Share on WhatsApp</span><span class="screen-reader-text">Share on WhatsApp</span></a>
<a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F188%2F&title=CSS%20Tips%20for%20New%20Devs&summary=&source=Skynetch" title="LinkedIn" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Share on LinkedIn</span><span class="screen-reader-text">Share on LinkedIn</span></a>
</div>
</div> <div class="author-info entry-author">
<span class="author-avatar no-avatar"></span> <div class="author-description">
<h4><span class="author-heading">Author:</span> admin</h4>
<a class="author-link" href="http://skynetch.com" rel="author">http://skynetch.com</a> <p class="author-bio"></p>
</div>
</div>
<nav class="navigation post-navigation" role="navigation"><h2 class="screen-reader-text">Post navigation</h2><div class="nav-links"><span class="nav-previous disabled"></span><a class="back-to-list" href="/agency/"><i class="dt-icon-the7-misc-006-1" aria-hidden="true"></i></a><span class="nav-next disabled"></span></div></nav><div class="single-related-posts"><h3>Related Posts</h3><section class="items-grid"><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/7/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/7/">Practical Use Cases for JavaScript’s closest() Method</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/23/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/23/">font-synthesis</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/39/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/39/">style9: build-time CSS-in-JS</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/55/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/55/">WordPress-Powered Landing Pages on a Totally Different Site via Cloudflare Workers</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/71/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/71/">Lazy Loading Images in Svelte</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/87/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/87/">Frontity is React for WordPress</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div></section></div>
</article>
</div><!-- #content -->
<aside id="sidebar" class="sidebar">
<div class="sidebar-content widget-divider-off">
<section id="search-2" class="widget widget_search"> <form class="searchform" role="search" method="get" action="https://skynetch.com/">
<label for="the7-search" class="screen-reader-text">Search:</label>
<input type="text" id="the7-search" class="field searchform-s" name="s" value="" placeholder="Type and hit enter …" />
<input type="submit" class="assistive-text searchsubmit" value="Go!" />
<a href="" class="submit"></a>
</form>
</section><section id="presscore-blog-posts-2" class="widget widget_presscore-blog-posts"><div class="widget-title">Recent posts</div><ul class="recent-posts round-images"><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2505-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2505-2/">Input Masking</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2498-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2498-2/">Web Animation Essentials: CSS Animations and Transitions</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2488-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2488-2/">Lazy-Loading Disqus Comments</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2483-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2483-2/">CSS Shorthand Syntax Considered an Anti-Pattern</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2482-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2482-2/">Google Analytics Can Show You Screen Resolution ? Browser Window</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2479-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2479-2/">Prefer `defer` Over `async`</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li></ul></section><section id="presscore-portfolio-2" class="widget widget_presscore-portfolio"><div class="widget-title">Recent projects</div></section> </div>
</aside><!-- #sidebar -->
</div><!-- .wf-container -->
</div><!-- .wf-wrap -->
</div><!-- #main -->
<!-- !Footer -->
<footer id="footer" class="footer solid-bg">
<div class="wf-wrap">
<div class="wf-container-footer">
<div class="wf-container">
<section id="presscore-custom-menu-one-3" class="widget widget_presscore-custom-menu-one wf-cell wf-1-3"><ul class="custom-menu enable-bold show-arrow"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-328 first"><a href="#!/up">Home</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-329"><a href="#!/about">About Us</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-410"><a href="#!/services">Services</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-331"><a href="#!/team">Team</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-332"><a href="#!/contact">Contact</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-8497"><a href="https://skynetch.com/blog/">Blog</a></li></ul></section><section id="presscore-contact-info-widget-2" class="widget widget_presscore-contact-info-widget wf-cell wf-1-3"><div class="widget-title">Contact Info</div><ul class="contact-info"><li><span class="color-primary">Phone number:</span><br />001 234 56 78</li><li><span class="color-primary">Address:</span><br />SoHo 94 Broadway St New York, NY 1001</li><li><span class="color-primary">Mail:</span><br />hello@dream-theme.com</li><li><span class="color-primary">Business hours:</span><br />Mon. - Fri. 10:00 - 19:00</li></ul><div class="soc-ico"><p class="assistive-text">Find us on:</p><a title="Facebook page opens in new window" href="#" target="_blank" class="facebook"><span class="soc-font-icon"></span><span class="screen-reader-text">Facebook page opens in new window</span></a><a title="Twitter page opens in new window" href="#" target="_blank" class="twitter"><span class="soc-font-icon"></span><span class="screen-reader-text">Twitter page opens in new window</span></a><a title="Dribbble page opens in new window" href="#" target="_blank" class="dribbble"><span class="soc-font-icon"></span><span class="screen-reader-text">Dribbble page opens in new window</span></a><a title="YouTube page opens in new window" href="#" target="_blank" class="you-tube"><span class="soc-font-icon"></span><span class="screen-reader-text">YouTube page opens in new window</span></a></div></section><section id="presscore-contact-form-widget-2" class="widget widget_presscore-contact-form-widget wf-cell wf-1-3"><div class="widget-title">Any questions? Get in touch!</div><form class="dt-contact-form dt-form" method="post"><input type="hidden" name="widget_id" value="presscore-contact-form-widget-2" /><input type="hidden" name="send_message" value="" /><input type="hidden" name="security_token" value="34efe4c56db6a54785ba"/><div class="form-fields"><span class="form-name"><label class="assistive-text">Name *</label><input type="text" class="validate[required]" placeholder="Name *" name="name" value="" aria-required="true">
</span><span class="form-mail"><label class="assistive-text">E-mail *</label><input type="text" class="validate[required,custom[email]]" placeholder="E-mail *" name="email" value="" aria-required="true">
</span><span class="form-telephone"><label class="assistive-text">Telephone</label><input type="text" placeholder="Telephone" name="telephone" value="" aria-required="false">
</span></div><span class="form-message"><label class="assistive-text">Message</label><textarea placeholder="Message" name="message" rows="3" aria-required="false"></textarea>
</span><p><a href="#" class="dt-btn dt-btn-m dt-btn-submit" rel="nofollow"><span>Submit</span></a><input class="assistive-text" type="submit" value="submit"></p></form>
</section> </div><!-- .wf-container -->
</div><!-- .wf-container-footer -->
</div><!-- .wf-wrap -->
<!-- !Bottom-bar -->
<div id="bottom-bar" class="logo-left" role="contentinfo">
<div class="wf-wrap">
<div class="wf-container-bottom">
<div id="branding-bottom"><a class="" href="https://skynetch.com/"><img class=" preload-me" src="https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_27x27.png" srcset="https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_27x27.png 27w, https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_57x57.png 57w" width="27" height="27" sizes="27px" alt="Skynetch" /></a></div>
<div class="wf-float-left">
© 2020 Skynetch Custom Software Company
</div>
<div class="wf-float-right">
<div class="bottom-text-block"><p><span class="paint-accent-color">mail:</span> support@skynetch.com<span class="paint-accent-color" style="padding-left: 20px">tel:</span> +52 55 4351 9960</p>
</div>
</div>
</div><!-- .wf-container-bottom -->
</div><!-- .wf-wrap -->
</div><!-- #bottom-bar -->
</footer><!-- #footer -->
<a href="#" class="scroll-top"><span class="screen-reader-text">Go to Top</span></a>
</div><!-- #page -->
<script type="text/javascript" id="modal">
document.addEventListener("DOMContentLoaded", function(){
startclock();
});
function stopclock (){
if(timerRunning) clearTimeout(timerID);
timerRunning = false;
//document.cookie="time=0";
}
function showtime () {
var now = new Date();
var my = now.getTime() ;
now = new Date(my-diffms) ;
//document.cookie="time="+now.toLocaleString();
timerID = setTimeout('showtime()',10000);
timerRunning = true;
}
function startclock () {
stopclock();
showtime();
}
var timerID = null;
var timerRunning = false;
var x = new Date() ;
var now = x.getTime() ;
var gmt = 1652763735 * 1000 ;
var diffms = (now - gmt) ;
</script>
<script type="text/javascript" id="info-bar">
document.addEventListener("DOMContentLoaded", function(){
startclock();
});
function stopclock (){
if(timerRunning) clearTimeout(timerID);
timerRunning = false;
//document.cookie="time=0";
}
function showtime () {
var now = new Date();
var my = now.getTime() ;
now = new Date(my-diffms) ;
//document.cookie="time="+now.toLocaleString();
timerID = setTimeout('showtime()',10000);
timerRunning = true;
}
function startclock () {
stopclock();
showtime();
}
var timerID = null;
var timerRunning = false;
var x = new Date() ;
var now = x.getTime() ;
var gmt = 1652763735 * 1000 ;
var diffms = (now - gmt) ;
</script>
<script type="text/javascript" id="slidein">
document.addEventListener("DOMContentLoaded", function(){
startclock();
});
function stopclock (){
if(timerRunning) clearTimeout(timerID);
timerRunning = false;
//document.cookie="time=0";
}
function showtime () {
var now = new Date();
var my = now.getTime() ;
now = new Date(my-diffms) ;
//document.cookie="time="+now.toLocaleString();
timerID = setTimeout('showtime()',10000);
timerRunning = true;
}
function startclock () {
stopclock();
showtime();
}
var timerID = null;
var timerRunning = false;
var x = new Date() ;
var now = x.getTime() ;
var gmt = 1652763735 * 1000 ;
var diffms = (now - gmt) ;
</script>
<script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/main.min.js?ver=9.2.2' id='dt-main-js'></script>
<script type='text/javascript' src='https://skynetch.com/wp-content/plugins/go_pricing/assets/js/go_pricing_scripts.js?ver=3.3.17' id='go-pricing-scripts-js'></script>
<script type='text/javascript' src='https://skynetch.com/wp-content/plugins/dt-the7-core/assets/js/post-type.min.js?ver=2.5.3.1' id='the7-core-js'></script>
<script type='text/javascript' src='https://skynetch.com/wp-includes/js/wp-embed.min.js?ver=5.5.9' id='wp-embed-js'></script>
<script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/atoms/plugins/validator/jquery.validationEngine.js?ver=9.2.2' id='the7-form-validator-js'></script>
<script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/atoms/plugins/validator/languages/jquery.validationEngine-en.js?ver=9.2.2' id='the7-form-validator-translation-js'></script>
<script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/dt-contact-form.min.js?ver=9.2.2' id='the7-contact-form-js'></script>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)" aria-label="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share" aria-label="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen" aria-label="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out" aria-label="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)" aria-label="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)" aria-label="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- Page generated by LiteSpeed Cache 3.6.4 on 2022-05-17 05:02:15 -->