What is Structured Data for Advanced SEO?

relativelyrehan — Sun, 08 Aug 2021 18:07:21 +0000

Have you ever searched for some product online and get a result like this from the google? Do you also want your search results to come up with all this information? This can all be achieved using Structured Data.

Structured data is, giving important information about your website to help search engines show your results at the top with all the important information you want to convey to your customers. This might include the price of your product, discounts, reviews, ratings, etc.

You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page. Structured data is a standardised format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.

Google

Here is an example of structured data for a product from our platform https://prototion.com/

<script type="application/ld+json">{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Notion Library Template",
  "author" : {
    "@type" : "Person",
    "name" : "Patrick"
  },
  "image": "https://someimageur.png",
  "description": "Use this template to plan all your content in one place, including the channel it is posted on, the type of content it is (photo, video)",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "reviewCount": 38,
    "bestRating": "5",
    "worstRating": "5"
  }
}</script>

JSON-LD is a format to create a unified structured data vocabulary for the web. If you want to read more about JSON-LD, then read this https://json-ld.org/. But I want to focus here on how you can use it in your projects to use SEO for maximum traction.

Let us now break down what is happening in this script tag. First, we define the format for content and type. The type may be product, blog, etc. Then we are provided with more information such as name, image, etc. Then we move to provide ratings. We can also provide additional information depending upon the use case. Here is an amazing tool to generate all sorts of json-ld for free. JSONLD.

When all set and done, this is the end result. You can test your json-ld before going live using this tool provided by google.

That's it folks. I hope you will now implement the structure data in your projects and make it to the top in the SEO game.

@relativelyrehan

CSS Tips and Tricks #01

relativelyrehan — Tue, 26 Jan 2021 11:22:11 +0000

For the last couple of months, we at Skynox Tech's Twitter account, sharing a series of tweets known as #CSStricks. We have shared a lot of tricks that otherwise one could not find in online tutorials. Today we decided to compile all those tips and tricks under one hood so that you can find all those in a single place. These tweets will not only improve your CSS game but also helps you save a ton of codes line and help your own touch to your projects.

So here are the tips and tricks of CSS:-

1. Smooth Scrolling

When you visit some websites and try to go to different sections, it scrolls smoothly to that section. It is not some top tier coding, but just one line in your CSS can help you achieve it.

// Detect dark theme var iframe = document.getElementById('tweet-1326822054302261248-927'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1326822054302261248&theme=dark" }

2. Truncate text using pure CSS

Sometimes the text is not consistent in cards and makes them look chaotic. Use this trick to limit the text on cards using just CSS.

// Detect dark theme var iframe = document.getElementById('tweet-1326404316953972736-832'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1326404316953972736&theme=dark" }

3. Input Caret Color

Want to give a little personal touch to your site. Use this css trick to change the color of the input field-caret to give it a custom color of your liking.

// Detect dark theme var iframe = document.getElementById('tweet-1333727633482391552-247'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1333727633482391552&theme=dark" }

4. Drop Shadow and Box Shadow

Do you know that you can use "Drop shadow" for the transparent images?
It will give a much better shadow effect.

// Detect dark theme var iframe = document.getElementById('tweet-1336581473302941696-70'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1336581473302941696&theme=dark" }

5. Drop Cap Letter

You might have seen some blogs with the first letter being huge and the text is wrapped around it. That can be achieved with this simple trick on your text block.

// Detect dark theme var iframe = document.getElementById('tweet-1339873196288454657-231'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1339873196288454657&theme=dark" }

6. Center that Div

Centering your div element can be daunting sometimes, but not when you have this trick in your toolbox. You can center any div with just a couple of lines of CSS.

// Detect dark theme var iframe = document.getElementById('tweet-1341675772147363841-520'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1341675772147363841&theme=dark" }

7. No value, No problem

Display links when the element has no text value but the href attribute has a link. Pretty neat, right?

// Detect dark theme var iframe = document.getElementById('tweet-1346033700623024128-715'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1346033700623024128&theme=dark" }

8. Inherit box sizing

Let "box-sizing" be inherited from HTML. This makes it easier to change "box-sizing in plugins" or other components that leverage other behavior.

// Detect dark theme var iframe = document.getElementById('tweet-1346411262582910977-222'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1346411262582910977&theme=dark" }

Bonus tips:-

Bonus 1: Better User Experience

With the modern web technologies enhancements, one of the key focus points is user experience. Even if your website has the best designs but poor user experience, you will not be able to retain them. This is a cool user experience trick to mute videos on autoplay and let the user decide if they want to hear it.

Bonus 2: Selection pseudo class

Most of the time when you visit any site and try to copy some text, it is just the blue color selection with white text. Use selection pseudo-class to give a personal touch to text selection on your websites. This will give them a personal touch and make your site stand out!

That's it, folks!
These are the all tricks I have to share for now. If you want to see more such content and tips and tricks of other web technologies like react, ES6, etc., do follow us on Twitter at @XenoxDev. We share a lot of cool content and resources to learn web development so make sure to give a follow.

Until then 👋👋

DEV Community: relativelyrehan