More than 3 years have passed since last update.

Nuxt.jsでTwitterカードが表示できないときのワークアラウンド

Posted at 2022-04-15

事象

こちらで紹介されている事象の解決策
https://kakkiii-blog.dev/posts/510/
head内のstyleがmetaタグより上にある。

解決策

https://nuxtjs.org/ja/docs/concepts/views/#%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88-apphtml
app.htmlに直接metaタグを書くととりあえず解決できる。

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    <meta property="og:title" content="{title}">
    <meta property="og:image" content="{image_url}">
    <meta property="og:description" content="{description}">
    <meta property="og:url" content="{url}">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="{site_name}">
    <meta name="twitter:site" content="@account">
    <meta name="twitter:creator" content="@account" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{title}">
    <meta name="twitter:image" content="{image_url}">
    <meta name="twitter:description" content="{description}">
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }} class="body-class">
    {{ APP }}
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up