I’m always interested in understanding how SEO works. This time, I wanted to learn how the Open Graph (OG) image is fetched from a source when we paste a URL into tools like Slack or social media platforms like Facebook or Twitter. By default, these platforms bring some image as a thumbnail or preview. I learned that this image is called an OG image.
In this blog, we built a small solution to simulate fetching an OG image. We also explored an alternative way to fetch the image using a different approach. Let’s dive into the details!

Building an Open Graph Image Fetcher with Angular

In this blog post, we’ll walk through building a simple Open Graph Image Fetcher using Angular. This application will allow users to enter a URL, fetch the Open Graph image associated with that URL, and display it.

Step 1: Setting Up the Angular Project

First, create a new Angular project if you haven’t already:

ng new open-graph-image-fetcher
cd open-graph-image-fetcher

Step 2: Install Dependencies

We’ll need the HttpClientModule for making HTTP requests. So add it accordingly

Step 3: Create the Service

Create a service to handle fetching the Open Graph image. We’ll use the opengraph.io API for this purpose. Note that you need to get an API key from opengraph.io and add it to your environment configuration.

open-graph.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class OpenGraphService {
  private apiKey = environment.openGraphApiKey; // Use API key from environment

  constructor(private http: HttpClient) {}

  fetchOGImage(url: string): Observable<string> {
    const apiUrl = `https://opengraph.io/api/1.1/site/${encodeURIComponent(url)}?app_id=${this.apiKey}`;
    return this.http.get(apiUrl).pipe(
      map((response: any) => {
        console.log('response', response);
        const ogImage = response.hybridGraph.image;
        return ogImage || '';
      })
    );
  }
}

Step 4: Create the Component

Create a component to handle user input and display the fetched Open Graph image.

app.component.ts

import { Component } from '@angular/core';
import { OpenGraphService } from './open-graph.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  ogImage: string | undefined;
  targetURL = 'https://www.example.com';
  loading = false;

  constructor(private openGraphService: OpenGraphService) {}

  fetchOGImage() {
    this.loading = true;
    this.openGraphService.fetchOGImage(this.targetURL).subscribe(
      (image: string) => {
        this.ogImage = image;
        this.loading = false;
      },
      (error) => {
        console.error('Error fetching Open Graph image', error);
        this.loading = false;
      }
    );
  }
}

app.component.html

<div class="container">
  <h1>Open Graph Image Fetcher</h1>
  <div class="content">
    <input type="text" placeholder="Enter URL" [(ngModel)]="targetURL" (keyup.enter)="fetchOGImage()" class="url-input" />
    <button (click)="fetchOGImage()">Fetch Open Graph Image</button>
    <div *ngIf="loading" class="loader"></div>
    <div *ngIf="ogImage && !loading" class="image-container">
      <img [src]="ogImage" alt="Open Graph Image">
    </div>
  </div>
</div>

app.component.scss

.container {
  text-align: center;
  margin-top: 50px;
}

.content {
  display: inline-block;
  text-align: left;
}

.url-input {
  margin-right: 10px; /* Add space between the textbox and the button */
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: 20px auto;
}

.image-container {
  height: 300px; /* Fixed height to prevent jumping */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  max-height: 100%;
  max-width: 100%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Alternative Approach: Using Cheerio

Another way to fetch Open Graph data is by using Cheerio, a server-side library that parses HTML and extracts data. However, this approach has limitations, such as proxy issues and the requirement of server-side blocks.

Conclusion

In this blog post, we built a simple Open Graph Image Fetcher using Angular and the opengraph.io API. We also explored an alternative approach using Cheerio on a Node.js server. While the Cheerio approach can be useful, it has limitations such as proxy issues and the requirement of server-side blocks.

Find the source here at GitHub

https://github.com/PandiyanCool/open-graph-image

Feel free to expand on this project by adding more features or improving the UI.

Happy coding!