This time I would like to do the basic SEO part. SEO is search engine optimization (Search Engine Optimization) refers to the process of placing it at the top of the index when searching with Google or Firefox.
First of all, I
will introduce the most important thing in SEO. The title tag is a tag that
sets the title of the browser tab described in the head tag. Depending on this
tag, I think that it is often involved when you want to increase the ranking
when searching.
The title tag
serves to describe the contents of your site page.
The title should
be short and concise and should describe the content of the page. Furthermore,
it is important not to include unnecessary keywords. Search engines that end up
with titles that are too long (over 70 characters) will deprioritize the page.
It is also important how users search and find your site.
Use
description in Meta tag
This is useful
when searching extensively. This is the part of the red frame in the following
image on the search.
The meta tag is
written in the head tag, and in the image above
<meta name="description" content="note (Note) is a service that connects creators and readers who can easily post text, photos, illustrations, music, videos, etc. You can freely use it like a blog, use it like an SNS, or sell content. ">
Header tag
Header tags are
heading tags used in the heading of your site. The main ones are h1, h2, h3,
h4, and h5. It serves as the title of a large piece of text on the page, but in
SEO it helps search engines decide how to divide up content and create fancy
snippets featured in the search bar.
I will explain
the role of each header tag. h1 is used in web page titles. h2 filters content
topics. h3 reflects the gist of the topic. h4 supports gists from h3. I don't
use h5 much, but it supports the gist of h4 well.
Use alt
attribute in img tag
The alt
attribute of the img tag is the attribute used to describe the image.
<img
src="cat.png">
So if it's an
image of a cat, humans can tell it's a cat, but search engines can't tell if
it's a cat or a dog. To tell search engines that this is a cat image,
<img
src="cat.png" alt="very cute cat">
You can tell
that this is a cat by adding an alt attribute like this.
Indicating
that a page is canonical
This is used to
indicate that the site is the original source. Just add the following tags
inside the head tag:
<link
rel="canonical" href="https://site.com">
If you have
multiple pages on the same site, it also tells search engines that it's the
same page.
Use OGP (Open
Graph Protocol)
OGP is an
acronym for Open Graph Protocol, which allows you to set the display of objects
when URLs are pasted on twitter, facebook, and web pages. By setting this, you
can let the user know at a glance what the URL is, rather than just looking at
the URL.
OGP sets the
meta tag in the head tag as follows.
<meta
property="og:url" content="https://site.com">
<meta
property="og:title" content="note ――Create, connect, and reach.">
<meta
property="og:description" content="note（Note) is a service that
connects creators and readers who can easily post text, photos, illustrations,
music, videos, etc. You can freely use it like a blog, use it like an SNS, or
sell content.">
<meta
property="og:image"
content="https://d2l930y2yx77uc.cloudfront.net/assets/default/default_profile_ogp-01444af7688b35c221fc94abeba7a850b620058f565afc1dca291d7b3fe191f8.png">
<meta
property="og:type" content="article">
This is the open
graph setting that will be set in note. How this would look like
og:title: Title
of the object.
og:type: the
type of the object. See "OGP Description" in Resources for a list of
types.
og:image: An
image URL representing the object.
og:url: the
canonical URL of the object.
These four open
graphs are OGP required on every page. og:site_name and og:description are
optional OGPs.
og:site_name:
The name of the entire site.
og:description:
Description of the object.
Control
searches with robots
It is robots
that control whether or not to be indexed by search engines. This can be set by
writing robots in the name attribute of the meta tag.
<meta
name="robots" content="noindex, nofollow">
You can set
whether or not to allow search engines to index with the content attribute in
this tag. By default, index and follow are set.
The robots
content parameter type
index -- tells
search engines not to index the page. follow -- If the page is not indexed, the
crawler will follow all links on the page.
noindex -- tells
search engines not to index the page.
nofollow --
Tells the crawler not to follow links on the page or even pass along the links.
noimageindex --
tells the crawler not to index any images on the page.
none -- Same as
using both noindex and nofollow. That is, it doesn't index pages and doesn't
follow every link.