How we enhanced our jobseeker user experience on infosec-jobs.com with og:screen

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 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, 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:

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):

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:

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:

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 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 has proven to be a successful move by us, enhancing the visual appeal of their shared links and improving their overall social media presence.