Custom edit head of pages for google jobs

Support
1

Hi there,

I would like to use Google Jobs on a Grav Site.
The Career page is supposed to have one to five sub-pages, each describing one job.

Google Jobs needs a custom script in the head of the page, that is specific to each job, therefore I can not use themes to accomplish this as far as I understand Grav. (I am using a Bootstrap based theme by the way).

I first thought I might be able to create a new template that lets me insert the script for the head but I failed at understanding how this works if that approach even is a good one to begin with.
I also thought the metadata through Meta Page Headers might be a way but that also seemed not really the right way to do it.
And the plugin SEO does offer to add information like this, not for Google Jobs jet though.

So I would be very grateful if you could point me in the right direction how to do this the right way.
Thanks and greetings
kwon

2

Hi @kwon,

I suppose the custom scripts you mention refer to structured data as described on this page.

Here’s how I would do it:

  • You have a base template base.html.twig that contains a head block:

    <!DOCTYPE html>
<html>
    <head>
    {% block head %}
    {% endblock head %}
    </head>

    <body>
    </body>
</html>

    The head contains your title and description and so on as usual, but the twig block allows extending the head with additional items, like the job posting structured data.

  • You have a template for your job pages, say job.html.twig, that extends the base template:

    {% extends 'base.html.twig' %}

{% block head %}
{{ parent() }}
{% endblock head %}

    The parent() call will return the content of the head block. Now you can add your structured data underneath:

    {% extends 'base.html.twig' %}

{% block head %}
{{ parent() }}

<script type="application/ld+json">
// Your structured data here
</script>
{% endblock head %}

    Finally, you can store information about the job as yaml in your markdown files, and fill in the gaps in your template. I leave the specifics to you, but as an example:

    {% extends 'base.html.twig' %}

{% block head %}
{{ parent() }}

<script type="application/ld+json">
{
  "baseSalary": {
      "@type": "MonetaryAmount",
      "currency": "USD",
      "value": {
        "@type": "QuantitativeValue",
        "value": {{ page.header.salary }},
        "unitText": "HOUR"
      }
   }
}
</script>
{% endblock head %}

Hope that’s clear.

3

@TheDancingCode Because the post isn’t very clear on what the intention is and what its requirements are, we have to guess…

My guess is @kwon wants to embed jobs from Google Careers into his own site using: Post Hire job listings to your company careers site

Not sure if @kwon knows, but that service will expire on September 1, 2020: Sunsetting Hire by Google

4

@TheDancingCode thank you very much, this is very helpful. I already had created the suggested job.html.twig template but failed to understand, how I could edit the header of each page created with that. Your post gave me what I need, so I will try that today and if I have any problems I might ask again, but I think your detailed description already gave me all I need! Thank you for this!

@pamtbaau sorry if the post was not clear enough, I thought it would be, so to clearify:

  • I want to add job postings to a website using this approach (as thedancingcode suggested):
    https://developers.google.com/search/docs/data-types/job-posting
  • the purpose is to make it easier for potential employees to find job offerings in this particular company
  • I was not aware, that this service is going to expire but if I understand correctly the link you posted refers to another service Google offers, right? I don’t think Google Hire is linked to the SEO Optimisation for Jobs, but please correct me if I’m wrong.

Thanks so far
kwon