Challenges

Implement On Page SEO Support

Verify Metatags

Before we begin to implement, we need to find a way to verify these metatags, especially Open Graph related metatags.

Let me show you a couple of ways:

1. Inspect Elements using the Browser

To check metatags, we can quickly inspect elements on the web page. We can use browser's development tools or check the source of the web app.

You can also run this command inside the browser console to view them quickly:

console.table(
    Array
        .from(document.querySelectorAll('meta'))
        .map(meta => ({
            name: meta.getAttribute('property') || meta.getAttribute('name'),
            content: meta.getAttribute('content')
        }))
)

2. Use Online Debuggers

You can also use online debuggers to validate metatags in any web app. I usually use these two debuggers:

šŸ’” If you need to use these tools with your locally running dev app, use a tunneling service like ngrok.

3. Browser Extensions

There are browser extensions that preview social cards based on meta tags. If you use browser extensions, have a look at these:


Here's a simple task for you.

Q: What's the value for `og:description`?
authenticating...

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: