How we enhanced our jobseeker user experience on infosec-jobs.com with og:screen
Tags: webdev, tutorial, python, html
Published: 2023-07-23 16:01:14

In the domain of job boards, the user interface and user experience play a crucial role in attracting and retaining job seekers. With the goal of improving these aspects, we decided to integrate [og:screen](https://ogscreen.com/) to generate efficient Open Graph screenshots for websites.

Previously, links shared from the site displayed either the company's logo or no image at all. This was not ideal as it did not provide much visual information about the linked resource. To rectify this, we decided to utilize og:screen to create informative and visually appealing preview images for their links.

These where the requirements for implementation:

1.  Create square-ish images for job ads with the main job info shown prominently, to be shared primarily on Twitter and LinkedIn.
2.  Create wide preview images for company pages.
3.  Display essential information in preview/card images instead of just company logos or no images at all.
4.  Utilize the og:screen delete_after setting to delete outdated job ad images and refresh company page images after 60 and 14 days, respectively.

## Implementation

As the website is built with the [Django framework](https://www.djangoproject.com/), the implementation involved changes to the Django views and templates.

### Job Ad Images

The first step was to set up og:screen to generate almost square images for the job ads. we used the **Filter string** value with "/job/" to apply these settings specifically to job ads. To achieve this, we configured the width and height settings on og:screen's platform:

![Site settings example for job ads](https://ogscreen.com/static/img/is_job_ad_settings.jpg)

In Django, we created a view that uses Django's **build_absolute_uri** request method to get the absolute URL of the page. This URL is then encoded into a base64 URL-safe string, which is included in the og:screen image URL.

Here is a simplified example of how we did this:

```
from django.views import View
import base64

class JobAdView(View):
    def get(self, request, *args, **kwargs):
        job_page_url = request.build_absolute_uri()
        encoded_url = base64.urlsafe_b64encode(job_page_url.encode()).decode()

        context = {'encoded_url': encoded_url}
        return render(request, 'job_ad.html', context)
```

In the HTML template, we used the **encoded_url** to create the og:image and twitter:image tags:

```
<meta property="og:image" content="https://ogscreen.com/img/{{ encoded_url }}.png">
<meta name="twitter:image" content="https://ogscreen.com/img/{{ encoded_url }}.png">
```

This is an example of what a generated job ad image looks like (getting the responsive mobile view of the site due to the smaller **Window width** setting):

![Example job ad preview image](https://ogscreen.com/static/img/is_job_ad.jpg)

### Company Page Images

The process for the company pages was similar to the job ads. However, the **Filter string** value used was "/jobs-ad-", and the **Window width** and **Window height** settings for the site were adjusted to create wider images:

![Site settings example for company pages](https://ogscreen.com/static/img/is_company_page_settings.jpg)

The Django view and HTML changes were similar to the job ads, replacing **job_page_url** with **company_page_url**.

Here is an example of how a generated company page image looks like:

![Example company page preview image](https://ogscreen.com/static/img/is_company_page.jpg)

### Automatic Deletion of Outdated Images

To ensure that the images were always up-to-date, we utilized og:screen's **Delete after** setting. We set it to 60 days for job ad images and 14 days for company page images. This meant that outdated images were automatically deleted and refreshed with current information.

## Results and Benefits

The integration of [og:screen](https://ogscreen.com/) brought significant improvements to the job platform. The preview images now displayed essential information about the job ad or company page, making the shared links more informative and appealing. This led to a higher click-through rate and a better user experience.

While the initial technical integration required some effort, it resulted in a fully automated process for creating and updating the images, saving time and resources.

Overall, the use of [og:screen](https://ogscreen.com/) has proven to be a successful move by us, enhancing the visual appeal of their shared links and improving their overall social media presence.