# Create a Location-Based Programmatic Job Page

Programmatic job pages help your job board rank for high-intent keywords like “**Jobs in San Francisco**” or “**Jobs in California**”. Each page dynamically shows relevant job listings for that location, while still looking like a genuine, content-rich page to search engines.

### Steps to set up a Programmatic Job Page

1. #### Log in to Admin Panel
   1. Go to your admin side of the Job Board.\
      Example: <mark style="color:$success;"><https://abx.arthajobboard.com/admin></mark>
2. **Open Manage Portal**
   1. From the menu, click Manage Portal.<br>

      <figure><img src="https://3839433978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYtOutXrVZXk51IghCDyu%2Fuploads%2FnNG0veUEcVPaAzaNpMaO%2Fimage.png?alt=media&#x26;token=38b04e3b-db02-4d22-b2a3-2ffe86b51b57" alt=""><figcaption></figcaption></figure>
3. **Embed the Location Script**
   1. Navigate to Embed Script.
   2. Copy and paste the following JavaScript code into the Footer Script section.<br>

      <figure><img src="https://3839433978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYtOutXrVZXk51IghCDyu%2Fuploads%2FAOAmqUPaX1rfhpO0yXyg%2Fimage.png?alt=media&#x26;token=8a948f36-4d53-4b4b-8acb-693f18c575c6" alt=""><figcaption></figcaption></figure>
   3. Here's the JavaScript code:

```javascript
// JavaScript code
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const currentPathname = window.location.pathname; // e.g., '/jobs-in-san-francisco'
        const currentSearch = window.location.search;   // e.g., '' or '?existing=param'

        // Updated regex to capture single or multiple words with hyphens/underscores
        const regex = /^\/jobs-in-([a-zA-Z0-9_-]+(?:-[a-zA-Z0-9_-]+)*)$/;
        const match = currentPathname.match(regex);

        if (match) {
            // Convert slug to readable city name: 'san-francisco' -> 'San Francisco'
            let citySlug = match[1];
            let city = citySlug.replace(/-/g, " ").replace(/_/g, " ");
            city = city.replace(/\b\w/g, char => char.toUpperCase()); // Capitalize words

            const newQueryString = `?city=${encodeURIComponent(city)}&page=1`;

            // Only update the URL if the parameters are not already present
            if (!currentSearch.includes(`city=${encodeURIComponent(city)}`) || !currentSearch.includes(`page=1`)) {
                history.pushState(null, '', currentPathname + newQueryString);
                console.log(`City detected: ${city}`);
                console.log(`URL state updated to: ${window.location.pathname}${window.location.search}`);
            } else {
                console.log(`City detected: ${city}`);
                console.log("URL already contains the desired parameters. No action needed.");
            }
        } else {
            console.log("Current URL slug does not match the /jobs-in-{city} pattern. No city filter simulation will occur.");
        }
    });
</script>
```

4. **Add Pages for Each Location**
   1. Create a new page for each location.
   2. **Example**:&#x20;
      1. Page Title: **Jobs in California**
      2. Slug: <mark style="color:$success;">jobs-in-california</mark>
      3. <mark style="color:$success;">All programmatic pages</mark> <mark style="color:$success;"></mark><mark style="color:$success;">**must**</mark> <mark style="color:$success;"></mark><mark style="color:$success;">follow this exact pattern: jobs-in-{{city-name}}</mark>
      4. <mark style="color:$success;">If the slug pattern is changed (e.g., /careers-in-california or /california-jobs), the script will</mark> <mark style="color:$success;"></mark><mark style="color:$success;">**not**</mark> <mark style="color:$success;"></mark><mark style="color:$success;">work.</mark>
   3. Add the "**Browse Jobs" widget** so the jobs for that city are displayed dynamically.<br>

      <figure><img src="https://3839433978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYtOutXrVZXk51IghCDyu%2Fuploads%2F8cVC4bgz2XDdIDOnbbHw%2Fimage.png?alt=media&#x26;token=0dea7b32-46e7-4cd6-8978-f8af95851273" alt=""><figcaption></figcaption></figure>
5. **Add Custom Widgets (Critical for SEO)**
   1. At the bottom of each page, add a custom text widget.
   2. Example content:

      “California has one of the largest healthcare job markets in the US. Explore nursing, caregiving, and hospital jobs in major cities like Los Angeles, San Diego, and San Francisco.”
   3. #### <mark style="color:$warning;">Why is this important?</mark>
      1. Search engines penalize duplicate content.\
         If multiple pages only show job listings with no unique text, they may be flagged as “thin content.”
      2. Adding custom descriptive text:
         1. Makes the page look genuine.
         2. Adds keyword-rich content (helping SEO).
         3. Improves user experience with helpful info.
   4. This is similar to what Flipkart does on product listing pages — they add explanatory text at the bottom so the page is not just a filtered search result but a rich content page.
