How do I get the base url of the site for twitter:image meta tag?

user_615274 0
Viewed 3121

I have the following front matter in a markdown file.

---
title: "Hello world!"
excerpt: "Lorem ipsum dolor sit amet"
coverImage: "/assets/blog/hello-world/cover.png"
date: "2020-03-16T05:35:07.322Z"
author:
  name: Mario
  picture: "/assets/blog/authors/mario.png"
ogImage:
  url: "/assets/blog/hello-world/cover.png"
---

I require passing the full url of the image to twitter card meta twitter: image and open graph meta property = "og: image"

For this I need to obtain the base url of the site to use it as a prefix to the image path that I obtain through front matter

<Head>
  {/* Twitter */}
  ...
  <meta name="twitter:image" content={data.ogImage.url} />

  {/* Open Graph */}
  ...
  <meta property="og:url" content={``} key="ogurl" />
  <meta property="og:image" content={data.ogImage.url} key="ogimage" />
</Head>

For now data.ogImage.url has the value /assets/blog/hello-world/cover.png but in order to work I need to prefix this output with site base url

How do I get the base url of the site in nextjs?

next.js reactjs javascript
5 Answers

There are several ways to achieve such a thing:

  1. Create your base URL in env file and refer it by proccess.env (This may help with this approach).

    The .env file:

    // .env

REACT_APP_BASE_URL=http://example.com/

    The index file:

    <!-- index -->

<meta property="og:image" content={`${process.env.BASE_URL}${data.ogImage.url}`} key="ogimage" />

  2. Using a relative path, in this approach, you should use image relative path which work like this (this may help with it):

    Let's say we have below structure:

    --src
  |--assets
     |--images
        |--image.png
--index

    If we are in index file we will refer to that image like this:

    <meta property="og:image" content={`./src/${data.ogImage.url}`} key="ogimage" />
                                            |__let's say this will return assets/images/image.png

  3. Use javascript built-in methods like window.location. To access the base URL we can get origin property from it like this: window.location.origin (For using this method in next.js this may probably help).

    <meta property="og:image" content={`${window.location.origin}${data.ogImage.url}`} key="ogimage" />

NOTE: As @AlexeiLevenkov mentioned in comments since you are asking for the full path of the image, the best way to do it would sticking with the first approach.

user_119085020

Assuming you can use normal client-side JavaScript (I haven't used nextjs before) you can access the base url of the page with window.location.origin

user_38348410

The following screenshot explain everything in itself. If you aren't able to access the window object then probably you are using at a place where it is actually not accessible. You can try writing your short script in tag and can update the meta values. In that script, you'd access to the window object.

enter image description here

user_50368430

During server side rendering you have no window, so you cant get access to location. But you can leave url prefix empty on server side and define it on client.

user_70124500

As explained in this answer https://stackoverflow.com/a/55151122/615274 Using side effect in the component allows me to access the window object and in consequence to window.location.href the final solution looks similar to this

export default function Post({ post, name }) {
  const { data, content } = post;
  const [origin, setOrigin] = React.useState("");

  React.useEffect(() => {
    setOrigin(window.location.origin); // <-- here I get access to window
  }, []);

  return (
    <Layout title={data.title} description={data.excerpt}>
      <Head>
        {/* Twitter */}
        <meta name="twitter:image" content={`${origin}${data.ogImage.url}`} />

        {/* Open Graph */}
        <meta property="og:image" content={`${origin}${data.ogImage.url}`} key="ogimage"
        />
      </Head>

      <main>
        <PostBody data={data}>{content}</PostBody>
      </main>
    </Layout>
  );
}

In the content attribute of twitter:image and og:image I can set the full url like this `${origin}${data.ogImage.url}`

user_6152740
Related