# `SEO.Site`
[🔗](https://github.com/dbernheisel/phoenix_seo/blob/0.2.1/lib/seo/site.ex#L1)

Metadata about your site.

### Example:

Mask Icon:

![Mask Icon Example](./assets/masked-icon-example.jpg)

Theme Color:

![Theme Color Example](./assets/theme-color-example.png)

### Resources

- https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240
- https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag
- https://developers.google.com/search/docs/crawling-indexing/special-tags
- https://developers.google.com/search/docs/appearance/snippet (description)
- https://developers.google.com/search/docs/appearance/site-names (title)
- https://developers.google.com/search/docs/appearance/title-link
- https://realfavicongenerator.net/
- https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html
- https://www.w3.org/TR/appmanifest/#using-a-link-element-to-link-to-a-manifest

# `css_color`

```elixir
@type css_color() :: String.t()
```

CSS color value.  For example, "#663399", "red", "rgb(0, 1, 3)". https://www.w3.org/TR/css-color-3/

# `t`

```elixir
@type t() :: %SEO.Site{
  alternate_languages: [{String.t(), String.t() | URI.t()}] | nil,
  canonical_url: URI.t() | String.t() | nil,
  default_title: String.t() | nil,
  description: String.t() | nil,
  google: String.t() | [String.t()] | nil,
  google_site_verification: term(),
  googlebot: String.t() | nil,
  manifest_url: URI.t() | String.t() | nil,
  mask_icon_color: css_color() | nil,
  mask_icon_url: URI.t() | String.t() | nil,
  rating: String.t() | nil,
  robots: String.t() | [String.t()] | nil,
  theme_color: css_color() | nil,
  title: String.t() | nil,
  title_prefix: String.t() | nil,
  title_suffix: String.t() | nil,
  windows_tile_color: css_color() | nil
}
```

# `build`

```elixir
@spec build(SEO.attrs(), SEO.config()) :: t() | nil
```

Metadata that describes the site generally.

- `:title` - Title of the page. If `:page_title` is provided to the component, that will always win.
- `:default_title` - Fallback title when `:title` and `:page_title` is nil.
- `:description` - A one to two sentence description of your item.
- `:canonical_url` - A URL that is most representative of your item.
- `:rating` - `"adult"`. If a rating of `"adult"` is applied, it's also recommended to separate adult assets into a
folder such as `example.com/explicit/wow.jpg`. No value provided means the content is appropriate for everyone.
- `:alternate_languages` -  If your site is multilingual, you can inform search engines. Supply a list of tuples of the
lang_code and the URL for the page. For example:
      [
        {"en_US", Routes.article_url(@endpoint, article.id)},
        {"ja_JP", Routes.article_jp_url(@endpoint, article.id)}
      ]
- `:google` - Google-specific metadata. It can be one of these values or a list of these values:
  - `"nositelinkssearch"`. When users search for your site, Google Search results sometimes display a search box
  specific to your site, along with other direct links to your site. This tag tells Google not to show the sitelinks
  search box. [Learn more about sitelinks search box.](https://developers.google.com/search/docs/appearance/structured-data/sitelinks-searchbox)
  - `"nopagereadaloud"` - Prevents various [Google text-to-speech services](https://developers.google.com/search/docs/crawling-indexing/read-aloud-user-agent) from reading aloud web pages using text-to-speech (TTS). Prevents various
- `:googlebot` - Google crawler bot metadata.
  - `"notranslate"` - when Google recognizes that the contents of a page aren't in the language that the user
  likely wants to read, Google may provide a translated title link and snippet in search results. If the user
  clicks the translated title link, all further user interaction with the page is through Google Translate,
  which will automatically translate any links followed. In general, this gives you the chance to provide
  your unique and compelling content to a much larger group of users. However, there may be situations where
  this is not desired. This meta tag tells Google that you don't want Google to provide a translation for
  this page.
- `:google_site_verification` - You can use this tag on the top-level page of your site to verify ownership for Search
Console. Please note that while the values of the name and content attributes must match exactly what is provided to
you (including upper and lower case), it doesn't matter if you change the tag from XHTML to HTML or if the format of
the tag matches the format of your page.
- `:robots` - Robot instructions. You may provide or a list of the values:
  - `"noindex"` do not index the page
  - `"noimageindex"` do not index images on this page. If you don't specify this value, images on the page may be
  indexed and shown in search results.
  - `unavailable_after: [date/time]` do not show this page in search results after the specified date/time. The
  date/time must be specified in a widely adopted format including ISO 8601.
  - `"nofollow"` do not follow outlines from the page.
  - `"none"` Equivalent to `noindex, nofollow`
  - `"all"` There are no restrictions for indexing or serving. This directive is the default value and has no effect if explicitly listed.
  - `"indexifembedded"` Google is allowed to index the content of a page if it's embedded in another page through
  iframes or similar HTML tags, in spite of a noindex directive.
  - `"notranslate"` don't offer translation of this page in search results
  - `"noarchive"` do not store a cached page
  - `"nocache"` do not store a cached page. Same as `"noarchive"`
  - `"noodp"` do not use a description from [Open Directory Project](http://dmoz.org)
  - `"nosnippet"` do not show a description nor a preview thumbnail for the page
  - `"max-snippet:[number]"` max text length in characters to show in search results. The number may be:
    - `0` no text snippet
    - `-1` no limit
  - `"max-image-preview:[value]"` Max size of an image preview. The value may be:
    - `none` do not show an image preview
    - `standard` show a standard size image
    - `large` show a large size image
    - any other value will mean there is no image size limit
  - `"max-video-preview:[number]"` Max number of seconds of a video preview. The number may be:
    - `0` show a static image instead
    - `-1` allow any preview length
- `:windows_tile_color` - The color of the tile behind your icon when rendered on the Microsoft Windows start menu.
  Accepts a CSS color value, such as a hex or name.
- `:theme_color` - The chrome of the browser may use the theme color. Accepts a CSS color value. It creates a nice
  effect if this is set to the same color as the page's background. In Safari, this is used when the tab bar style is
  compact. Some colors may be ignored by the browser (such as those that conflict with the chrome).
- `:mask_icon_url` - URL of the mask SVG icon. Accepts an `%URI{}` or a string. This is used by Safari when the page
  is pinned to a tab. The SVG file must use 100% black for all vectors with a transparent background, a single layer,
  and the viewBox attribute must be set to `"0 0 16 16"`.
- `:mask_icon_color` - Safari will use the `:mask_icon_url` as the icon when pinned, and you may colorize the icon
  with a CSS color value.

# `meta`

## Attributes

* `item` (`:any`) - Defaults to `nil`.
* `page_title` (`:string`) - Defaults to `nil`.
* `config` (`:any`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*