6. **Make the Pages More Appealing for SEO**
   1. #### Add Interlinking
      1. **Blog Pages** – Link to guides like:
         1. “Top 10 Healthcare Jobs in California”
         2. “How to Find Nursing Jobs in Los Angeles”
      2. **Category Pages** – Example: \
         On “Jobs in San Francisco”, link to:\
         \[Caregiver Jobs in San Francisco]\
         \[Nursing Jobs in San Francisco]
      3. **Company Pages** – Interlink employer pages:
         1. “View jobs from Kaiser Permanente in California”
   2. #### Additional SEO Boosters
      1. **Add FAQs** to each page:\
         “How to apply for jobs in California?”\
         “Which companies are hiring nurses in San Diego?”
      2. **Local SEO**: Mention nearby cities & industries.
      3. **Schema Markup**: Ensure job schema is applied correctly.
      4. **Backlinks**: Build backlinks from local directories, colleges, or healthcare organizations.
7. **Define SEO for Programmatic Pages**
   1. After creating each location page, you should also configure its **SEO settings** in the admin panel so that search engines can properly index and rank it.
   2. **Steps**:
      1. Go to the page you just created (e.g., <mark style="color:$success;">/jobs-in-california</mark>) in the **Admin Panel → Manage Portal → Pages.**
      2. Open the **SEO Management** option for that page.\
         (You’ll see fields like Meta Title, Meta Description, Canonical URL, Author, and Cover Photo — as shown in the screenshot).<br>

         <figure><img src="https://3839433978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYtOutXrVZXk51IghCDyu%2Fuploads%2Fmicas0PfOlpQwTtSrX81%2Fimage.png?alt=media&#x26;token=61648778-6bdd-4670-952a-7042099f7b50" alt=""><figcaption></figcaption></figure>
      3. Fill in the fields:
         1. **Meta Title**: Keep it clear and keyword-rich.\
            Example: Jobs in California | Care Hire USA
         2. **Meta Description**: Add a short, compelling description (150–160 characters) with the city and job types.\
            Example: Find healthcare, nursing, and caregiving jobs in California. Apply today with Care Hire USA.
         3. **Canonical URL**: Use the full page URL (e.g., <mark style="color:$success;"><https://yourdomain.com/jobs-in-california></mark>) to avoid duplicates.
         4. **Cover Photo**: Upload a location/industry-related image (120×120 px min, ≤2 MB). This also helps with social previews.
   3. <mark style="color:$warning;">**Why does this matter?**</mark>
      1. Ensures each page has **unique meta tags** (prevents duplicate title/description issues).
      2. Improves **CTR in search results** with better snippets.
      3. Helps Google clearly understand your page hierarchy with **canonical URLs**.
      4. Enhances **social sharing previews** with cover photos.
8. **New Interlinking Ideas**
   1. **State → City pages:**\
      From “Jobs in California” → link to “Jobs in Los Angeles”, “Jobs in San Diego”.
   2. **City → Nearby Cities:**\
      On “Jobs in San Francisco”, add “Jobs in Oakland” and “Jobs in San Jose”.
   3. **Industry-Specific:**\
      On “Jobs in New York”, link to “IT Jobs in New York” or “Healthcare Jobs in New York”.
   4. **Employer Spotlights:**\
      Add sections like “Top Hiring Companies in Chicago” linking to company pages.

### Expected Output

1. SEO-friendly programmatic job pages like:
   * <mark style="color:$success;">/jobs-in-california</mark>
   * <mark style="color:$success;">/jobs-in-new-york</mark>
   * <mark style="color:$success;">/jobs-in-san-francisco</mark>
2. Each page:
   * Shows jobs from the respective city only.
   * Has unique text widget content.
   * Interlinks to blog, category, and company pages.
   * Ranks for “**jobs in {city}**” keywords.

<figure><img src="https://3839433978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYtOutXrVZXk51IghCDyu%2Fuploads%2FeQpYsEvooEBW2BSjW7EX%2Fimage.png?alt=media&#x26;token=85004d37-23c1-4fc6-b485-9ee8309e2862" alt=""><figcaption></figcaption></figure>