SeoTags generates All SEO Tags you need such as meta, link, Twitter card (twitter:), Open Graph (for Facebook) (og:), and JSON-LD schema (structured data).
See https://mjebrahimi.github.io/SeoTags/ for more info.
PM> Install-Package SeoTagsEverything you need to do is to configure the SeoInfo object and render it in your _Layout.cshtml.
This configuring can be done by setting the properties of the SeoInfo object in three ways:
- When registering your services using
services.AddSeoTags(seoInfo => { ... })method. Html.SetSeoInfo(seoInfo => { ... })method in your.cshtmlviews (Mvc or RazorPages)HttpContext.SetSeoInfo(seoInfo => { ... })method anywhere you access theHttpContextobject (for example in your mvc Controller/Action or razor-pages PageModel)
There are general options that are constant for your entire website (not specific to a certain page), such as Website Title, Twitter ID, Facebook ID, OpenSearch URL, feeds (RSS or Atom), etc...
Usually, these values are set when registering services using services.AddSeoTags(seoInfo => { ... }) method.
//Register your services
app.Services.AddSeoTags(seoInfo =>
{
seoInfo.SetSiteInfo(
siteTitle: "My Site Title",
siteTwitterId: "@MySiteTwitter", //Optional
siteFacebookId: "https://facebook.com/MySite", //Optional
openSearchUrl: "https://site.com/open-search.xml", //Optional
robots: "index, follow" //Optional
);
//Optional
seoInfo.AddFeed(
title: "Post Feeds",
url: "https://site.com/rss/",
feedType: FeedType.Rss);
//Optional
seoInfo.AddDnsPrefetch("https://fonts.gstatic.com/", "https://www.google-analytics.com");
//Optional
seoInfo.AddPreload(new Preload("https://site.com/site.css"),
new Preload("https://site.com/app.js"),
new Preload("https://site.com/fonts/Font.woff2"),
new Preload("https://site.com/fonts/Font_Light.woff2"),
new Preload("https://site.com/fonts/Font_Medium.woff2"),
new Preload("https://site.com/fonts/Font_Bold.woff2"));
//Optional
seoInfo.SetLocales("en_US");
});
//...To render the output SEO Tags call Html.SeoTags() method in your _Layout.cshtml.
This method has two overloads, one with a SeoInfo argument (if you need to pass a new arbitrary instance of the SeoInfo object), and one without an argument that retrieves the configured SeoInfo object from your previous registered services.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Remove these tags from your _Layout.cshtml
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Site Title</title>
-->
<!-- SeoTags generates all of these for you -->
@Html.SeoTags() <!-- 👈 Add this line -->There are some specific SEO info that you may want to set for a certain page, such as such as Page Title, Page Description, Page Keywords, Page URL, Publish Date, Modified Date, Image Info, Page Type etc...
To do this, call Html.SetSeoInfo(seoInfo => { ... }) method in your .cshtml views to set specific desired SEO info for that page.
You can do the same by calling HttpContext.SetSeoInfo(seoInfo => { ... }) anywhere you access to HttpContext object (for example in your mvc Controller/Action or razor-pages PageModel)
@{
// Remove these line from your views
// ViewData["Title"] = "Page Title";
Html.SetSeoInfo(seoInfo =>
{
seoInfo.SetCommonInfo(
pageTitle: "SEO Tags for ASP.NET Core",
description: "SetoTags creates all SEO tags you need such as meta, link, Twitter card (twitter:), open graph (og:), and ...",
url: "https://site.com/url/",
keywordTags: new[] { "SEO", "AspNetCore", "MVC", "RazorPages" }, //Optional
seeAlsoUrls: new[] { "https://site.com/see-also-1", "https://site.com/see-also-2" } //Optional
);
seoInfo.SetImageInfo(
url: "https://site.com/uploads/image.jpg",
width: 1280, //Optional
height: 720, //Optional
alt: "Image alt", //Optional
//mimeType: "image/jpeg", //Optional (detects from URL file extension if not set.)
cardType: SeoTags.TwitterCardType.SummaryLargeImage //Optional
);
seoInfo.SetArticleInfo(
authorName: "Author Name",
publishDate: DateTimeOffset.Now,
modifiedDate: DateTimeOffset.Now, //Optional
authorTwitterId: "@MyTwitterId", //Optional
authorFacebookId: "https://facebook.com/MyUserId", //Optional
authorUrl: "https://github.com/author-profile", //Optional
section: "Article Topic" //Optional
);
//Add another RSS feed. (only for this page) (Optional)
seoInfo.AddFeed("Post Comments", "https://site.com/post/comment/rss", SeoTags.FeedType.Rss);
});
}Open your page in a browser and view the source code.
The following code shows the rendered output for this example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
<link rel="preload" as="style" href="https://site.com/site.css" />
<link rel="preload" as="script" href="https://site.com/app.js" />
<link rel="preload" as="font" type="font/woff2" href="https://site.com/fonts/Font.woff2" crossorigin />
<link rel="preload" as="font" type="font/woff2" href="https://site.com/fonts/Font_Light.woff2" crossorigin />
<link rel="preload" as="font" type="font/woff2" href="https://site.com/fonts/Font_Medium.woff2" crossorigin />
<link rel="preload" as="font" type="font/woff2" href="https://site.com/fonts/Font_Bold.woff2" crossorigin />
<link rel="preload" as="image" type="image/jpeg" href="https://site.com/uploads/image.jpg" />
<title>SEO Tags for ASP.NET Core - My Site Title</title>
<meta name="title" content="SEO Tags for ASP.NET Core - My Site Title" />
<meta name="description" content="SetoTags Creates all SEO tags you need such as meta, link, Twitter card (twitter:), open graph (og:), and ..." />
<meta name="keywords" content="SEO, AspNetCore, MVC, RazorPages" />
<meta name="author" content="Author Name" />
<link rel="author" href="https://github.com/author-profile" />
<link rel="canonical" href="https://site.com/url/" />
<link rel="application/opensearchdescription+xml" title="My Site Title" href="https://site.com/open-search.xml" />
<link rel="alternate" type="application/rss+xml" title="Post Feeds" href="https://site.com/rss/" />
<link rel="alternate" type="application/rss+xml" title="Post Comments" href="https://site.com/post/comment/rss" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SEO Tags for ASP.NET Core" />
<meta name="twitter:description" content="SetoTags creates all SEO tags you need such as meta, link, Twitter card (twitter:), open graph (og:), and ..." />
<meta name="twitter:site" content="@MySiteTwitter" />
<meta name="twitter:creator" content="@MyTwitterId" />
<meta name="twitter:image" content="https://site.com/uploads/image.jpg" />
<meta name="twitter:image:width" content="1280" />
<meta name="twitter:image:height" content="720" />
<meta name="twitter:image:alt" content="Image alt" />
<meta property="og:type" content="article" />
<meta property="og:title" content="SEO Tags for ASP.NET Core" />
<meta property="og:description" content="SetoTags creates all SEO tags you need such as meta, link, Twitter card (twitter:), open graph (og:), and ..." />
<meta property="og:url" content="https://site.com/url/" />
<meta property="og:site_name" content="My Site Title" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://site.com/uploads/image.jpg" />
<meta property="og:image:secure_url" content="https://site.com/uploads/image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta property="og:image:alt" content="Image alt" />
<meta property="article:publisher" content="https://facebook.com/MySite" />
<meta property="article:author" content="https://facebook.com/MyUserId" />
<meta property="article:published_time" content="2021-07-03T13:34:41+00:00" />
<meta property="article:modified_time" content="2021-07-03T13:34:41+00:00" />
<meta property="article:section" content="Article Topic" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="AspNetCore" />
<meta property="article:tag" content="MVC" />
<meta property="article:tag" content="RazorPages" />
<meta property="og:see_also" content="https://site.com/see-also-1" />
<meta property="og:see_also" content="https://site.com/see-also-2" />
...SeoTags now supports popular JSON-LD types such as Article, Product, Book, Organization, WebSite, WebPage, and etc...
See our docs for Nested example and Referenced example.
- This package does not generate favicon tags. Use realfavicongenerator.net to generate favicon tags.
- Only ASP.NET Core is supported (not the legacy ASP.NET Framework)
Create an issue if you find a BUG or have a Suggestion or Question. If you want to develop this project :
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
If you find this repository useful, please give it a star. Thanks!
Copyright © 2021 Mohammd Javad Ebrahimi under the MIT License.