question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add OG tags for overthought posts.

See original GitHub issue

Hey 👋

I noticed when trying to share your latest blog post that it didn’t have OG tags set up (example).

You should be able to use something like next-seo on your [slug].tsx page. I’m not sure the recommended way to do OG tags with Ghost, but I’m guessing it’s something like this.

<NextSeo
  openGraph={{
    type: 'article',
    title: post.metaTitle,
    description: post.metaDescription,
    images: [
      {
        url: post.metaImage,
        width: 850,
        height: 650,
        alt: post.metaTitle,
      },
    ],
  }}
  title={post.metaTitle}
  description={post.metaDescription}
/>

Btw, nice use of TS 😍

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
brianlovincommented, Dec 17, 2019

Hm this is frustrating. I’ll see if I can get mxstbr to take a look.

1reaction
brianlovincommented, Dec 17, 2019

@leerob thanks for the note, I must be missing it! I’ll add it in.

Also, thank you for writing https://leerob.io/blog/mailchimp-next-js - it helped me implement https://github.com/brianlovin/brian-lovin-next/commit/ca3f7b7064ece68eb7033066c2f25c37737b5f25

<div>Create a Newsletter with Next.js API Routes and Mailchimp - Lee Robinson</div><div>Learn how to integrate Next.js and React with Mailchimp to build a newsletter subscription form.</div>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Open Graph Meta Tags: Everything You Need to Know - Ahrefs
Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media. Learn how to set...
Read more >
12 Essential Open Graph Meta Tags for Facebook and Twitter
The open graph tags let you control the title, description, and image in the post; it's a great way to ensure your content...
Read more >
Comprehensive Guide to Open Graph Meta Tags - Magefan
In this guide, you'll learn everything you need to make your social media posts more clickable and shared with open graph tags.
Read more >
How to add Facebook OpenGraph meta tags - Yoast
1. When you're logged in, you will be in your 'Dashboard'. 2. On the left-hand side, you will see a menu. In that...
Read more >
How To Add Open Graph Meta Tags To WordPress
In order for Open Graph to work properly, you need to add a few meta tags to the head section of your HTML...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found