DEV Community

Shashi Ranakoti
Shashi Ranakoti

Posted on

How to Add JSON-LD Structured Data to a Travel Destination Page

 Structured data helps search engines understand what a page is about. In this tutorial, we'll add JSON-LD markup to a destination page, using a page about Rajaji National Park in Uttarakhand, India as the example.

You don't need a framework. Everything below works in plain HTML.

What is JSON-LD?

JSON-LD is a block of JSON placed inside a <script> tag. It describes your page in a format that search engines can read, without changing what visitors see. Google recommends JSON-LD over other structured data formats.

Step 1: Add a TouristAttraction block

Place this in the <head> or at the end of the <body>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TouristAttraction",
  "name": "Rajaji National Park",
  "description": "A protected forest in the Shivalik foothills of Uttarakhand, India, known for Asian elephants, birdlife and jungle safaris.",
  "url": "https://www.rishikeshtigersafari.com/rajaji-national-park-uttarakhand",
  "address": {
    "@type": "PostalAddress",
    "addressRegion": "Uttarakhand",
    "addressCountry": "IN"
  },
  "touristType": ["Wildlife enthusiasts", "Families", "Birdwatchers"]
}
</script>
Enter fullscreen mode Exit fullscreen mode

Use real, accurate values from your own page. Never add details that don't appear on the page itself.

Step 2: Add breadcrumbs

Breadcrumb markup shows the page's position in your site:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.rishikeshtigersafari.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Rajaji National Park",
      "item": "https://www.rishikeshtigersafari.com/rajaji-national-park-uttarakhand"
    }
  ]
}
</script>
Enter fullscreen mode Exit fullscreen mode

Step 3: Add FAQPage markup

If your page has a visible FAQ section, you can describe it like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "When is the best time to visit Rajaji National Park?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Winter, from November to February, is generally the most comfortable time. The park is closed during the monsoon, so check current dates with the forest department."
      }
    },
    {
      "@type": "Question",
      "name": "Are tiger sightings guaranteed?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "No. Wildlife sightings depend on luck, season and weather, and cannot be guaranteed."
      }
    }
  ]
}
</script>
Enter fullscreen mode Exit fullscreen mode

The questions and answers must also be visible on the page. Markup for hidden content can be treated as misleading.

A note on expectations: Google now limits FAQ rich results to a small set of sites, so don't expect a visible FAQ snippet. The markup is still valid and helps machines understand the page.

Step 4: Generate the JSON-LD with JavaScript (optional)

If you have many destination pages, generate the markup from a data object:

const page = {
  name: "Rajaji National Park",
  url: "https://www.rishikeshtigersafari.com/rajaji-national-park-uttarakhand",
  description: "A protected forest in Uttarakhand known for Asian elephants and jungle safaris."
};

const schema = {
  "@context": "https://schema.org",
  "@type": "TouristAttraction",
  name: page.name,
  url: page.url,
  description: page.description
};

const script = document.createElement("script");
script.type = "application/ld+json";
script.textContent = JSON.stringify(schema);
document.head.appendChild(script);
Enter fullscreen mode Exit fullscreen mode

Note that search engines can read JavaScript-injected markup, but server-rendered JSON-LD is more reliable.

Step 5: Validate

Always test before publishing:

  1. Paste your URL into Google's Rich Results Test
  2. Use the Schema Markup Validator at validator.schema.org for general schema checks
  3. Fix any errors or warnings
  4. After publishing, watch Search Console's enhancement reports

Common mistakes

  • Marking up content that isn't visible on the page
  • Invalid JSON, such as trailing commas or smart quotes
  • Copying someone else's data without updating it
  • Adding ratings or reviews that don't exist
  • Forgetting to update seasonal details like opening dates

Final thoughts

Structured data is a small change with a clear purpose: it makes your page easier for machines to understand. Start with one accurate block, validate it, then add more. For a full example of a destination page, see the guide to Rajaji National Park and apply the same ideas to your own pages.

Top comments (0)