ProductPromotion
Logo

Elixir

made by https://0x3d.site

GitHub - hlongvu/phoenix_meta_tags: Phoenix library helps generating meta tags for website.
Phoenix library helps generating meta tags for website. - hlongvu/phoenix_meta_tags
Visit Site

GitHub - hlongvu/phoenix_meta_tags: Phoenix library helps generating meta tags for website.

GitHub - hlongvu/phoenix_meta_tags: Phoenix library helps generating meta tags for website.

Phoenix Meta Tags

Module Version Hex Docs Total Download License Last Updated

This is a library helps generate meta tags for a website.

Default Usage

From a struct like this:

%{
    title: "Phoenix Title",
    description: "Phoenix Descriptions",
    url: "https://phoenix.meta.tags",
    image: "https://phoenix.meta.tags/logo.png"
}

will become:

# Default tags
<title>Phoenix Title</title>
<meta content="Phoenix Title" name="title">
<meta content="Phoenix Descriptions" name="description">

#Open Graph tags
<meta content="website" property="og:type">
<meta content="https://phoenix.meta.tags" property="og:url">
<meta content="Phoenix Title" property="og:title">
<meta content="Phoenix Descriptions" property="og:description">
<meta content="https://phoenix.meta.tags/logo.png" property="og:image">

#Twitter tags
<meta content="summary_large_image" name="twitter:card">
<meta content="https://phoenix.meta.tags" name="twitter:url">
<meta content="Phoenix Title" name="twitter:title">
<meta content="Phoenix Descriptions" name="twitter:description">
<meta content="https://phoenix.meta.tags/logo.png" name="twitter:image">

Advanced Usage

Other key value of tags map will be rendered individually by key. Nested map will be rendered by flat-representation of keys. For example:

map = %{
  title: "Phoenix Title",
  description: "Phoenix Descriptions",
  url: "https://phoenix.meta.tags",
  image: "https://phoenix.meta.tags/logo.png",
  fb: %{
    name: "facebook",
    size: %{
      width: 100,
      height: 200,
      position: %{
        x: 10,
        y: 15
      }
    }
  }
}

In addition to default tags like above example, the rendered tags will have more:

<meta content="facebook" property="fb:name">
<meta content=100 property="fb:size:width">
<meta content=200 property="fb:size:height">
<meta content=10 property="fb:size:position:x">
<meta content=15 property="fb:size:position:y">

Instead of a nested map, you can also use a string-key map, this also delivers the same result:

map = %{
  "title" => "PhoenixTags",
  "fb:name" => "facebook",
  "fb:size:width" => 100,
  "fb:size:height" => 200,
  "fb:size:position:x" => 10,
  "fb:size:position:y" => 15
}

Tag Value Override

In default rendering, the og:title tag will get value from title. If you re-define og:title value, the new value will be override the default title value. For example:

map = %{
  title: "Phoenix Title",
  og: %{
    title: "Override"
  }
}

Will have output:

<title>Phoenix Title</title>
<meta content="Phoenix Title" name="title">
<meta content="Override" property="og:title">

Installation

The package can be installed by adding :phoenix_meta_tags to your list of dependencies in mix.exs:

def deps do
  [
    {:phoenix_meta_tags, ">= 0.1.9"}
  ]
end

In your Web Module add this:

def view do
  quote do
    ...
    use PhoenixMetaTags.TagView # Add this
  end
end

def controller do
  quote do
    ...
    use PhoenixMetaTags.TagController # Add this
  end
end

Also put this render function inside your <head> tag of app.html.eex:

<head>
    <%= render_tags_all(assigns[:meta_tags] || %{})%> # Add this
</head>

Usage

Wherever you want to render meta tags, jut put it before render your view:

conn
|> put_meta_tags(%{
  title: "Phoenix Title",
  description: "Phoenix Descriptions",
  url: "https://phoenix.meta.tags",
  image: "https://phoenix.meta.tags/logo.png"
})
|>render("index.html")

Or, use it as a plug:

@meta %{
  title: "Phoenix Title",
  description: "Phoenix Descriptions",
  url: "https://phoenix.meta.tags",
  image: "https://phoenix.meta.tags/logo.png"
}

plug :put_meta_tags, @meta

Default value

You can put the default value for meta tags in your config file. This config will be merge with runtime tags before rendering.

config :phoenix_meta_tags,
  title: "Phoenix Title Default",
  description: "Phoenix Descriptions Default",
  url: "https://phoenix.meta.tags.default",
  image: "https://phoenix.meta.tags.default/logo.png",
  "og:text": "Hello Open Graph",
  fb: %{
    name: "facebook",
    size: %{
      width: 100,
      height: 200,
      position: %{
        x: 10,
        y: 15
      }
    }
  }

Copyright and License

Copyright (c) 2018 hlongvu

This work is free. You can redistribute it and/or modify it under the terms of the MIT License. See the LICENSE.md file for more details.

Articles
to learn more about the elixir concepts.

Resources
which are currently available to browse on.

mail [email protected] to add your project or resources here 🔥.

FAQ's
to know more about the topic.

mail [email protected] to add your project or resources here 🔥.

Queries
or most google FAQ's about Elixir.

mail [email protected] to add more queries here 🔍.

More Sites
to check out once you're finished browsing here.

0x3d
https://www.0x3d.site/
0x3d is designed for aggregating information.
NodeJS
https://nodejs.0x3d.site/
NodeJS Online Directory
Cross Platform
https://cross-platform.0x3d.site/
Cross Platform Online Directory
Open Source
https://open-source.0x3d.site/
Open Source Online Directory
Analytics
https://analytics.0x3d.site/
Analytics Online Directory
JavaScript
https://javascript.0x3d.site/
JavaScript Online Directory
GoLang
https://golang.0x3d.site/
GoLang Online Directory
Python
https://python.0x3d.site/
Python Online Directory
Swift
https://swift.0x3d.site/
Swift Online Directory
Rust
https://rust.0x3d.site/
Rust Online Directory
Scala
https://scala.0x3d.site/
Scala Online Directory
Ruby
https://ruby.0x3d.site/
Ruby Online Directory
Clojure
https://clojure.0x3d.site/
Clojure Online Directory
Elixir
https://elixir.0x3d.site/
Elixir Online Directory
Elm
https://elm.0x3d.site/
Elm Online Directory
Lua
https://lua.0x3d.site/
Lua Online Directory
C Programming
https://c-programming.0x3d.site/
C Programming Online Directory
C++ Programming
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
R Programming
https://r-programming.0x3d.site/
R Programming Online Directory
Perl
https://perl.0x3d.site/
Perl Online Directory
Java
https://java.0x3d.site/
Java Online Directory
Kotlin
https://kotlin.0x3d.site/
Kotlin Online Directory
PHP
https://php.0x3d.site/
PHP Online Directory
React JS
https://react.0x3d.site/
React JS Online Directory
Angular
https://angular.0x3d.site/
Angular JS Online Directory