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

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?

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?

Share Improve this question edited May 10, 2020 at 5:03 Alexei Levenkov 101k15 gold badges136 silver badges188 bronze badges asked May 10, 2020 at 4:30 Mario 4,9963 gold badges42 silver badges62 bronze badges

I haven't used nextjs before but can you use vanilla JavaScript? – awarrier99 Commented May 10, 2020 at 4:38
This answer stackoverflow./a/55151122/615274 helped me understand that I need to use side effect to get the value of window.location.href in the page ponent of nextjs. – Mario Commented May 10, 2020 at 5:05

Add a ment |

5 Answers 5

Sorted by: Reset to default 6

There are several ways to achieve such a thing:

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./

The index file:

<!-- index -->

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

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

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 ments since you are asking for the full path of the image, the best way to do it would sticking with the first approach.

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

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.

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.

As explained in this answer https://stackoverflow./a/55151122/615274 Using side effect in the ponent 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}`

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

5 Answers 5

与本文相关的文章

评论列表(0)