DEV Community

loading...

How to add structured data to your website

lugodev profile image Carlos Lugones ใƒปUpdated on ใƒป2 min read

As you might know, Google's mission is "to organize the world's information and make it universally accessible and useful". But, how?

Well, in 2012, Google launched their Knowledge Graph, an internal semantic network to better understand the content on internet, how entities like persons and organizations are defined and related to each other.

Why knowing this is necessary to developers?

If you're a frontend developer, you might be wondering how to help search engines like Google to better understand what your website is about.

In fact, as official Google documentation, one way to do this is by adding structured data to your website.

Google Search works hard to understand the content of a page. 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 standardized 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 uses structured data that it finds on the web to understand the content of the page, as well as to gather information about the web and the world in general.

Ok, now the code

In my case, I wanted to add structured data to my personal website.

In your HTML, before </body>, add a <script> containing application/ld+json data, like this:

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "email": "mailto:contact@lugodev.com",
      "image": "https://lugodev.com/img/avatar.jpg",
      "jobTitle": "Entrepreneur",
      "name": "Carlos Lugones",
      "givenName": "Carlos",
      "url": "https://lugodev.com",
      "birthDate": "1994-05-22",
      "affiliation": ["CubaPod", "Liduco", "Flowycart", "CubanValley", "Distribpod", "Ofendiditos.club"],
      "gender": "Male",
      "nationality": "Cuba",
      "sameAs" : [
          "https://twitter.com/lugodev",
          "https://t.me/lugodev",
          "https://linkedin.com/in/lugodev",
          "https://github.com/lugodev",
          "https://angel.co/u/lugodev"
      ],
      "contactPoint" : [
          {
              "@type" : "ContactPoint",
              "contactType" : "contact",
              "email": "contact@lugodev.com",
              "url": "https://lugodev.com/contact"
          }
      ]
    }
  </script>
Enter fullscreen mode Exit fullscreen mode

Commit your changes and deploy. After your changes are on production, you can use this tool to check if your website is reflecting the data properly.

Structured data in lugodev.com

As you can see, once I ran the test, all data is showing as expected.

More info

The standard used to describe the data is available in schema.org.

Hope this is useful. Happy coding! ๐Ÿš€

Update (December 2nd, 2020): Google has generated a knowledge panel about me. In this article, I explain the full story and steps on how to achieve it.

Discussion (0)

pic
Editor guide