Jagobisik

5 Things You Need To Consider For Your Website

Jagobisik

Is beautiful website enough? Well, it depends on the purpose of your website. But, for most website, a beautiful interface are not enough. There are some other thing you need to consider to do, especially if you care about User Experience and SEO. Here, I'll give you 5 things you need to consider for your website.

HTML Meta Tags

Metadata is information about data, in this case about your web page. HTML have <meta> tag that provides information about your document. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

<meta> tags usually put inside <head></head> element.

Here some example of <meta> tags that you can use:



<head>


<meta name="keywords" content="Web Developer, Website, HTML">


<meta name="description" content="Professional Web Developer for you">


<meta name="author" content="John Doe">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>


If you need to lear more about <meta> tags, you can go to W3Schools.

Structured Data Markup (Schema)

If you care much about SEO, then you need to consider put a Structured Data Markup, because Google need those data to read your page(s) and to decide where to put your page(s) on their search results. Once Google understands the data on your site, your data can be presented more attractively and in new ways. Well, Google ain't smart enough to understand what do you mean about your page(s), so it need some help to understand. Google rely on those data to understand.

Schema.org as a collaborative project provides vocabulary that can be used with many different encodings, including RDFa, Microdata and JSON-LD. Many applications from Google, Microsoft, Pinterest, Yandex and others already use these vocabularies to power rich, extensible experiences.

You can read more about Structured Data Markup on Shema.org or GitHub.

(Facebook) Open Graph

If you care about how your page will be displayed when shared to social media, especially Facebook, then you need to consider to put Open Graph protocol on your document. The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

To share your content on Facebook as URL, it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook.

Here's an example of content formatted with Open Graph tags for optimal display on Facebook:

Here's how to mark up an article, news story or blog post with og:type="article" and several additional properties:



<head>


<meta property="og:url" content="http://jagobisik.com/blog/5-things-you-need-to-consider-for-your-website"/>


<meta property="og:type" content="article"/>


<meta property="og:title" content="5 Things You Need To Consider For Your Website"/>


<meta property="og:description" content="Is beautiful website enough? Well, it depends on the purpose of your website."/>


<meta property="og:image" content="http://jagobisik.com/images/blog-photos/website-tips-2.jpg"/>


</head>


If yo need to read more about Open Graph markup, you can go directly to Facebook Open Graph Markup and The Open Graph protocol.

Twitter Cards

We have to admit that Twitter is one of the most popular social media after Facebook. So, why don't we consider about how your page will be displayed on Twitter when someone share it there? Well, Twitter has its own markup to do that. It called Twitter Cards.

Twitter says that with Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.

Here's an example of content formatted with Twitter Cards markup for optimal display on Twitter:

Here's how to mark up an article, news story or blog post with twitter:card="summary_large_image" and several additional properties:



<head>


<meta property="twitter:url" content="http://jagobisik.com/blog/5-things-you-need-to-consider-for-your-website"/>


<meta property="twitter:card" content="summary_large_image"/>


<meta property="twitter:title" content="5 Things You Need To Consider For Your Website"/>


<meta property="twitter:description" content="Is beautiful website enough? Well, it depends on the purpose of your website."/>


<meta property="twitter:image" content="http://jagobisik.com/images/blog-photos/website-tips-2.jpg"/>


</head>


If yo need to read more about Twitter Cards markup, you can go directly to Twitter Developer Documentation.

Page Speed

Design and Display are not everything. It would be pointless if nobody's happy visiting your page because it's too slow. Well, last but not least, you need to consider to optimize your websites speed. Page load time is depends on many factors like render-blocking, uncompressed images, or even unminified script.

To check your page load time score, you can use Google PageSpeed Insights. It will tell you not just the score, but also which part that expected slow down your page load time. As I know, there's 10 items that determine your score. They are eliminate render-blocking, optimize images, reduce server response time, leverage browser caching, avoid landing page redirects, enable compression, minify CSS, minify HTML, minify JavaScript, and prioritize visible content. This will also give you from both Mobile result and Desktop result. Sometimes, this task become the most stressful job for web developer if you didn't consider it since the first time you build your website.

Tags: SEO, User Experience, User Interface

PrintEmail