A strong careers page tells candidates what the work is, who they would work with, what it pays and how hiring runs, then lists open roles they can filter and apply to. These eight original designs cover each section, and the builder below writes JobPosting structured data that matches Google's required fields.
| Section | What to include | Why candidates care |
|---|---|---|
| Opening statement | What the company does, in one or two sentences | Applicants decide in seconds whether to read on |
| Open roles | Title, team, location or remote, employment type | This is why most people came |
| Pay and benefits | Salary ranges per role, leave, equipment, learning budget | Saves both sides a wasted interview |
| How we hire | Steps, rough timeline, who they will meet | Reduces anxiety and drop-outs |
| Team and workplace | Real photos, short quotes, where people work | Shows the people behind the job ad |
| No role yet? | A way to register interest | Keeps good people who arrive at the wrong time |
Updated
Careers pages often lead with slogans and stock photos while the facts candidates need sit three clicks deep. The designs here put the useful parts first. Each is a self-contained snippet for an invented company, and the structured data builder helps the same roles appear in Google's job search experience.
Fill in one role and copy the script tag into that role's page. Starting values:
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "JobPosting",
"title": "Pastry Chef",
"description": "<p>Lead our early morning pastry shift, develop seasonal recipes and train two junior bakers.</p>",
"datePosted": "2026-10-14",
"validThrough": "2026-11-30",
"employmentType": "FULL_TIME",
"hiringOrganization": {
"@type": "Organization",
"name": "Harbour Bakes",
"sameAs": "https://example.com"
},
"jobLocation": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "Halifax",
"addressRegion": "NS",
"addressCountry": "CA"
}
},
"baseSalary": {
"@type": "MonetaryAmount",
"currency": "CAD",
"value": {
"@type": "QuantitativeValue",
"minValue": 52000,
"maxValue": 60000,
"unitText": "YEAR"
}
}
}
</script>Each design covers one section from the table above. Combine three or four of them for a complete page.
One sentence on the mission, the number of open roles and a jump link. No stock photo needed.
<style>
.cp { font-family: system-ui, sans-serif; color: #111827 }
.cp h2 { margin: 0 0 8px; font-size: 21px }
.cp p { margin: 0 0 10px; color: #4b5563 }
.hero { padding: 26px; border-radius: 14px; background: #1e3a8a; color: #fff }
.hero p { color: #dbeafe }
.hero a { display: inline-block; padding: 10px 16px; border-radius: 8px; background: #fff; color: #1e3a8a; font-weight: 600; text-decoration: none }
</style>
<div class="cp hero"><h2>Build tools that keep small farms running</h2><p>We are 34 people across four countries. 5 roles open now.</p><a href="#roles">See open roles</a></div>Title, team, place, type and pay on one row each, so people can scan the list without opening every job.
<style>
.cp { font-family: system-ui, sans-serif; color: #111827 }
.cp h2 { margin: 0 0 8px; font-size: 21px }
.cp p { margin: 0 0 10px; color: #4b5563 }
ul { list-style: none; padding: 0; margin: 0 }
li { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid #e5e7eb }
li a { flex: 1 1 100%; font-weight: 600; color: #1d4ed8 }
li span { font-size: 13px; color: #4b5563 }
</style>
<ul class="cp" id="roles">
<li><a href="#">Senior Backend Engineer</a><span>Engineering</span><span>Remote, Canada</span><span>Full time</span><span>$140k to $165k CAD</span></li>
<li><a href="#">Field Support Specialist</a><span>Support</span><span>Guelph, ON</span><span>Full time</span><span>$58k to $66k CAD</span></li>
<li><a href="#">Product Designer</a><span>Design</span><span>Remote, Canada</span><span>Contract</span><span>$70 to $85 an hour</span></li></ul>Simple chips for team and location. On a real page each chip filters the list; here they show the layout.
<style>
.cp { font-family: system-ui, sans-serif; color: #111827 }
.cp h2 { margin: 0 0 8px; font-size: 21px }
.cp p { margin: 0 0 10px; color: #4b5563 }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid #d1d5db; background: #fff }
.chips button[aria-pressed=true] { background: #111827; color: #fff; border-color: #111827 }
</style>
<div class="cp"><div class="chips" role="group" aria-label="Team"><button aria-pressed="true">All teams</button><button aria-pressed="false">Engineering</button><button aria-pressed="false">Support</button><button aria-pressed="false">Design</button></div>
<div class="chips" role="group" aria-label="Location"><button aria-pressed="true">Anywhere</button><button aria-pressed="false">Remote</button><button aria-pressed="false">Guelph</button></div></div>Concrete numbers, such as days of leave and budgets, say more than words like great perks.
<style>
.cp { font-family: system-ui, sans-serif; color: #111827 }
.cp h2 { margin: 0 0 8px; font-size: 21px }
.cp p { margin: 0 0 10px; color: #4b5563 }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px }
.grid div { padding: 12px; border-radius: 10px; background: #f0fdf4 }
strong { display: block }
</style>
<div class="cp"><h2>What you get</h2><div class="grid"><div><strong>30 days leave</strong>plus public holidays</div><div><strong>$1,500 a year</strong>for courses and books</div><div><strong>Laptop of choice</strong>yours after two years</div><div><strong>Four day weeks</strong>in July and August</div></div></div>Numbered steps with time estimates. Candidates know what is coming and roughly when.
<style>
.cp { font-family: system-ui, sans-serif; color: #111827 }
.cp h2 { margin: 0 0 8px; font-size: 21px }
.cp p { margin: 0 0 10px; color: #4b5563 }
ol { margin: 0; padding: 0; list-style: none; counter-reset: s }
li { position: relative; padding: 0 0 12px 36px; counter-increment: s }
li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #7c3aed; color: #fff; text-align: center; font-size: 13px; line-height: 24px }
</style>
<div class="cp"><h2>How we hire</h2><ol><li>30 minute call with the hiring manager</li><li>Paid take-home task, about 3 hours</li><li>Meet two future teammates</li><li>Offer within a week of the last call</li></ol></div>A short quote with a name, role and time at the company reads as more real than a slogan.
<style>
.cp { font-family: system-ui, sans-serif; color: #111827 }
.cp h2 { margin: 0 0 8px; font-size: 21px }
.cp p { margin: 0 0 10px; color: #4b5563 }
figure { margin: 0; padding: 16px; border-radius: 12px; background: #fff7ed }
blockquote { margin: 0 0 8px; font-size: 17px }
figcaption { font-size: 13px; color: #6b7280 }
</style>
<figure class="cp"><blockquote>I joined to answer support tickets and now run our farmer training program. Nobody had to approve the idea twice.</blockquote><figcaption>Maya Hill, Training Lead, four years on the team</figcaption></figure>A plain table of where you can hire avoids applications you cannot accept.
<style>
.cp { font-family: system-ui, sans-serif; color: #111827 }
.cp h2 { margin: 0 0 8px; font-size: 21px }
.cp p { margin: 0 0 10px; color: #4b5563 }
table { border-collapse: collapse; width: 100% }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e5e7eb; font-size: 14px }
</style>
<table class="cp"><caption>Where we can hire</caption><tr><th>Country</th><th>Remote</th><th>Office days</th></tr><tr><td>Canada</td><td>Yes</td><td>Optional, Guelph</td></tr><tr><td>United States</td><td>Yes</td><td>None</td></tr><tr><td>Elsewhere</td><td>Contract only</td><td>None</td></tr></table>For people with no matching role today. Labelled fields and an honest line on how long details are kept.
<style>
.cp { font-family: system-ui, sans-serif; color: #111827 }
.cp h2 { margin: 0 0 8px; font-size: 21px }
.cp p { margin: 0 0 10px; color: #4b5563 }
label { display: block; font-size: 14px; margin: 6px 0 4px }
input, select { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #9ca3af; border-radius: 8px }
button { margin-top: 10px; padding: 9px 14px; border: 0; border-radius: 8px; background: #111827; color: #fff }
small { display: block; margin-top: 6px; color: #6b7280 }
</style>
<form class="cp"><h2>No role for you yet?</h2><label for="em">Email</label><input id="em" type="email"><label for="tm">Team you are interested in</label><select id="tm"><option>Engineering</option><option>Support</option><option>Design</option></select><button type="button">Keep me posted</button><small>We keep your details for 12 months, then delete them.</small></form>Someone landing on a careers page usually wants to know one thing first: is there a role for me? Put the open roles, or a clear link to them, inside the first screen. The culture story works better once they have found something to apply for.
Each role card should answer title, team, location, type and pay at a glance. Filters for team and location help once you have more than about ten roles.
A simple numbered timeline of the hiring steps tells people how much time to set aside and who they will meet. It also shows you have a process at all, which matters to candidates comparing several offers.
Close the loop for people who do not find a role. A short interest form, with an honest note about how long you keep details, turns a missed fit into a future hire.
A short statement of what you do, the list of open roles with location and type, pay and benefits, how the hiring process works, a look at the team, and a route for people when no role fits yet.
Google lists datePosted, description, hiringOrganization, jobLocation and title as required. It recommends applicantLocationRequirements, baseSalary, directApply, employmentType, identifier, jobLocationType and validThrough.
Google reserves jobLocationType TELECOMMUTE for jobs done fully remotely. You must also name at least one country applicants may work from, preferably with applicantLocationRequirements; otherwise Google falls back to the country in jobLocation.
Google asks you to update validThrough to a past date, remove the markup or remove the page when a job is filled. It warns that failing to act on expired jobs may lead to a manual action against the site.
For small teams, yes: keep the story short and the roles near the top. Larger companies often split them, with the careers page linking to a filterable jobs list and each role on its own page.
Related: Structured data examples, Team page examples, About us page examples, How to write an about us page, Thank you page examples.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.