Adding Google for Jobs in Eleventy website

Question

Adding Google for Jobs in Eleventy website

45 Views Asked by Mohammed Asker At 15 January 2024 at 07:25

I want to add Google for Jobs to my eleventy (11ty) website. I am using Google Jobposting schema for reference and added the code to json file.

json file:

{
    "layout": "jobpost.njk",
    "tags": "post",
    "jobs": [
      {
        "@context": "http://schema.org",
        "@type": "JobPosting",
        "url": "",
        "title": "",
        "description": "",
        "datePosted": "",
        "validThrough": "",
        "employmentType": "",
        "hiringOrganization": {
          "@type": "Organization",
          "name": "",
          "sameAs": "",
          "logo": ""
        },
        "jobLocation": {
          "@type": "Place",
          "address": {
            "streetAddress": "",
            "addressLocality": ""
          }
        }
      }
    ]
}

Then I added the njk file called google-jobs.njk file from where I reference my json file and also will be used as a template for generating Google Job post listings.

google-jobs.njk file:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "ItemList",
    "itemListElement": [
      {% for job in jobs %}
        {
          "@type": "JobPosting",
          "url": "{{ url | url | safe }}",
          "datePosted": "{{ date | safe }}",
          "validThrough": "{{ deadline | safe }}",
          "title": "{{ jobTitle | safe }}",
          "description": "{{ content }}",
          "employmentType": "{{ type }}",
          "hiringOrganization": {
            "@type": "Organization",
            "name": "{{ organization | safe }}",
            "sameAs": "{{ website | url | safe }}",
            "logo": "https://example.com{{ image | safe }}"
          },
          "jobLocation": {
            "@type": "Place",
            "address": {
              "@type": "PostalAddress",
              "addressLocality": "{{ location | safe }}"
            }
          }
        }{% if not loop.last %},{% endif %}
      {% endfor %}
    ]
  }
</script>

Lastly, I included the google-jobs.njk template in my layout page where I want to display the job post listings.

<!-- layout.njk -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Other head elements -->
  {% include "google-jobs.njk" %}
</head>
<body>
  <!-- Body content -->
</body>
</html>

The problem

The code is mostly working as intended except for one issue. In the google-jobs.njk file, the value of the url variable is not generating a URL of the current job post. It's just blank. I've tried {{ url | url | safe }}, {{ post.url | safe }}, {{ posts.url | safe }}, {{ job.url | safe }}, and {{ jobs.url | safe }}. None of them fixed the problem.

I've tried hardcoding the job post URL to see if it will output something (it did work). So I understood the problem is related to how I set up the data.

Any idea why this happens? I think it's because I input the variable values incorrectly or have not structured the data correctly.

Original Q&A

There are 1 best solutions below

**VonC** · Accepted Answer · 2024-01-17T10:52:48.430000

In your NJK template, when you iterate over the jobs array, you should access the properties of each job with the job prefix (since that is the variable name you use in your loop).
For example, to access the url of each job, you should use {{ job.url | safe }}.

Double-check the structure of your JSON file. Make sure each job object inside the jobs array has a url property with a valid URL.

Your google-jobs.njk file should look something like:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "ItemList",
    "itemListElement": [
      {% for job in jobs %}
        {
          "@type": "JobPosting",
          "url": "{{ job.url | safe }}",  <!-- Updated line -->
          "datePosted": "{{ job.datePosted | safe }}",
          "validThrough": "{{ job.validThrough | safe }}",
          "title": "{{ job.title | safe }}",
          "description": "{{ job.description | safe }}",
          "employmentType": "{{ job.employmentType | safe }}",
          "hiringOrganization": {
            "@type": "Organization",
            "name": "{{ job.hiringOrganization.name | safe }}",
            "sameAs": "{{ job.hiringOrganization.sameAs | safe }}",
            "logo": "{{ job.hiringOrganization.logo | safe }}"
          },
          "jobLocation": {
            "@type": "Place",
            "address": {
              "@type": "PostalAddress",
              "addressLocality": "{{ job.jobLocation.address.addressLocality | safe }}"
            }
          }
        }{% if not loop.last %},{% endif %}
      {% endfor %}
    ]
  }
</script>

Make sure that your JSON file is correctly linked and loaded in the context where google-jobs.njk is used.

The thing is even after I changed from "{{ url | url | safe }}" to "{{ job.url | safe }}", it did not fix the problem.
All other variables for the job schema are working okay which means I believe my JSON file is linked correctly to google-jobs.njk file.
The URL is the only one that returns nothing.

Given that the URL is the only property not displaying correctly while other variables are working fine, it suggests the issue is specific to how the url property is being handled or structured.

First, make sure each job object in the JSON file actually includes a url property with a valid URL. It is possible that this property is missing, misspelled, or empty in your JSON data.
Temporarily hardcode a URL value in your JSON file for one of the job objects. That will help you confirm that the issue is not with the template rendering but with the data itself.
Re-examine how the data is being passed from the JSON file to the google-jobs.njk template. There might be an issue in the way the JSON data is integrated into your Eleventy setup.

Add a debug statement in your google-jobs.njk file to print out the entire job object. That will help you see exactly what data is being passed to the template.

{% for job in jobs %}
  <!-- Debug: Print the entire job object -->
  <pre>{{ job | dump | safe }}</pre>

  <!-- Rest of your template code -->
{% endfor %}

Check your Eleventy configuration to make sure there is no conflict or misconfiguration that could be affecting the rendering of the URL property.
And double-check the syntax in your NJK template. The safe filter is used to output raw HTML, which should be correct for a URL, but make sure there is no additional filter or operation that might be altering or omitting the URL.
If you are pre-rendering or transforming data server-side, make sure the process is not affecting the url field.

As a workaround, you could provide a fallback URL in case the url property is undefined or empty. That can be done using Nunjucks's default filter:

"url": "{{ job.url | default('default-url-here') | safe }}"

Adding Google for Jobs in Eleventy website

There are 1 best solutions below

Related Questions in URL

Related Questions in NUNJUCKS

Related Questions in ELEVENTY

Trending Questions

Popular # Hahtags

Popular Questions