SeoTags create all SEO tags you need such as meta, link, twitter card (twitter:), open graph (og:), and JSON-LD schema (structred data).
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 SeoTags
Everything 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:
services.AddSeoTags(seoInfo => { ... }) method.Html.SetSeoInfo(seoInfo => { ... }) method in your .cshtml views (Mvc or RazorPages)HttpContext.SetSeoInfo(seoInfo => { ... }) method anywhere you access the HttpContext object (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.
Create an issue if you find a BUG or have a Suggestion or Question. If you want to develop this project :
git checkout -b my-new-featuregit commit -am 'Add some feature'git push origin my-new-featureIf you find this repository useful, please give it a star. Thanks!
Copyright © 2021 Mohammd Javad Ebrahimi under the MIT License.
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.